Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

5 Ways to Instantly Write Better CSS

Five Ways of Writing Better CSS

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.

Be Sociable, Share!

Burn after reading » Now you're done reading. What's next?

Related

Related posts that might interest you:

Popular

Posts that are popular among visitors: