Morshed Alam

While writing CSS code, everyone should be follow a standard or convention. It is not important to remember a convention what should be follow. Important is to follow any style constantly, actually it is a common sense though it is not common sense to everybody. I am just writing it to provide others with one point of view and a starting point of their own style sheet coding standards.

Below are some ideas for writing CSS code:

• Must be placed CSS code in a separate file as much as possible instead of in-line CSS.
• Give the descriptive and meaningful name of CSS files
• Use class instead of ID as CSS identifier. IDs to be used if there is only one instance of that element on a page and classes must be use to style several elements in the same way.
• Write meaningful class name instead of short one and use a dash (-) as a separator of a CSS class name.
• Always use lowercase while writing a CSS class name Otherwise it may occur browser problems.
• Add opening curly bracket on the same line as the selector identifier.
• Should write a common design for Input, Button, form and other html elements for whole application at the top of the stylesheet
• Group the rules for same type of elements and its pseudo-elements together.
• Use spacing while describing attribute of a class to improve readability.
• Can use empty line between different CSS class to improve readability.
• For visual emphasis use space to separate property and value.
• Try to use shorthand property instead of long property because it will increase readability. Use background-color, background-position, background-image, and background-repeat etc. instead of background
• Use em instead of pix for sizing, line heights etc to allow visitors to use the built-in browser text sizing. See the CSS Techniques for Web Content Accessibility Guidelines 1.0 for more details.
• Must be use semicolon at the end of the line/statement.
• Try to avoid presentation specific words as identifier, like black, green etc.

There are lots of benefits to follow a standard some of those are given below:

• It makes your code more predictable and understandable.
• Anyone can change/debug and pick a design easily.
• Reduce time for design/development, update and maintenance
• Increased accessibility
• Adhere to W3C recommendations, improving interoperability and ensuring
  greater longevity etc.

I am just trying to give you some ideas and inspire to adopt a CSS coding standard. Hopefully it will be very helpful to all of you.

Some related posts:

• HTML coding guidelines
• JavaScript coding standards/conventions
• CSS Techniques for Web Content Accessibility Guidelines 1.0
• Liquid design : Importance and Considerations