CSS Frameworks
A handful of CSS frameworks exist, which aim to simplify laying out a web site’s design. I even tried my hand at building one, which was a fun project, but in the end, each project is so customized that I don’t know how much a CSS framework can really help. Personally, it’s only been in setting up a layout that CSS frameworks have helped me out. Getting a three-column layout by only calling out classes in a couple of divs is pretty sweet and saves a lot of time with cross-browser compatibility. However, once I get into using images, fonts, colors, and such, it just gets too customized and I feel like I end up building my own styles anyway.
One thing that I think CSS frameworks do to improve web design is encourage developers to separate out the several functions of their styles. For a framework to really be beneficial, it will use the inversion of control principle in its architecture, which I’m not sure can really be applied very well in the presentation layer. But splitting apart the styles based on their function can move in that direction and produce more of a framework that a series of CSS templates.
My Method
My method is to have a few standard CSS files: reset.css, layout.css, type.css, color.css, and styles.css.
The reset.css file contains some standard reset styles that help me start off with minimal problems for cross-browser compatibility. By using this reset stylesheet, I’ve noticed that I have less of a problem addressing inconsistencies between the browsers.
* { margin: 0; padding: 0; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: sans-serif;
vertical-align: baseline;
}
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background-color: #fff;
}
ol, ul {
list-style: none;
}
/* Tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Then, all of my layout styles are contained in layout.css. Things like positioning and general layout styles go here. I don’t try to include too much margin and padding properties in here, because these will usually show up in my general styles.css file; I find they’re more accessible in there than by splitting up these styles too much. I also have a couple of standard classes that I use throughout the HTML as auxiliary methods in the design:
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
height: 1px;
width: 100%;
}
Whenever I need to produce a break in the HTML between divs, I’ll use the .clear class. I find that this is generally more effective than using br tags.
<div class="left_column">...</div>
<div class="right_column">...</div>
<div class="clear"></div>
<div class="footer">...</div>
The only catch with separating out a colors stylesheet is that all the border styles have to go there as well, if you’re going to add color to borders. But other than this, all the other stylesheets are used to house their respective functions, meaning that I put all font styles like size and font families in the type.css file, and so forth.
The main file I include in the web page is the styles.css file. At the top, I use @import to bring all the scripts in:
@import url("reset.css"); //reset for browser compatibility
@import url("layout.css"); //layout styles
@import url("type.css"); //font styles
@import url("color.css"); //colors and borders
Then, down the road when the client wishes to make changes that can be solved by adjusting styles, I can more easily locate changes, especially with color palette changes. I still have all the custom styles in the generic styles.css file, which I’ve noticed encumbers me less than using other CSS frameworks.
Comments
Submit Comment
