Cast your mind back to Chapter 3, Nesting Rules, where we explored the concepts behind BEM, or the Block, Element, Modifier way of writing CSS. The key benefit of using this method is to help reduce CSS specificity, or where we might otherwise end up using something such as the following to style a simple button:
#maincontent .button .red.large:hover
Okay, it's a little contrived, but you get the idea: the level of specificity makes it awkward to manage and potentially reuse in future projects.
We took a look at BEM as a possible alternative—it has the benefit of reducing styles down to one or two classes, but can be awkward to remember which conventions to use:
.component {
/* represents a component */
}
.component__element {
/* represents a small part that is used to make a component */
}
'.component--modifier {
/* represents a state modifier for the component */
}Okay, so how can we get around this? Well, here's an option we can consider using: the...