Shyamala’s Blog

Cascading Style sheets is very important for creating the presentation for User Interface of any website or application. There are couple of CSS coding standards, which we should be follow. Some of them are listed below

Rule #1: Separate content from design
The main idea to seperate content from design is to have a clean & clear and easy to understand and manageable code. This means always keep your markup (HTML) and presentation (CSS) in seperate files.

Rule #2: Avoid Inline styles as Inline styles don’t separate content from design

Rule #3: Use CSS Shorthand Properties as much as possible
Rather than declaring all CSS properties and increasing the size of CSS file, it’s good practice to use shorthand properties to group properties of a common set eg (font, padding, margin)

Like instead of writing
margin-left:5px;
margin-top:3px;
margin-right:4px;
margin-bottom:5px;

We can write
margin:3px 4px 5px 5px;

Rule #4: Always specify units for the Property values unless it is 0.

Eg: padding: 10px 5px 5px 0;

Rule #5: Don’t re-declare inherited value

div {
font-size:12px;
color:#ef321d;
}

div.hello {
font-size:12px;
color:#ef23ef;
}
can be written as
div {
font-size:12px;
color:#ef321d;
}

div.hello {
color:#ef23ef;
}

Rule #6:  Define generic font families
Rather than giving serif, san serif, or single font-family like arial, best practice is to have generic font-family. The idea is, that if a user does’nt have any of the font-family specified, it can look into alternate font provided.

Eg: font-family: Arial, Verdana, Helvetica, sans-serif;

Rule #7: When possible, use em instead of pix for sizing fonts, line heights, etc.

This allows your visitors to use the built-in browser text sizing, without you coding a special text size feature (which will probably limit the user to the choices you decide anyway).

Rule #8 Always end declaration with a semicolon

Rule #9 Use condtional comments for IE
Eg:

<!–[if IE]> <link rel=”stylesheet” type=”text/css” href=”ie.css” /> <![endif]–>

Rule #10: Make your code easy to read
good practice to declare you properties as follows

.mainContainer
{
width:800px;
height:900px;
border:1px solid #333;
margin-left: auto;
margin-right: auto;
}

Rule #11: Always specify height and width for all containers for fast loading

Rule #12: Always validate your CSS against W3C specifications

Rule #13: Avoid using Tables
Tables make the page heavy and takes time to load. Better appraoch is to use Div based layout which is light weight.

Rule #14: Always Comment and Document your CSS code
This helps a lot both to current and new developers to understand, what the bit of code is doing and can also help them to modify and manage in later point of time

“/***************************/
/* Primary Navigation – Top Links */
/****************************/

#nav {
border:1px solid #eee;
margin:10px auto;
padding:5px;
}

/***************/
/* Search Box */
/**************/

#search-box {
position:absolute;
top:30px;
left:30px;
}

Rule #15: Indent as necessary
This make the code clean and easy to understand.

Rule #16: Use a common naming system

Rule #17: Use Group selectors to select multiple elements at once

Rule #18: Shorten hexadecimal colour notation
#ffffff can be written as #fff
Similarly #ff3366 can be written as #f36

Rule #19:  Make use of different media types
We have different media types in CSS namely, all, screen, print etc. Good practice is to use media type to define your CSS type, this helps in styling based one media. Eg print media is useful when we want to create a printable version of a page

<link href=”myStyle.css” type=”text/css” rel=”stylesheet” media=”screen” />
 <link href=”print.css” type=”text/css” rel=”stylesheet” media=”print” />

Rule #20: It is better to use <link rel=”stylesheet” type=”text/css” … > because using @import can delay the rendering of your page.

Rule #21: Avoid the following .

o In-line CSS
o Absolute font sizes
o Single quotation marks around paths for images
o !important and position: absolute
o Name classes/IDs based on appearance