πŸ”– BEMIT: Taking the BEM Naming Convention a Step Further (archive)

BEM only tells us about how classes relate to each other. They don’t provide an insight into the global non-relative meaning of the class. This is where namespaces based on ITCSS help.

Namespaces like o- for objects and c- for components should be added as a prefix to the normal BEM classes. Now by looking at class names β€” like o-card and c-user__photo β€” we are able to reason about its scope, where else we can use it, and how we can reuse or modify it.

Responsive classes should be added as suffixes with with an @. For example – u-hidden@print or o-layout@md. The @ symbol needs to be escaped in the CSS like so .u-hidden\@print.

ITCSS is a way of planning and structuring CSS for large and long-running project.

Selectors move from generic to specific, this means lower specificity selectors (those that affect a lot of DOM) appear towards the top, and the specificity increases as the project progresses. Ordering things this way takes advantage of the way CSS actually works.

ITCSS defines seven layers:

ITCSS structure

Settings: Global project settings like font sizes and color palettes.

Tools: Globally used mixins and functions.

Generic: Things like CSS resets and box-sizing rules.

Elements: Bare, unclassed HTML elements. Should bind directly to tags (h1 {}).

Objects: Layout systems and containers.

Components: Recognizable pieces of the UI. Should bind to classes only (.post-title {}).

Trumps: Inelegant and heavy-handed helper classes, hacks and overrides.

The CSS files should be broken down and kept as granular as possible. The recommended naming convention is _<layer>.<partial>.scss (for example: _settings.colors.scss, _elements.headings.scss, _components.tabs.scss). These can then be imported in the above order in the final stylesheet.

πŸ”– Manage large CSS projects with ITCSS