Formatting CSS, how not to do it
Posted on 09 March 2008 (04:22 PM)
Every once in a while, I stumble across a piece of CSS and I think, Now that's a handy method of formatting, I'm gonna try that in my next project
.
One of those formatting styles is nesting your CSS rules according to the nesting level of the HTML elements you target. I've tried it once, but never again.
Let me first give an example of what I mean. Let's say you're writing CSS for the following bit of HTML;
<div id="myWidget"><h2>This is my widget</h2><ul><li><a href="#">Foo</a></li><li><a href="#">Bar</a></li><li><a href="#">Baz</a></li></ul><p>Lorem ipsum</p></div>- Download this code: /code/formatting_css_how_not_to_do_it1.txt
A clean way of formatting your CSS would be to nest and indent your rules according to these HTML elements, like this;
#myWidget {}#myWidget h2 {}#myWidget ul {}#myWidget ul li {}#myWidget ul li a {}#myWidget p {}- Download this code: /code/formatting_css_how_not_to_do_it2.txt
It's clean and easy to scan, and easy to edit, obviously.
The trouble is, though, that in order to keep it this easy to scan, you have to keep specifying the entire "path" to the element. This would mess it up:
#myWidget {}#myWidget h2 {}#myWidget ul {}#myWidget a {}#myWidget p {}- Download this code: /code/formatting_css_how_not_to_do_it3.txt
Now it doesn't conform to your own formatting standards anymore.
But what happens if you keep specifying the entire path? You get too specific. Imagine you want to style the links in myWidget differently on one page, which you identify by an id in the body tag. You can only overwrite your existing style rules by doing this:
body#theOtherId #myWidget ul li a {}- Download this code: /code/formatting_css_how_not_to_do_it4.txt
Believe me; this becomes tedious pretty fast. And this is a very simple example. If you have a complex design, with a complex set of style rules and you have to use lots of divs, you quickly find yourself typing ridiculously long strings of space-separated ids.
What's a good way of formatting CSS, then?
Well, to each his own, obviously. And don't get me wrong, I've seen the above approach on several sites, it's obviously all about personal preference.
I, myself, write my styles like this nowadays (meaning the slightly old CSS on this website is a little different in formatting);
selector {property: value;}another-selector {property: value;}- Download this code: /code/formatting_css_how_not_to_do_it5.txt
Nothing special really. I keep it all in one file, for two reasons:
- It's less HTTP requests
- I always know where to look for certain styles
The only thing I include is a global reset stylesheet (preferably a reset stylesheet by Eric Meyer), at the top of my main file.
Different sections I split by comments, like this:
/***General styles for elements and common classes/IDs*/- Download this code: /code/formatting_css_how_not_to_do_it6.txt
These comments are always in English, even though I only work with Dutch developers. I do this because I like the fact that someone might take a peek at my styles, to learn from them.
Another tip: create a comment at the top of your file, containing all the hexadecimal color codes you use and a definition of what that color looks like and maybe where it's used, like this:
/***Color guide:**- #e5bfd6= light pink(border secondary content)*- #96005a= dark pink(navigation)*- #7a9283= seagreen(breadcrumbs)*- #a1a1a5= grey(search-form)*- #dee4e0= light grey(border intro)*- #ffcc00= dark yellow(poll vote count)*- #3399cc= blue(poll vote count alternative)*/- Download this code: /code/formatting_css_how_not_to_do_it7.txt
Unless you're a mathematical wizard who can clearly see the seagreen that is #7a9283, this'll save you a trip or two back to your browser or image editing program.
If you're interested, you can view this stylesheet to see all the above mentioned formatting standards in place. It's the style sheet from one of my latest projects.
In the end, it's all a matter of personal preference. I'm interested in your way of formatting. Leave a comment and tell me about it!
Filed under HTML and CSS
- ← previous article: Dutch Internet Works is looking for freelance web designers
- → next article: Finally moved, but not without hiccups
Comments:
I'm all against formatting the Stylesheet because it will only make it "havier" (white-spaces and such)...
About this:
#myWidget ul li a {}
That is a good approach ONLY when you use it to define styles for controls (widgets, modules) you don't interact too much ( a tooltip or something like that), because there is no need to define classes or IDs to any element you have in that control.
This works good for me when dealing with contact forms, because the form itself will contain just a small number of elements (a few textboxes and a button or two) so I use that approach there too.
When it comes to define the stylesheet for a web page, well the situation changes, because there will be more than just a few controls on that page and things tend to get a little bit complicated so I tend to specify an ID or a class name for all elements I want to change their appearance.
A good approach also is to comment the stylesheet (I myself have found that to be very useful) especially when dealing with large (and very large) stylesheets.
:)