Some readers have asked to me what is the better way to organize a CSS file to optimize code readability and simplify code management.
Generally, I adopt just some simple rules and, it's my opinion, they are useful in order not to become crazy if you have to manage a CSS file for a page/site with a complex design. In this post, I discuss for simplicity a typical two columns fixed layout like this:
Step 1: redefine HTML elements
I think it's a good rule to redefine HTML elements (body, a, form, input...) in the first rows of your CSS files.
/* ------------------------------- */
/* HTML Elements
/* ------------------------------- */
html {font-family:arial, verdana, sans serif; font-size:13px;}
a:link, a:visited{color:#0033CC;}
a:hover{color:#003366;}
h1, h2, h3, h4, h5, h6,
form, input, text-area{
border:0; padding:0; margin:0;
font-family:arial, verdana, sans serif;}
h1{font-size:24px; color:#000000;}
h2{font-size:18px; color:#666666;}
...
/* HTML Elements
/* ------------------------------- */
html {font-family:arial, verdana, sans serif; font-size:13px;}
a:link, a:visited{color:#0033CC;}
a:hover{color:#003366;}
h1, h2, h3, h4, h5, h6,
form, input, text-area{
border:0; padding:0; margin:0;
font-family:arial, verdana, sans serif;}
h1{font-size:24px; color:#000000;}
h2{font-size:18px; color:#666666;}
...
Step 2: define page elements
In order to improve code readability, I suggest to indent all elements but with some sagacities: if an element have just two-three attributes (for example #navbar), you can use a single line to declare all properties, otherwise it's better to declare every single property in a new line (for example see #navbar li a:link, #navbar li a:visited):
/* ------------------------------- */
/* PAGE Elements
/* ------------------------------- */
#container{width:780px; margin:0 auto;}
/* PAGE Elements
/* ------------------------------- */
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
#main{width:auto; display:block;}
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}
#navbar{width:auto; display:block; height:24px;}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link,
#navbar li a:visited {
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link,
#navbar li a:visited {
background:#444444;
text-decoration:none;
height:24px;
line-height:24px;
display:inline;
float:left;
width:auto;
padding:0px 10px;}
text-decoration:none;
height:24px;
line-height:24px;
display:inline;
float:left;
width:auto;
padding:0px 10px;}
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
#column_right{width:200px; float:left;}
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}
#footer a{color:#666666; text-decoration:underline;}
Step 3: define custom class
In the final section of your CSS files, you can define all other custom classes with the same rules I specified above:
/* ------------------------------- */
/* OTHER Class
/* ------------------------------- */
.small{font-size:11px;}
.underline{text-decoration:underline;}
div.small-section{background:#CCCCCC;}
/* OTHER Class
/* ------------------------------- */
.small{font-size:11px;}
.underline{text-decoration:underline;}
div.small-section{background:#CCCCCC;}
div.small-section a{color:#333333; font-weight:bold;}
...How I said, these are only my personal suggestions and not true rules, but I think you can find them useful in order to deploy a more readable CSS file.
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
"these are only my personal suggestions and not true rules"
Well, they are strict rules for me now :) It's become part of my coding standards.
Good job. Very sensible article.
gr8 job
Buddy
This is so helpful. Txs. markus
Great article. I think every webdesigner should have a structure like templates.
I like your pictures, very nice.... ;)
it,s helpfut thx man
Thanks so much, this is gonna be very useful for me in my future web projects.
its really nice article and useful too!!
Great job buddy..
Great helpful css help for good css styling and coding.
Thanks
thanks its really helps a lot
O.. thx
Really good for using CSS
Nice article,
it's nice to have it nicely structured and easily read
thx for the tips
its nice and useful too!! good css styling and coding.