Repetition in BEM

Hello,

I've adopted the directory organization where each block and element have their own directories. The problem with this apprach is that when I have a style like this:

.tile__icon-wrapper,
.tile__textual-part {
    display: table-cell;
    vertical-align: middle;
}

I do not have a choice but to repeat the same style definition in both tile__icon-wrapper.sass and tile__textual-part.sass.

Is there a sensible way to get rid of this redundant repetition and still adhere to BEM's principles?

9 years ago

qfox

The best way to use post-processors like csso~~, autoprefixer~~ or postcss with optimizing plugins. In that way you don't need to collapse styles manually and don't need to think about your mixes in code base.

Hope this helps.

9 years ago

tadatuta

Apart from the fact that CSS optimizers will do the trick as @zxqfox said, there are some other options:

Own directory for each element is reasonable if the elements are optional — there should be a way not to include some of them into a bundle. But if icon-wrapper and textual-part are always there, you may keep their styles together in tile.sass (see https://en.bem.info/method/filesystem/#optional-elements-and-modifiers-are-stored-in-separate-files).
Another option is to move common styling into a mix like this:

<div class="tile">
    <div class="tile__icon-wrapper tile__cell"></div>
    <div class="tile__textual-part tile__cell"></div>
</div>

Now you may keep common styles in tile__cell.sass.

9 years ago

ltarasiewicz

@zxqfox, thanks for pointing my to postcss - I had a read on it and can see already that it will be a next big thing! Howver, it does not solve the problem really since I write sass, and collapses are still dificult to reflect in my dir structure.

@tadatuta, I like the idea of having a mix to hold common styles - it sure solves the problem.

9 years ago

qfox

@ltarasiewicz I don't see any troubles with connecting your resulting files (from sass) to postcss before releasing. Like gulp.src('your-files.sass').pipe(compileSass()).pipe(postcss())... ;-)

But agree that solution with mixes is better for this concrete case.

In order to leave a comment you need to login.