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: