O'Reilly logo

Mastering PostCSS for Web Design by Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Introducing the CSStyle library

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required