How To Get Started With PostCSS-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 is to get your build tool to make life a little easier for you.  If you are new to build tools, then Post CSS is an NPM package, that allows you to  perform post CSS coming actions.   You can configure Post CSS in a number of ways.  You can add on auto-prefixing you can add in polyfills.  You can also use helpers to make writing BEM easier.

In this tutorial, you will find a quick start guide to help you get up and running with Postcss with BEM.

Install It

To install POSTCSS BEM you will need to run this command:

npm install postcss-bem postcss-nested --save-dev

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. When you're coding away, you'll need a processor, otherwise, nothing will work.

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.  In webpack for example, within my postcss.config.js :

module.exports =
    return {
        plugins: [
            require('postcss-bem')({
               style: 'bem'
            });
        ]
    };
};

How To Write Your Code

Next, the fun part... how to actually use the plug-in within your code, to make life easy.

Component

To create a component you use the @component directive, like so:

@component CallToAction {
     padding: 0;
}

After compiling you should now get this CSS for SUIT and BEM:

.CallToAction {
      padding: 0;
}

Descendents

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

@component CallToAction {
     @descendent heading {}
}

After compiling you should now get this CSS:

SUIT mode:

.CallToAction {
}

.CallToAction-heading {
      padding: 0;
}

BEM mode:

.CallToAction {
}

.CallToAction__heading {
      padding: 0;
}

Modifiers

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

@component CallToAction {

    @modifier simple {}
  
    @descendent heading {}
}

After compiling, you should now get this CSS:

SUIT mode:

.CallToAction {
}

.CallToAction--simple {
      padding: 0;
}
.CallToAction-heading {
}

BEM mode:

.CallToAction {
}

.CallToAction_simple {
      padding: 0;
}

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.

@component CallToAction {
    @descendent button {
    	@when error {
         color: red;
      }
    }
}

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

.CallToAction {
}

.CallToAction-button {
}

.CallToAction-button.error {
    color: red;
}

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:

@component-namespace MyProject {
    @component CallToAction {}
}

After compiling, you should now get this CSS:

SUIT mode:

.MyProject-CallToAction {
}

BEM mode:

.MyProject--CallToAction {
}

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.

@utility clearFix {
  overflow: auto;
}

After compiling, you should now get this CSS:

.u-clearFix {
   overflow: auto;
}

 

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top