Below are some CSS best practices that every developer and designer should follow to write better code.
Reset user agent stylesheet or default styling of the browser :
There are default CSS properties in website pages that come from “user agent” stylesheet. Every browser has its own default stylesheet which is applied by default.
For Example, Most browsers by default make links blue, apply border and padding in the table, use some default font size and line-height etc.
This styling can create issues in the cross-browser compatibility. So we need to remove the default browser styling. Before we do anything else when coding a website, we should reset the styling. To reset stylesheet code we should include following code in our CSS file :
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
input, select { vertical-align:middle;}
table {border-collapse:collapse;border-spacing:0;}
nav ul {list-style:none;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
Use Modular IE Fixes: Sometimes our CSS properties do not work as required in the older IE version. For a cross-browser application which should work for older and new IE browser versions, we should create separate CSS file for IE older browser.
IE 7 Example:
<!--[if IE 7]> <link rel="stylesheet" href="css/ie-7.css" media="all"> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" href="css/ie-6.css" media="all"> <![endif]-->
If anything does not work in the IE7, IE6 then we can override in this stylesheet. These conditional comments will be ignored by every other browser so only IE 6 and IE 7 will load these styles.
Provide comments and reuse styles: We should type proper comments to identify the purpose of styles like we do in other languages and also reuse styles.
For Example :
/************* global css ************/
Body, H1 ,h2, h3, h4, h5, p { font-family: SegoeUI, color: #666 }
a{color: blue}
/***************** header css *******/
/************ main page css *******/
Website color combination and font-family should be globally defined because it is easy to maintain and later on if we need to change the color combination and font-family that can be easily done.
We should use shorthand CSS properties because it will shrink our code.
For Example Padding, margin, Font:
#test {
margin-left: 5px;
margin-right: 7px;
margin-top: 8px;
}
We can combine these styles in one line.
#test {margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively. }
Sometimes our elements share the same properties. We should combine elements in CSS to apply the same properties.
For Example : h1, h2, h3, {font-family: tahoma, color: #333}
Use Firebug: This browser tool is very important to debug issues. Every developer should use it. Firebug comes with a bundle of features (debug JavaScript, inspect HTML, find errors). We can also visually inspect, modify, and edit CSS to see the effects in real-time. Using debugger feature we can add breakpoints to javascript functions and we can check the execution step by step while viewing the values being assigned to variables.