CSS coding guidelines/conventions

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:


  1. I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information… Regards

Leave a Comment