Excellent post by Brad Frost in which he explains how they’ve combined class prefixes with BEM.
In addition to a global namespace, we added prefixes to each class to make it more apparent what job that class is doing. Here’s what class prefixes we landed on:
c-for UI components, such as
l-for layout-related styles, such as
u-for utilities, such as
has-for specific states, such as
.cn-is-disabled. These state-based classes would apply to
.js-modal-trigger. No styles are bound to these classes; they’re reserved for behavior only. For most cases, these
js-classes would toggle state-based classes to an element.
An example selector would be
.cn-c-btn--secondary, in which:
cn-is the global namespace for all styles coming from the design system.
c-is the category of class, which in this case
btnis the block name (“Block” being the “B” in BEM)
--secondaryis a modifier, indicating a stylistic variation of the block (“Modifier” being the “M” in BEM)