This post serves as a detailed reference and rationale of how to name HTML classes and equivalent CSS selectors using a ECSS methodology.
- ECSS website
- Enduring CSS: writing style sheets for rapidly changing, long-lived projects
- OOCSS/Atomic CSS are Responsive Web Design ‘anti-patterns’
Here is the format for writing ECSS classes/selectors:
To illustrate the separate sections, here is the anatomy of that selector with the sections delineated with square brackets:
/\.(\w*)+\-+(([A-Z][a-z]+)+$)/gcould be used to parse class names and ensure adherence to the required sections of a ECSS style selector.
- namespace : all lowercase/train-case. Usually an abbreviation (required).
- ComponentName : upper camel case/pascal case (required)
- _ComponentSection : upper camel case/pascal case preceded by an underscore (optional)
- -variant-flag : all lowercase/train-case (optional)
Each part of a class name can be logically discerned from another. More information on what these sections are and how they should be employed follows:
The first part of a HTML class/CSS selector is a namespace (all lowercase/train-case). The namespace is used to prevent collisions and provide some soft isolation for easier maintenance. More on that rationale here: http://benfrain.com/enduring-css-writing-style-sheets-rapidly-changing-long-lived-projects/
The principle types of namespaces employed are:
- namespace a component, visual area or feature
- namespace a state
Most namespaces are abbreviations, for example:
.sc-could be ‘Shopping Cart’
.asc-could be for ‘Aside Callout’
.ocn-could be for ‘Off Canvas Navigation’
Component/feature/visual area namespace
Any component should be namespaced for easy maintenance and to provide soft isolation from other components. Anything that is different from something else, regardless of the subtleties should be namespaced into its own component.
A State namespace is used to communicate a change in ‘state’. For example:
Indicates that on, or somewhere below this node, the ‘Mini Cart’ is active.
This would communicate that the Component or one within it is showing some value (that was previously hidden).
The final use of the namespace section is to communicate a hook for dynamic JS. For example:
Note: CSS authors should not remove
js- namespaced Components or classes without checking potential impact on the JS.
The Component Name is main name of ‘the thing’. For example:
Would be an ‘Item’ within the ‘sc’ (shopping cart in this example) namespace. It usually doesn’t exist on its own (unless the component has no individual sections).
If something UpperCamelCase is preceded by an underscore it is a ComponentSection (if not it is a ComponentName).
_Wrapper is indicating that this node is the ‘Wrapper’ section of the ‘Item’ that is part of the ‘sc’ namespace
If something is all lowercase/train-case and not the first part of a class name it is a variant flag.
-warning flag indicates that this
.sc-Item_Wrapper is a warning version (and may subsequently be subtly different.)
The only exception to these rules are ‘Utility’ classes. If a class is lowercase, all by itself, then it is a utility class. These classes are used for one specific job.
This is a utility class for adding 100% width to a node.
Note: the use of utility classes is discouraged as it then ties markup to a visual pattern that may not be suitable at all viewports.
My latest book, 'Enduring CSS' is out nowGet $5 off HERE ↠
Write and maintain large scale modular CSS and embrace modern tooling including PostCSS, Stylelint and Gulp