Simple Rules To Make CSS More Readable

It's been a week or so since I started designing a website for one of my client. I got a lot of exposure to various parameters in CSS. So, I just wanted to share the knowledge which I gained in CSS. during the design process. Basically, this post will provide you tips to make the CSS structure of your template look more organized which in turn, leads to better readability and easy debugging.

1. ALPHABETICAL ORDER

I found on many blogger templates especially the free ones wherein, the properties of the elements are completely unordered meaning to say, they do not follow a regular pattern in which they are arranged. So, if you wish to make a change in the CSS structure, well, it will consume a lot of time than it should. I suggest you arrange the properties of each element alphabetically. Consider the following example for better understanding.

#nav{
border: solid 1px #DEDEDE;
color: #000;
padding: 10px;
width: 650px;
}

2. INDENT CHILD ELEMENTS

I highly suggest you indent the related portions of the code. Consider the following example for better understanding.

#nav{
width:650px;
}
#nav ul li{
float:left;
}
#nav ul li a{
display:block;
}

3. GROUPING UP SIMILAR ELEMENTS

If you have a group of elements which share the similar properties and values, then it is highly recommended that you group them in a single declaration. For better understanding, just consider the following example.

#main{
width: 650px;
}
#main h1{
color: #000;
font-size: 22px;
font-weight: bold;
}
#main p{
color: #000;
font-size: 12px;
padding: 10px;
}

4. USE COMMENTS

I do not suggest using comments provided you are an expert with CSS. If not, it is better you place comments to separate the logical sections of code that is, the header, sidebar, main content and so on... The main reason why I said to avoid the comments for an expert is because, that will save you few bytes when you compress them, implies a faster loading time for your site. I recommend you to read the following article - Speed Up Your Blog (Tips And Tools). Consider the example below that separates various parts of the CSS structure.

/*-------------------
HEADER
------------------- */
#header{width:650px;}
#header a:link,
#header a:visited{
color:#0033CC;
}
/*-------------------
NAVIGATION BAR
------------------- */
#nav{width:650px;}
#nav ul li{
float:left;
padding:0 10px;
}

I hope these simple tips will help you design a better template for your blog. If you have got some interesting tip with you and would like to share it with us, well, our comments sections are always open. Just share your knowledge with us. Meet you in another interesting article!!!

Enjoyed the article?

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Other Recommended Posts

SBA said on April 12, 2011 at 4:19 AM :

Hi,
I do like these tips. Not sure about the alphabetizing though, seems a bit much if you make changes. I'd add this tip: when you're not sure if you want a blue or green link color during development, add both elements and the later one overrides the other(s) --- leaves a nice trail for restoring values, just clean it up later (LOL).
I use comments to keep things sane when I used to hack Blogger templates! I even put in the date and the css line that I replaced... again it can get messy so need to clean up once everything is working properly.

Sometimes when I customize a theme I add the code at the end of original code or section (like a Thesis custom file). My code then overrides the original. Makes it easier to find overrides when theme is upgraded. However, you need good section headings and comments.

Mukund said on April 12, 2011 at 9:45 PM :

@SBA: It's very nice to see you back on my blog commenting! You are absolutely right! Even I sometimes leave the coding to override one another especially with the spacing. May be even I should follow the tip you mentioned at last to make things easily identifiable.

Amit said on April 29, 2011 at 6:11 PM :

The technique is use to make CSS more readable is: code it any way, then goto cleancss.com and optimise there for more readablity, a far better solutions. . .

Mukund said on April 30, 2011 at 9:18 AM :

@Amit: The link you gave simply compresses the CSS part but what I meant here is to make it more user friendly! Hope you understand the difference between the two! By the way, thanks for your comment Amit!

Tiyo Kamtiyono said on August 23, 2011 at 10:43 PM :

I'm not really agree with the point of this post. I prefer to write a class or id in my stylesheet into one line only. I think this what explained in this post http://perishablepress.com/css-code-folding/ is much more useful.

Mukund said on August 23, 2011 at 11:30 PM :

@Tiyo Kamtiyono: Well, I personally use one line codes on my website but that does not make the CSS more readable. Every designer does the one line coding so as compress the CSS for speeding up the load time. But, the article is to make it more readable. So, I hope you understood what makes it more readable. Thanks for the comment anyway!

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT