CSS Best Practices for Modern Designs
Great Selectors
A selector is something which helps you to re-read your code. When well-written, they are a valuable asset when returning to a file after a period of time. A great one should contain: the element type, the id and the class name.
Example:
#id #id .classname
In this example, however, you can’t tell where the .classname appears. A better example would be:
div#id div#id a.classname
Also, when you are using selectors in your CSS, make sure they have at least one ID so you can remember where it is located in the document.
As a general rule, avoid using classes when IDs will do. Generally, classes should only be used for elements that are repeated or to define a state such as the currently highlighted tab.
Avoid Redundant Overriding
Examing the following code:
div, p {
font-size:12px;
}
In the design, all paragraphs were included in a div. Why then, is div, p written in the selector? The div is enough. Overriding elements will make your browser work harder at best, or may create cross-browser bugs, at worst. Inspectors such as Firebug are particularly useful in identifying overridden elements.
Keep Track of Your Changes
In the end, developers are human and sometimes make mistakes. I have an annoying habit of pressing the S-key without pressing Command simultaneously. Not only does my project not save, but an S is added to the code. Needless to say, it can take a long time to notice such errors.
Also, the larger the project, the more developers that are likely to be involved. To merge your work together safely and to secure your previous work, I strongly recommend the use of a versioning system such as SVN.
80 Characters Per Line & Indentation
Rule of thumb: never write a line with more than 80 characters. In CSS, it’s not terribly difficult to adhere to this rule. Most property definitions, except maybe “background,” aren’t going to take lot of characters. This rule is even more important for selectors.
For the same reason, enhancing the readability of your code, make sure you’re indenting. There are 2 different conventions: spaces (mostly 4) or tabbing.
div, p { font-size:12px; font-weight:bold; color:#111; background:#111; }
Should be :
div, p {
font-size:12px;
font-weight:bold;
color:#111;
background:#111;
}
Be Consistent With Measurements
For years, it was best practice to use em as the font metric to allow IE to scale text. But with modern browsers, this is no longer an issue. For modern designs, I recommend using pixels as the main size metric. Being consistent will remove surprises.
Example: the second ul has for font size .49em
ul {
font-size:.7em;
}
<ul>
<li>Test</li>
<li>
<ul>
<li>Test</li>
</ul>
</li>
</ul>
Reset the Browser Default Style
It is best practice to always reset the browser stylesheet. Many developers use the selector * (all existing elements) to reset margin and padding. Though this works, you should reset only the items you’re going to use to avoid unnecessary overriding.
My reset looks like this:
html, body, h1, h2, h3, h4, h5, h6,
div, p, ul, li {
margin:0;
padding:0;
}
ul {
list-style-type:none;
}
img {
border:none;
}
This depends on the elements you’re using inside your document. For instance: if I use a table, I should append “table, tbody, thead, tr and td” to the selector.
Resources
This article is intended to be a little refresh on CSS Best Practices, but if you want to get more in-depth, you should check out these excellent articles for more details:
Image Credit: And all that MarkleyPages: 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