CSS standards to be followed



  • OOCSS approach to CSS should be taken this is essential for RWD….
  • Basic approach is CSS is modular therefore using reusable pattens….
  • While it is still acceptable to use the Bootstrap classes in the HTML when applicable our CSS should not target these classes. All custom overrides should use the BEM (Block, Element, Modifier)  methodology  for required custom override.. To aid the readability of the class names I am taking on the following approach to the naming convention of css classe’s:

  • Component c- c-card
    Form the backbone of an application and contain all of the cosmetics for a standalone component.
    Layout module l- l-grid
    These modules have no cosmetics and are purely used to position c- components and structure an application’s layout.
    Helpers h- h-show
    These utility classes have a single function, often using !important to boost their specificity. (Commonly used for positioning or visibility.)
    States is-
    Indicate different states that a c- component can have.
    JavaScript hooks js- js-tab-switcher These indicate that JavaScript behavior is attached to a component. No styles should be associated with them; they are purely used to enable easier manipulation with script.

     I have borrowed this approach from  https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/

  • Avoid the use of html elements (HTML Elements may change in the markup also are inefficient when used to target e.g “.book a” is bad as CSS queries are parsed by the browser generally from right to left therefore will initially match on all the anchor elements in the page.
  • avoid the use of ID’s  (therefore keeping specificity low and there fore more maintainable).
  • parse your code through the CSSLint checker after you have sucessfully parsed it through the W3C checker


Leave a Comment

Your email address will not be published.