After reading “5 Steps To CSS Heaven” over at pingmag.jp, and disagreeing with some of what was said I thought that writing this would be appropriate. I’ve been writing CSS professionally now for about 2.5 years so here are 5 quick tips that help me out in my day to day work. I wouldn’t call them best practices because everybody has a style that works for them, but these are what work best for me.
1. Organize Your CSS
Jon says you should write a table of contents at the top of the file, but I don’t really care about that, especially since I’m usually the only person to look at my CSS file. A table of contents is useful if how you demarcate your sections changes with each CSS file, but why make your life complicated? I like how his example file has an entire section for “Typography”. That’s like going to a supermarket and seeing one gigantic isle marked “Food”…. all parts of web design have to do with typography so lumping them all together doesn’t help you out much.
I lay out my CSS files the same way, every single time. I 1) lump all container/layout blocks together (divs with an ID of “header”, “footer”, “maincontent”, etc.) at the top, 2) then my headings H1 through H6, 3) then paragraph and link styles, and 4) then all my lists (navigation, etc.). I’m normally looking through my CSS with something like, “hey where’s that footer style?”, “damn that subtitle on the right has too much padding-bottom”, or “I have to change the hover state on that current navigation tab”, so organizing my CSS file according to what type of element it’s referring to jives with how I think about CSS.
Here’s the CSS file I always start with, feel free to nab it and use it for yourself.
Now couple the page organizational idea I just mentioned with the CSS indentation technique I’ve written about before, and you have a pretty clean CSS file. Check out Business Logs’ springtime.css for an example of the combination of these two techniques. Now if your brain doesn’t work like mine, I fully recommend organizing your CSS file in a way that matches how you work. Don’t just copy what I’ve said here if it doesn’t make sense to you, find out a pattern that makes sense to you and go with it.
2. Avoid Default Styles
As someone who works on fairly complex layouts all the time, I’ve learned that the easiest way to confuse myself and stare at my CSS file for awhile is to have default styles running rampant. By “default style”, I mean defining a default tag with no specificity, like this:
a {
color: red;
text-decoration: none;
border-bottom: 1px dotted red; }
or:
h2 {
font: bold 18px/1.4em "Lucida Grande", "Verdana", sans-serif;
color: #000;
border-bottom: 1px dotted #ccc;
padding: 0 0 3px 0;
margin: 0; }
The problem with defining all links or all H2s at the same time is that I use different link and H2 styles all over my layout, depending on where the tag shows up. A link inside of an H4 in the main column is going to look different than a link inside of a right column paragraph, but if I define all links to be red and have a bottom-border like I did above, then they’ll both start out with those styles. I’ll have to overwrite the color and the border-bottom if I wish to make them look different, and if I forget, then the default link style will cascade down and show up, probably making my link pretty ugly.
What I do in my CSS is this:
h2 { }
#maincontent h2 {
padding: 0;
margin: 0;
... }
To remind myself that a generic H2 is around, I leave the empty h2 { } in my stylesheet, right above all the specific H2 styles. This doesn’t really do anything from a CSS standpoint, but stylistically I now can scan down my CSS file and see if a wacky style somewhere is due to a default style I forgot to remove, or if it’s something else. Plus, scanning down a nice column of empty heading tags really breaks up the style sheet for me, making it easier on the eyes.
Judi brings up a good point down in the comments, and that instead of totally neglecting the default style, you find the lowest common dominator across all your particular H2 headings, or what have you, and make that the default. If all of your H2s have 0 margin, then make it so. Thanks Judi!
3. Use Your Utility Tags
Many times you’ll have a section in your design that calls for various typographical weights/looks all on the same line, or very close to each other. You might have a subheading on your blog with a different color for your permalink vs. your comment link, or a heading with a quick subheading right below it in a smaller font. For these little styles, I don’t like to drop in random divs and classes because I feel they’re not semantic and defeat the purpose of your nice XHTML everywhere else. Instead, I use some tags that I like to call Utility Tags. They would be:
<small>, <em>, and <strong>
I use these three tags all the time to accomplish little areas of design that are overkill for an extra div or class. Here’s an example of some XHTML that uses a utility tag:
<h2>Title Of Entry Here <small>Quick subheading here</small><h2>
Inside of an H3 heading I dropped a small tag to accomplish a subtle design change. I want the H3 main text on one line, and then the small text on the next line in a different font. Here’s my CSS:
#parentelement h2 {
font: bold 18px "Trebuchet MS", "Tahoma", sans-serif;
color: #f00;
padding: 0 0 3px 0;
border-bottom: 1px dotted #aaa; }
#parentelement h2 small {
display: block;
font: normal 12px "Lucida Grande", "Verdana", sans-serif;
color: #333; }
I used a utility tag inside of a heading, no class needed, and then targeted it directly via CSS descendant selectors. This keeps your XHTML uncluttered and lets you do quickie styles with no real effort. What’s the display: block; doing in there? Well normally <small> is an inline-level element, so instead of dropping <br /> right before it to make it jump to the next line, I just swap its display for block and have it do it by itself.
4. Use The Right Tool For The Job
I’m not a validation nazi, but I do appreciate the usage of semantic tags instead of generic ones. There are 6 heading tags (<h1> through <h6>) so before you start dropping in <div class=”sectiontitle”>, use what you’ve already got in your arsenal, namely, heading tags, because they’re there for a purpose. I rarely use DIVs for anything other than a box to surround sections on my site, so if your XHTML suffers from divitis then try replacing some of your tags with pre-existing HTML instead.
5. Name According To Where It Is, Not What It Looks Like
Over at PingMag, the article tells you drop classes like “red” and “strong” on your DIVs for quick styling, but I think that’s an awful piece of advice. Better names would be “error”, “important-message”, or whatever else you can come up with, because at least those names let you know WHAT it is instead of force-feeding you what it looks like. What’s better, telling you that the thing over there is a firetruck and you knowing that it’s red, or me telling you there’s a big red truck over there and you asking me if it’s a firetruck. One conveys more semantic meaning than the other, so pick the better of the two if given the choice. A commenter named ASD summed this up nicely:
“class=â€strong red align_right†– you are serious?
This is awful naming. Names should relate to content, not presentation. That’s the whole point of CSS – seperating presentation from content.”
Couldn’t say it better myself.
