Question 1

How do I install BEM Constructor with npm?

Accepted Answer

Run 'npm install sass-bem-constructor --save-dev' and import it into your Sass file using @import 'bem-constructor'. It's also available via Bower and as a Compass extension for different setups.

Question 2

What's the difference between BEM Constructor and writing BEM manually?

Accepted Answer

BEM Constructor enforces immutability and namespacing programmatically, reducing human error and ensuring consistency, while manual BEM relies on developer discipline and can lead to inconsistencies in large codebases.

Question 3

How to customize BEM separators in BEM Constructor?

Accepted Answer

Override the Sass variables $bem-element-separator and $bem-modifier-separator to change the default '__' and '--' to your preferred characters, allowing flexibility in naming conventions.

Question 4

Does BEM Constructor work with CSS modules or modern frameworks?

Accepted Answer

No, it's designed for traditional Sass and BEM methodology, so it may not integrate well with CSS modules, CSS-in-JS, or frameworks that handle scoping and styling differently.

Question 5

BEM Constructor or SUIT CSS: which is better for my project?

Accepted Answer

Choose BEM Constructor if you need programmatic enforcement of immutability and namespacing within BEM; SUIT CSS offers a different naming methodology but lacks the built-in safeguards and Sass integration.

Question 6

How to use the visual debugger in BEM Constructor?

Accepted Answer

Use the @include bem-debug() mixin with target types like 'components' or 'modifiers' to outline them in the browser, and customize styles via the $bem-debug-styles map for clearer UI inspection.

BEM Constructor

What is BEM Constructor?

Overview

Use Cases

Best For

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions