I hope you will have read my previous article on CSS Best Practices. This is another topic on the same subject, just to increase your knowledge of the CSS golden rules, tips & tricks. The inspiration for this article is from my day to day experience with the same.
Previous Article CSS Best Practices
Avoid in-line css
Use of inline styles hinders the purpose of CSS and should not be used in a live site.
Test your code in A-Grade browser
Test your code in an advanced browser before checking it in a broken browser. Building the site on a broken browser results in your code relying on the rendering of that browser and breaking on standards-complaint browser.Instead start from perfection and then hack for the less able browsers.
Minimize and cleanup your code
Use as little CSS as possible, remove styles and parts of styles not being used or that were experimented with in the design process. You can even use some compressors to compress the code by removing unwanted white space and line breaks.
Combine Selectors
Use inheritance to minimize your code as much as possible, like this.
Instead of writing
h1 {
font-family:Arial, sans-serif;
font-size:2em;
font-weight:bold;
font-style:normal;
color:#DE43A2;
}
h1 .title {
font-family:Arial, sans-serif;
font-weight:bold;
font-style:normal;
color:#CCC;
}
We can write
h1 {
font-family:Arial, sans-serif;
font-size:2em;
font-weight:bold;
font-style:normal;
color:#DE43A2;
}
h1 .title {
color:#CCC;
}
Use generic font families
While assigning fonts to the font-family cssproperty, always follow your fonts by a generic font family of that type like serif, sans-serif etc This will make any font available from that family substitute to the font, mentioned by you in the style and not available in the client computer.
Target your stylesheet
While linking your stylesheet in your document, specify the media in which to be used like print, screen, projection etc
<link rel="stylesheet" src="style.css" media="screen" />
Name your styles properly
Never name your styles on the basis of their properties or the appearance they are going to make, like arialblue5, redbox etc. Instead name the styles in terms of usage like sub-head, sidebar-box etc. One of the most important benefits of CSS is being able to change the look without having to change the HTML.
Use functional names for your classes, avoid words that describe how they look.
