Repetition in BEM

[ltarasiewicz]

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?

[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.

[tadatuta]

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

1. 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).
2. 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.

[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.

[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.