Five Ways of Writing Better CSS
Recently I read about an article that teaches web designers five ways to write better, neater and cleaner CSS by Trevor Davis, after following a link in a tweet.
In case you’re still wondering what CSS stands for, it actually means Cascading Style Sheets – the stylesheet part is easy to understand. CSS is created with a notion to separate content and styling, which explains why the <font>, <center> and etc. tags are deprecated and no longer accpeted in (X)HTML. The cascading part is a little tricky – it means that you can actually override certain properties in the stylesheet by being more specific in your selectors – for example, span.highlight can be overridden by div.content span.highlight if the <span class=”highlight”> is located within <div class=”content”>.
Back to the post itself, here are the five ways Trevis recommended, with my personal opinions/comments. Of course, for more details you will have to follow the link (or else I’ll be slapped with a plagiarism charge):
Reset
I never had a habit to use a reset stylesheet in the past, and the different default styling applied to elements (such as a certain margin and padding for the <body> tag, for example) drove me mad. It was until Jeff from Perishable Press wrote about them that I realized how important they are. For the moment being, my blog is using the 960 grid reset since I’m using the grid system as part of my layout. In the past, I’ve used Tripoli reset, and it was quite a good experience!
Alphabetize
I don’t think it serves much purpose, but the perfectionist side of me forced me to alphabetize my entire stylesheet as much as possible, except for the dimensions of the element (width and height), which I will place last.
Organization
I do organize my style sheet a little, just in case any curious person would like to took a peep at it. I divide my stylesheet into several sections. Although they don’t help much with navigation around the style sheet (I will just use the search function instead), they do keep things in order.
Consistency
Now the tricky part. I remembered reading a debate on what kind of way people prefer to organize their stylesheet – single line vs multiple lines. Let say we take one from my current style sheet, the single line way will look like this:
.entry-title a span.title-comments {background: transparent url(images/comment_bubble.png) 0 0 no-repeat; color: #cccccc; font-size: 90%; letter-spacing: -2px; margin-left: 4px; padding: 2px 2px 2px 16px;}A multiple-line one will look like this instead:
.entry-title a span.title-comments {
background: transparent url(images/comment_bubble.png) 0 0 no-repeat;
color: #cccccc;
font-size: 90%;
letter-spacing: -2px;
margin-left: 4px;
padding: 2px 2px 2px 16px;
}Of course, the first method saves you the line-breaks and your finger from all the scrolling madness, while the second method makes error-spotting easier – when you place the code under validation test, and when an error is found on a certain line you will immediately know which one went wrong.
Start in the right place
Just like what Trevis puts it, “Don’t you dare touch your stylesheet until you have written your markup!” It is imperative that you get your markup right first – which includes ditching the hated table layout, removing deprecated elements, checking your file with a validator before hand – before moving on to CSS.
These are excellent tips, teddY — thanks for sharing. I like to keep things neat and tidy, but have yet to discover the joys of declarative alphabetizing. Instead, I prefer to organize my declaration blocks according to the number of characters contained on each line, such that the result looks like a nicely formatted chunk of code with consistent right text edges. I have been ridiculed for doing it this way, but I don’t care because I think it looks clean, crisp, and complete. Anyway, just wanted to thank you for sharing these great reminders with us. And thanks also for mentioning my article on CSS Resets — much appreciated! :)
Check out Jeff Starr’s latest blog post » Time for a New Design?
@Jeff Starr: Thank YOU for sharing the CSS resets back then, Jeff ;) They’re one of the reason why I’ve decided to embrace CSS more – in the past, my efforts to design were trumped by the different default styles each browser applies to the elements.
I don’t really think alphabetizing is important (since usually they won’t extend beyond 10~15 lines for each selector) but it’s the perfectionist inside me that instructs me to do it that way. Heh.
Your style of organization is interesting! So each of your selectors will take on this ‘sloped’ look. Cool!
You’re welcome about the linking! It has changed me experience with designing so much that I am ought to share it.
Nicely written Teddy.
I don’t think Alphabetize would work wonders. For me the break down is Header, Content and Footer. Key CSS like font style will always be at the top.
Personally, my favorite is a single liner. Some call it the Pro’s way, but I personally think it depends on the coder. I don’t like scrolling a million miles south. Afterall, beauty lays in the eye of the beholder, that includes perfection as well ;)
If Travis warns about touching CSS before Markup, let me warn something else.
*Dont you dare touch those keyboard if you haven’t drawn anything on a paper!*
Check out NoktahHitam’s latest blog post » Utusan Does It Again, Twist-Twist-Twist
@NoktahHitam: Thank you! I believe in breaking down the selectors into their respective placement on the page – such as header, footer, content and etc. I do have a more complicated organization for the content part because I’m taking care of the typography, image alignment, coding, comments and etc.
Single liner are very neat, and pleasing to the eyes as well. Just like what you’ve said, it eliminates the need to scroll madly in search for a certain selector, and if you’re familiar enough with your style sheet (of course you are) it’s easy to locate them without much scrolling.
In the past I design my layouts based on the abstract concept I had in mind at that particular moment, resulting in rather inconsistent appearance and constant editing of previously decided styles (something like being flicker-minded). It was only until the few recent layouts that I pen what I want on paper, and then do some research on CSS frameworks (like 960 grid system, Blueprint CSS and etc).
I am yet to develop a habit of creating a Photoshop mockup of what I want though. I did all the calculation on paper and then directly export the ideas into notepad (handcoding is more fun!) and then do the graphics later :P
a comprehensive post teddY.
for me, i’m using multi lines for every class or IDs. So far, it looks good, but i figure out that, this is one of the reason im having severe injury on my right hand wrist and arm. hahaha. too much scrolling i think. hehe.
Check out abdusfauzi’s latest blog post » A Very Quick Post : Dedicated to AisyahKama
@abdusfauzi: Hah, same here! Sometimes I get a pain in my wrist because I’ve been resting it on the wrong thing (e.g. edge of the table instead of some supportive pillow which I am yet to get one). Sheeesh. I’m worried about getting carpel tunnel syndrome! Haha.