- 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:
Form the backbone of an application and contain all of the cosmetics for a standalone component. Layout module
These modules have no cosmetics and are purely used to position
c-components and structure an application’s layout.
These utility classes have a single function, often using
!importantto boost their specificity. (Commonly used for positioning or visibility.)
Indicate different states that a
c-component can have.
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