Tips to write better CSS

Robin Sharma said it very well, he said ”Giving starts the receiving process.” On that note, I’ve decided to share absolute ways of writing CSS for websites.

2011 has already begun and we are very close to hear about W3C’s official approval for HTML5 & CSS3. All major browsers do support all new tags introduced in HTML5 except IE 7/8. IE 7/ 8 don’t recognize unknown tags (tags introduced in HTML5). To help IE 7/8 understand the new tags we need to attach a small javascript file in our pages. You can grab this javascript file here - http://html5shim.googlecode.com/svn/trunk/html5.js

When you have this JS file don’t forget to attach it in a conditional code. The conditional code tells the browsers to load this JS only if the browser is lower version of IE than 9 (which means IE 6/7/8), or else don’t load this file. This conditional code will help us save one server request. If users are viewing your website using firefox, chrome, safari, IE9 etc., these browsers won’t load this file.

<--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

This is enough about HTML5, let’s move on CSS -

The main CSS file of your webpage need to have the reset CSS code at the very beginning. The reset css snippet removes the default styling of browsers so that you will get the full control on all browsers. Here goes reset css –

/* reset CSS */
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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; /*text-align: left;*/}
a img, :link img, :visited img { border: 0; }
table { border-collapse: collapse; border-spacing: 0;}
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
textarea { padding: 0; margin: 0; }
a{ outline: none; }
input{ margin: 0; padding: 0; }
html[xmlns] .clearfix { display: block; }

/*Your Website CSS*/

body{
    font-family: Arial, "Lucida Sans", "Lucida Sans Unicode", Helvetica, sans-serif;
    font-size: 72%;
    background: #f7f7f2;
    color: #333;
}
a{
    text-decoration: none;
    cursor: pointer;
    color: #f00;
}
a:hover{
    text-decoration: underline;
}
h1, h2, h3, h4, h5, h6{
    font-weight: normal;
}
h1{
    font-size: 3em;
}
And so on …………..

Another important thing to remember while writing CSS is to combine classes in one line, the classes that are sharing same css attributes. For example the overflow:hidden; attribute –

header, section, .container, .mainPage, aside{
    overflow: hidden;
}
.container{
    margin: 0 auto;
width: 980px;
}

When you write css in this format you save a lot of file size. In the example above 5 different CSS classes are being combined in one line because they all need same css attribute. So instead of copy/pasting same code snippet 5 times you can combine it in one.

Hope this will help you write better CSS.