5 Steps to Write Better Css

There are plenty of CSS tutorials are available on internet but the few tutorials are useful. In this tutorial you will find 5 steps to write better css code for your next website project. I hope you will enjoy this tutorial.

1. ResetCss

You should always use reset Whether it can be Eric Meyer Reset, the YUI Reset, or your own custom reset, just use something.

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on – Eric Meyer

[code lang="css"]
html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, iframe,
 blockquote, pre, 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, fieldset, form, label, legend, table, caption, tbody, tfoot,
 thead, tr, th, td, input, select, textarea  

{margin:0; padding:0;}
[/code]

[code lang="css"]
*{margin:0; padding:0;}
[/code]

2. CSS Shorthand

One of the best and important feature of CSS is the ability to write code in a minimized way.

Incorrect Code

[code lang="css"]
{
margin-top:10px;
margin-right:7px;
margin-bottom:10px;
margin-left:7px;

padding-top:10px;
padding-right:7px;
padding-bottom:10px;
padding-left:7px;

font-size:12px;
font-weight:bold;
font-family: Arial, Verdana, Tahoma, sans-serif;
}
[/code]

Correct Code

[code lang="css"]
{
margin: 10px 7px 10px 7px;
padding: 10px 7px 10px 7px;
font:bold 12px Arial, Verdana, Tahoma, sans-serif; 
}
[/code]

3. Don’t using so many classes and Id’s

I have noticed that most of the beginners add classes and ID’s to almost every element on the page, which is not required.There are some examples below of what I am referring to.

Incorrect Code

[code lang="htmlstrict"]

[/code]

Here is the correct code

Correct Code

[code lang="htmlstrict"]

[/code]

4. Organization you Stylesheet

You should organize your stylesheet so that it is easy to find things and related items are close together. Use comments effectively. For example, There is the Example will tell you how to organize your stylesheet

[code lang="css"]
/*Reset*/
Remove margin and padding elements

/*Basic Elements*/
Define style for basic elements: body, h1, h2, h3, h4, h6, ol, ul, dl, p etc.

/*Generic Classes*/
Define style for generic classes: simple things like remove the bottom, 
floating to the sides etc. 
/*Basic Layout*/

/*Basic Layout*/  
Define the style for basic layout: header. footer, sidebar etc.

/*Header*/
Define the style for header

/*Content*/
Define the style for content area

/*Footer*/
Define the style for footer

/*Etc*/
Continue

[/code]

5. Use Conditional Stylesheets

Internet Explorer is the most buggy of all browsers. Fortunately you can use conditional comments to manage the CSS that is served to IE. If I need it I have a stylesheet called ie6.css that targets older versions of IE. It allows me to manage CSS for older browsers quickly and easily.

Here is the Example

[code lang="htmlstrict"]
 
[/code]

Conclusion

These are just some of the tips that help me to write better code. I hope that tutorial will also help you to write better and clean code. Apply these Tips to your current and next projects, and you will surely appreciate the efforts.

If You Think that tutorial can be more better , Please share with us. Comment us

if you would like to receive more inspiration from us, please consider subscribing to our feed by RSS or by email.

7 thoughts on “5 Steps to Write Better Css

  1. Overall, really good tips. Generally, we don’t use the universal selector ( * ) to reset margin and padding because form elements are so unstable cross-browser it does more damage than good.

    But if you’re writing a site without any forms, I say, absolutely use it.

    Good post, thanks

  2. Well example number three is basically right. Though I can’t recall using the same name for id and class being wrong (never tried it, never stumble upon an example) it appears very stupid and messy.

    But giving individual identifiers to navigation elements is necessary if you want to highlight a current item via css. This example is maybe not the best to be shown and may confuse beginners as bad or wrong habit/code.

  3. Nice article for CSS coding. Yes a well organized stylesheet is always good for browser compatibility as you dont have to check it again.

  4. Example 3 can be difficult if you want to show your visiotrs on which site they are right now. There’s no way around IDs then.

  5. more better way of shortening CSS code:

    {
    margin: 10px 7px; /* TRiBLe method */
    padding: 10px 7px; /* TRiBLe method */
    font:700 12px Arial, Verdana, Tahoma, sans-serif; /* bold=700 */
    }

Leave a Reply

Your email address will not be published.