In this tutorial, you will find a quick start guide to help you get up and running with Postcss with BEM. When it comes to writing CSS, I think it's a pretty safe statement to say that writing componentized CSS is a big improvement over having one giant monolithic CSS file. One way to write componentized CSS is to use BEM. Writing BEM classes can become a bit tedious when it comes to updating and changing names, as you end up having to change multiple things.

One way to make life a little easier when writing CSS is to make use of our build tools. PostCSS is an NPM package, that allows you to perform global CSS processing after a site has been compiled. You can configure Post CSS in a number of ways, like adding auto-prefixing. You can also use PostCSS to make writing BEM easier.

How To Install It

To install the PostCSS BEM package, you will need to run this command:

As PostCSS is something that is run as part of a build process, you will need to build your site with something like web pack, gulp, etc. You will not be able to use PostCSS, or, Postcss-bem on its own. More information on how to do that can be found here

BEM or SUIT?

By default, PostCSS BEM will default to a SUIT notation. In order to use PostCSS BEM with actual BEM notation, you will need to configure it. Assuming you are using webpack within Postcss.config.js add this config:

How To Write Your Code

Next, the fun part... how to actually use the plug-in within your code, to make life easy. Assuming you had a React component you had built called CallToAction you could create a new style sheet. To start writing CSS using the plug-in you will need to wrap your styles within a component modified, using the @component directive, like so:

Components, allows you to set a custom name for a component this is a unique name that will prevent namespace clashes. You are then free to add any CSS you want inside of it, e.g.:

Original BEM methodology refers to "blocks", "elements", and "modifiers". SUIT refers to "components", "descendants", and "modifiers". This means that even though you are using BEM the packages naming conventions follow SUIT notation. Let us cover how you would create CSS using some of these styles. A descendent is a class that is attached to a descendent node of a component. To create a descendant, you use the @descendent directive within your component section, like so:

Depending on how you have configured PostCSS you will either see this output for SUIT:

Or this output in BEM mode:

Modifiers

To create a modifier, you use the @modifier directive within your component section, like so:

After compiling, you should now get this CSS if the plug-in is set in SUIT mode:

Or this output for BEM mode:

States

To create a state, you use the @when directive within your component section. States are only supported when you use SUIT notation, so those of you in BEM mode ignore.

After compiling, you should now get this CSS in SUIT mode:

Namespaces

To create a namespace, you use the @component-namespace directive. Any components, descendants, modifier etc will be pre-appended with the namespace, like so:

After compiling, you should now get this CSS in SUIT mode:

The equivant BEM mode output is shown below:

Utilities

To create a namespace, you use the @utility directive. Utilities are defined by Postcss-nested plugin. States are only supported when you use SUIT notation, so those of you in BEM mode ignore.

After compiling, you should now get this CSS:

Using PostCSS will make your life easier. When it comes to writing more modular CSS I recommend using SUIT or BEM as the end CSS will be easier to read and manage. My personal preference is BEM, however, do what makes you happy. Happy Coding 🤘