BEM Common Styles

Question

What is the best way of defining general non-block-specific styles throughout the site?

For example:

html

<div class="intro">
    <p class="intro__text">foo</p>
</div>

<div class="profile">
    <p class="profile__text">bar</p>
</div>

sass/css

.intro__text {

}
.profile__text {

}
.text {
    margin-bottom: 0.5em;
}

If I wanted the text to be styled the same, would I (given I am using a pre-processor) @extend .text into the .intro__text and .profile__text classes, or just have all paragraphs throughout the site have a class of text?

Both those solutions seem slightly incorrect to me.

If I have a very common style, it feels like I'm going to be duplicating a lot of styles throughout my rendered css (bumping up the filesize) but having a class of text repeated all throughout my markup seems unnecessarily verbose and untidy.

Is there a best practice for this situation?

When I started using BEM I struggled with this too, then someone told me BEM isn't about writing less CSS, instead it's about writing modular css. Each block was it's own island. So nothing depended on each other. What if later you wanted to change a shared property in intro but not profile, that would need refactoring. Instead for common values (font-size, color etc) put them in variables but declare each property in each block element. Not an answer as this is only what I was told while learning. — samuelmr, Nov 18 '15 at 20:56
Have no time to expand my answer. Shortly: 1. Preprocessor (Sass/LESS/etc) mixins; 2. Element of outer block mix (BEM/runtime mixin): class="intro__text grid__text"; 3. Other block mix: class="intro__text paragraph". NB: Also you can extend BEM mixes with modifiers even in runtime. — Alex Yaroshevich, Nov 19 '15 at 07:53

score 1 · Accepted Answer · answered Nov 18 '15 at 21:21

I can't say that there is the best way to do it. It depends on the structure of your project and what style your prefer. Both approaches are used in mostly code.

If you like to manage styles through css files - write @extend. However in case you want an element without common style you have to create a modifier for the el. For example - .profile__text--reset.

If you want declare common styles, your class list with common classes may become too long. But it is more clear and specific. And you have a possibility to manage it via javascript.

One improvement for this code is that it is better to use helpers with modifiers. For example, instead of simple .text use .text--sm or .text--m-sm. Or if you want only margin - .m-sm. But it is up to you.

score 0 · Answer 2 · answered Nov 19 '15 at 08:14

You have several options:

Preprocessor (Sass/LESS/etc) mixins + clean-css/postcss cleaner — this way is simple and powerful, but not flexible, since it's not useful for dynamic landing pages, SPA, etc.;
Element of outer block mix (BEM/runtime mixin): class="intro__text grid__text" — in that way you just splitting manually visual and positioning styles and use their classes together;
Other block mix: class="intro__text paragraph paragraph--valuable" — almost like the previous variant but without linking to the abstract grid block, the best and the most flexible way (IMHO).

NB: Also you can extend BEM mixes with modifiers even in runtime, it's VERY powerful tool.

NB2: If you don't need dynamic web pages, you can freely use sass mixins. Personally I don't use sass/less mixins, only global variables for colors, grid, gaps, etc used in my own classes.

BEM Common Styles

2 Answers2