CSS Best Practices for Modern Designs
In 2001, I discovered CSS and it changed my life.
Previously, I had used FrontPage before switching to Dreamweaver2 and both software packages required me to update the entire website every time a graphical element wasn’t working for me. For a 2-page site, this process was relatively quick and simple; but when I had more than 100, it started to become a hassle. CSS solved this problem by separating design from content.
Like many developers, when I started programming, I coded in a linear way: the header, the content and the footer. Looking back at some of my older projects, that was almost certainly the worst practice possible: each section of the site was treated as if it were standalone, creating huge inefficiencies. It also tended to make your code look like it was dumped from a WYSIWYG editor.
This article presents advice to help shift your thinking from linear code to CSS. Keep in mind that there are a lot of ways to develop in CSS— feel free to try this one and feel welcome to adopt it!
Survey the Challenge
The first step is to take a look at the design. You’ll have to standardize and:
- Estimate the recurrent elements.
- Examine the different sections of the design and determine how they are organized (principally header, content, sidebar, footer).
- Bucket elements: Which fonts are used and where? Which sizes are used?
Enhance your Browser with an Inspector
Depending on which browser you’re using, enable the web inspector for Safari or download a plug-in such as Firebug for Firefox. The benefit of these tools is being able to directly add, edit and remove properties of your style sheet.
Using these tools is the foundation of following best practices. I recommend playing around with the tools to familiarize yourself and see what they can do.
Avoid Repetitions & Condense Your Code
The best practice in CSS is to keep your code free of repetition. Avoiding them makes your code clean, neat, and easy to read.
For example, if you are designing a page with text in different positions, you may use position:absolute. Then, write the property only once and set it for several selectors.
div#header {
position:absolute;
top:100px;
left:25px;
}
div#content {
position:absolute;
top:150px;
right:10px;
}
div#footer {
position:absolute;
bottom:1px;
left:250px;
}
Should be:
div#header, div#content, div#footer {
position:absolute;
}
div#header {
top:100px;
left:25px;
}
div#content {
top:150px;
right:10px;
}
div#footer {
bottom:1px;
left:250px;
}
You should also use shorthand as much as possible.
For example:
margin-top:10px;
margin-left:auto;
margin-bottom:10px;
margin-right:auto;
Should be:
margin:10px auto;
Organize Your Code
When starting with a design, instead of programming each design element one by one, act like you’re building a house: first create the structure to avoid all IE6 issues, then define the fonts, and finally, add the colors and backgrounds. These sections will naturally divide your stylesheet and, at the same time, will remove code repetitions.
My personal preference is to write all the CSS in one page so I can quickly access elements I’m looking for. It is mostly a question of preference, though. Here is my skeleton:
/** * CSS Stylesheet * Date: */ /** * @struct */ /** * @fonts */ /** * @colors */ /** * @CSS3 */ /** * @IE6 */
Structure (@struct)
This section defines the global structure of your document. For the most part, it contains the following properties: position, overflow, float, padding, margin, top, bottom, left, right, width, height, display. A good practice: take an image of the design; apply it in the background and use it to set positions with the inspector.
This section is really useful for two key reasons:
- You can see immediately if you have layout issues, particularly under IE6. This way, you can fix them before working on the fonts and the colors.
- You can define the usual resets up front (more on resets below).
Fonts (@fonts)
Here you’ll put all font and text properties, such as font-weight, line-height, text-indent, text-transform, word-spacing, and letter-spacing.
Colors and Backgrounds (@colors)
Similarly to fonts, here you’ll put all the properties related to colors and background. If you are using a transparent PNG as a background, you can add it directly the using the IE filter.
Example:
div {
background:transparent url(img.png) no-repeat !important;
/** IE 6 **/
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod='scale');
}
CSS3 and IE6 (@CSS3 and @IE6)
All CSS3 properties such as border-radius and IE6 fixes should be here. It allows fast access to all legacy fixes, so when something changes (i.e. when –moz-opacity became opacity), you have to look only in this section and make the updates.
Others Sections?
Depending on what kind of project you are working on, you may have some other sections such as @Transitions if you are making a webkit website.
Pages: 1 2
Max.W…
Another handy CSS short code I use is the 3 value setting for margin and padding, example: padding: 20px 5px 10px which is: padding top 20px, left/right 5px and bottom 10px.
web development best prac…
Though as I don’t recommend designing an entire site in Flash it may be a good idea to make an interesting Flash intro or insert small Flash animations in important pages of your site. Always take care to optimize your our Flash animations. This is for good design.
John Schop…
Great article. Some good tips, although I am a fan of separating the sections into separate css files (like reset.css, text.css, style.css). I don’t know why, I couldn’t point out any benefits, it’s just personal preference I guess. If you use the 960 grid system for example, these files are already there…
Mark Carter…
Interesting playoff between file size and readibility. I personally don’t indent …. but do put all rules on a separate line. Putting them all on one line seems much harder for me to scan. But having all lines start hard left seems to make little difference to scanning to me, and actually saves a significant amount of filesize.
xethorn…
@Mark, @John, @Max: Thanks for your feedback!
@John: up to you to work with different files. The convenient part of working with different files: you can keep the structure for the print format and change the colors, fonts if necessary.
@Mark: it’s a question of time. The file is still easily readable if you know the way you created it. This technique also help to optimize your code and to work with different people.
By separating structure, colors and fonts, you’ll see: it’s not that difficult to read the code. If you want to remove a “float:left” on a div, you know where is the “float:left” property, you just need to remove the selector.
Combinated with Firebug, all you need is to use Cmd/Control+F. This shortcut is the best way to overview your CSS. But like I said, it’s up to people to find their own path.
CSS are definitively in a Zen Garden
Nathan…
I thought this article was really good. My CSS is still developing and I agree with slot of what you said and I would like to include these work methods into my CSS.
Thanks
Nathan
Raquel Elle Bell…
I have started to create my own naming standards for my styles so that I can interchange them with different projects so that i am not writing the same code over and over, and also so that I can build my sites in modules allowing me to plug and play different modules based upon the need of the client. It sounds cookie cutter but it makes the repetitious part of the sites development go more quickly and allows me to spend more time on the custom areas.
xethorn…
@Nathan, @Raquel: thanks for your comments.
@Raquel: like introduced in my article, what you’re talking about is factorization. All the code you’re writing, especially in the structure, and if you’re doing it in a good way (strong understanding of ids and class) can make all your code easily usable everywhere.
That’s one of the good aspects.
Thanks for sharing!
Mark Carter…
Hi again – I was just re-reading your article. I wondered why you’ve decided to switch from em’s to pixels for your font sizes?
xethorn…
@Marc: it depends. First I decided to mix between px (for box model) and em (font size). Then after a while, I saw that browsers are capable to scale quite well (except IE6). So for consistency, I decided to use the same metric all the time: if “margin”, “width”, “height” (etc) are in pixels, then all “font-size” are in pixel.
Like I said, this article is a different way to think your css. It’s not mandatory to follow each rule. You can pick what you find interesting and make your own path
speedmax85…
HI ! Your article is great.
Thanx