4:38 PM
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 ELEMENTSborder: solid 1px #DEDEDE;
color: #000;
padding: 10px;
width: 650px;
}
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;
}
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;
}
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;
}
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!!!
Posted in: 
