1) Use reset css file
What is a reset css and why do i need to add ?
A CSS Reset is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
Every browser has its own style sheet. For example most of the browsers make links blue and visited links purple, gives extra amount of padding and border. And form fields and buttons are looks different in every browser.
Reset css file can force every browser to have all its styles reset to null and will avoid cross browser differences as much as possible.
2) Use Structural naming conventions
.blue-link {color:blue;}
Above class is a presentational naming convention, which don’t help us to describe about element. What if instead of .blue-text, if we use .info-link
The practical reason for doing this is that it keeps your HTML markup accurate even if – say – you change the style of the .blue-link class to green or brown.
Of course You can always do a batch find-and-replace if you have a static site, but why rely on that when you can avoid it in the first place with a little
forethought. It also keeps your code semantic. What happens if your client suggests red color
.blue-link {color:red;}
Here your blue-link element renders as red and which is irritating. If you added class name as .info-link, then it wouldn’t matter if it’s red,green or blue.
In a survey of websites of some web professionals, Andy Clarke lists the naming convention used for the structure of these sites, check it out here.
3) Use hyphens instead of underscores
Older browsers like to get glitchy with underscores in CSS, or don’t support them at all. For better backward compatibility, get into the habit of using hyphens instead.
4) Indent your css rules
.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}
you can write your code like this
.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}
4) Use proper comments
Keeping your stylesheets clean and easy to understand, comments are going to be a great way for you to keep things structured and clean.
/********** Youe code here **********/
4) One rule for one line and multiple rules for multiple lines.
Following the simple rule above, you can cut down on the clutter in your css files drastically. Below you will see the two different ways you can write your css code
out – some people swear by putting everything on a single line, but I tend to believe in the above mentioned rules: one rule = one line, while multiple rules =
multiple lines.
.classname { border: 0; }
.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}
5) Always use shorthand code
This will allow you to speed up writing process, cut down on clutter in your stylesheets and will allow you to find things much easier.
.classname {
margin-left: 1px;
margin-right: 2px;
margin-bottom: 4px;
margin-top: 1px;
}
to
.classname { margin: 1px 2px 4px 1px; }
6) Validate your codes
Make use of W3C’s free CSS validator. If you’re stuck and your layout isn’t doing what you want it to do, the CSS validator will be a big help in pointing out errors.
Designs for User Experience 