11 Tips for CSS coding

CSS has an important role in web application development. HTML is the skeleton of the web site. But CSS provides flesh and shape and beauty to the HTML skeleton. Now a days, web is available to common man. They access various websites on different devices. It is interesting that most of the users are particular about the look and feel of a web application which they are using. In this scenario, the importance of CSS comes. Here are some Tips for CSS coding for the UI developer, who is a beginner in this field.

Tips for CSS coding

1. Use Reset CSS

Different browsers have different ways of handling the styles. Or different browsers have different default styles for rendering the HTML, like font size, style, weight, margin, padding etc… All the HTML elements have some default styles and it varies depending on the browser. So how we can manage this is to use reset.css, a seperate style sheet for resetting the browser specific styles. For eg. refer Eric Meyer’s Reset CSS

2. Understanding CSS Selectors

CSS selectors are used for applying css rule to an element. CSS selectors are: element selectors or tag selectors (div, a, span, h1, h2 etc..), class selectors (.myclass, .newclass etc…), ID selectors (#header, #footer, #container etc..), pseudo-class selector (a:hover, a:link etc..), selectors based on relationship (div > span, div ul li). Use the selectors intelligently for the better use of css.

3. Re-usability of CSS

When you code css for a web application, always think about the re-usablity of the css. Use class for adding styles, so that the same styles which is common for different elements or blocks of html can be used. Using classes is always better than using element selectors.

4. CSS Grouping

CSS grouping will help us to reduce the css code. Elements/selectors which has some common styles, can be grouped together.

h2 {
    color: #000;
}
.title {
    color: #000;
}
.secondtitle {
    color: #000;
}

//Grouped css

h2, .title, .secondtitle {
    color: #000;
}

5. Use Short-hand CSS

One of the main advantages of using CSS shorthand is reduction in web page download time. Using CSS shorthand will reduce number of css lines, it makes the code clean and easier to understand. Refer example of font short hand css.

6. Avoid Superfluous Selectors

Sometimes our CSS declaration can be simple. Instead of using “ul li”, we can use directly “li”. When we are using multiple list items in a page, it is better to avoid using tag selectors, instead use class selectors.

7. Use of !important

Any style marked with !important will be taken into use regardlessly if there’s a overwriting rule below it. !important is used in situation where you want to force a style without something overwriting it. Or defining a rule with the !important ‘attribute’ discards the normal concerns as regards the ‘later’ rule overriding the ‘earlier’ ones.

.header { background-color:red !important;
	 background-color:green;
	}

Here the background color of the header class will be red even if the green color rule is declared after the first rule.

8. Replace Text with Image

It is a common practice to replace the text title with image. For example, usually image is used for Logo in a web, than using a text.

    #logo {
       background:url("logo.jpg") no-repeat 0 0; 
       display: block;    
       width:150px;  
       height:100px;
      text-indent:-9999px; 
    }  

text-indent:-9999px; throws your text title off screen, replaced by an image declared by background: {…} with a fixed width and height.

9. Use a master stylesheet

It is always better to use a master style sheet which includes other style sheets.

@import url("reset.css");
@import url("global.css");

@import url("structure.css");

10. Keep a library of helpful CSS classes or reusable classes.

.width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
.clear { clear: both}

11. Proper naming of classes and IDs

Use a common naming system. Having a naming system for id’s and classes saves you a lot of time when looking for bugs, or updating your document. Especially in large CSS documents, things can get a big confusing quickly if your names are all different. Name your classes and IDs properly, according to their semantics. “We want to avoid names that imply presentational aspects. Otherwise, if we name something right-col, it’s entirely possible that the CSS would change and our “right-col” would end up actually being displayed on the left side of our page. That could lead to some confusion in the future, so it’s best that we avoid these types of presentational naming schemes.

Leave a Reply

Your email address will not be published. Required fields are marked *