CSS Best Practices
The CGU Core CSS structure is component-based. Extensibility is king and the library was built with that in mind. Always attempt to write view or page agnostic code when possible. In cases where this isn’t possible or doesn’t make sense, create a “Views” directory in your css to house CSS for specific views/pages.
BEM
BEM-like naming conventions are employed as well in order to ensure code maintainability. BEM is an acronym for Block-Element-Modifier, which specifies the hierarchy for naming elements in the code. Top level components are considered “blocks“, their children are “elements“, and variations are called “modifiers“.
Here’s a rudimentary example using an unordered list.
<ul class="list"> <!-- "list" is the block. --> <li class="list__item">Menu Item 1</li> <!-- "list__item" is the element. Note the "__" separator to denote "item" as a child of "list". --> <li class="list__item list__item--active">Menu Item 2</li> <!-- "list__item--active" is a modifier. Modifiers are appended with "--". --> <li class="list__item">Menu Item 3</li> </ul>
For more information on BEM, see http://getbem.com/.