CSS Best Practices
2011
- Follow OOCSS (Object Oriented CSS), and DRY (Don’t Repeat Yourself) principles
- Classes should not be named with the actual style it aims to display. That defeats the purpose of using separating HTML for content and CSS for look and feel. You will have tied the HTML to a specific look & feel.
- Eg. class = ‘Blue-button’, or class = ‘width100’ are bad.
- It should be something like class = ‘button’, or class = ‘primary-button’, and the colors and widths are put into the CSS.
- The class should be used to specify the type of element it is.
- Eg. Class = ‘search-result-row’ - all search result rows in the entire site has this class.
- Objects or Identifiable Elements should be identified with an ID, which differentiates them from the elements with the same class.
- Eg. ID = hotel-results or ID = flight-schedule-results, is the container that differentiates the different elements of class search-result-row