Tips for Writing Better CSS

For a Website Developer CSS(Cascading Style Sheets) is a very important thing. It not difficult to learn and master the CSS but sometime in large projects it become difficult to manage the CSS. So we are discussing few things that will help in managing the CSS. Below are some tips for writing better CSS

1. Use CSS Reset

   Before writing the CSS style it is advisable to reset stylesheets. It will allow you to take your browser to zero and then apply your defined style to the elements.it becomes much easier to ensure that every browser is displaying items properly after reseting the CSS.

2. Avoid Use of Global Reset

   Don’t use the global reset to remove the margin and padding from all the html elements because it’s a slow and inefficient way. If you use global reset then you will have to define margin and padding for each element that needs it.

   Don’t Use

   *{margin:0;padding0;}

   Do Use

   html, body, div, dl, dt, dd, ul,  h1, h2, h3,  pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
   table { border-collapse:collapse; border-spacing:0 }
   fieldset, img { border:0 }
   ul { list-style:none }

3. Use Indentation for CSS rules

   Try to indent the CSS rules. Indenting the rules will help you in easy scanning of the CSS rules.

   Don’t Use

   .demo
   {
   background: #FFF;
   border: 0;
   color: #252525;
   float: left;
   margin: 0;
   padding: 0;
   }

   Do Use

   .demo{
   	background: #FFF;
   	border: 0;
   	color: #252525;
   	float: left;
   	margin: 0;
   	padding: 0;
   }

   The indented rules will help you in easily scanning the CSS classes and IDs.

4. Avoid IE Hacks

   CSS rules may help in maintaining the consistent look of the website over different browsers. It may also cause problems with the newer versions of IE like IE8. So it is advisable to use conditional stylesheets instead of hacks.

5. Take Proper IDs and Classes Names

   Use proper and meaningful names for the classes and Ids. For example suppose you are applying style to a div which contains the content of the page. you can use .contentdiv or #contentdiv as you class or ID name resp.

6. Make Use of Comments

   Comments are always the best friends of the developers. They helps in easy scanning and understanding. You can use comments for a block or for a rule. This will help in scanning and finding the css rules in the style sheet easy.

   /********** Menu Style code here **********/

7. Use CSS Inheritance

   Use the css inheritance to apply the same rule to the multiple elements within an element. For example:

   .content p{text-align:justify;}
   .content span{text-align:justify;}
   .content li{text-align:justify;}

   The above styles can be combined as

   .content {text-align:justify;}

   Usage of inheritance will reduce the file size.

8. Combine multiple Selectors

   Try to combine multiple selectors having the same style.

   p{font-size:14;font-weight:200;}
   span{font-size:14;font-weight:200;}
   div{font-size:14;font-weight:200;}

   Instead of writing the above code you can combine them.

   p,span,div {font-size:14;font-weight:200;}

   This will save the time and reduce the file size.

9. Use Shorthand Properties For CSS Styles

   Use CSS shorthands for writing the CSS codes. The shorthand can be used for properties like Font,Border,Margin,Padding, Background.

   .main{
   padding-left: 10px;
   padding-right:5px;
   padding-top: 2px;
   padding-bottom:1px;
   }

   The above can be written as

   .main{
   padding: 2px 5px 1px 10px;
   }

10. Create and Use a Table of Contents

    Writing Table of content at the top of the style sheet will help you and someone who looks at the stylesheet in finding the rules in the stylesheet. They can easily scroll and move to the section they want.

    /*****************************************************
    1. HEADER code
    2. NAVIGATION code
    3. CONTENT code
    4. SIDEBAR code
    5. FOOTER code
    *****************************************************/

11. CSS Rules Should be Readable

    Group all the styles for an selector either in one line or each style in its own line. This will make your css easy to read and update later.

    .demo{
    background: #FFF;
    border: 0;
    color: #252525;
    float: left;
    margin: 0;
    padding: 0;
    }
    or
    .demo{background: #FFF;border: 0;color: #252525;float: left;margin: 0;padding: 0;}

12. Order CSS Properties Alphabetically

    Arrange all the rules within a selector alphabetically. This will help you in finding the proper line of code you want to change. For Example

    .demo{
    background: #FFF;
    border: 0;
    color: #252525;
    float: left;
    margin: 0;
    padding: 0;
    }

13. Use External Stylesheets

    It is advisable to separate you style from the presentation. Keep all your style in external sheet and add your stylesheet using to your html page. This will help you in updating the styles later on. At that time you don’t have to go to html files and update your styles.

14. Compress CSS code

    When you are finished with the development and ready to deploy your projects at that time compress your css by using various compression tools. This tools compress your CSS by removing white spaces from you stylesheet.

15. Be Consistent in Writing CSS

    It is advisable to follow the consistent way to develop the stylesheets. try to use the same approach for writing the multiple stylesheets in the application.

16. Split CSS into multiple files

    If you are working on a big project then try to split you styles in various stylesheets based on the functionality. After splitting the css you can import them in one other based on the requirement. this is also called as Bridging of css files. This Helps in reducing the HTTP request. You can import CSS like this

    @import "style/css/reset.css";
    @import "style/css/news.css";
    @import "style/css/video.css";

These are some tips for writing better CSS

• About
• Latest Posts

Rajat Jain

Latest posts by Rajat Jain (see all)

• How to reset the Icons cache in windows - February 3, 2014
• Filling Dropdown in asp view in MVC3 - December 3, 2013
• Tips for Writing Better CSS - November 27, 2013