G
G
Goshanbo2020-01-30 18:06:58
Sass
Goshanbo, 2020-01-30 18:06:58

BEM how to avoid duplicate styles?

I'm trying to make a simple BAM project using Pug + SCSS(SASS), but I have a question about duplicating styles.
Suppose we have a parent block parenBlock01 , it includes blocks block01, block02, block03
Blocks are connected to pug using mixins
in SCSS, they are connected using the @import directive
i.e. parenBlock01.scss looks like this

.parentBlock01 {}
@import '../block01/block01';
@import '../block02/block02';
@import '../block03/block03';


We also have parentBlock02 which includes only the block02
block By analogy parentBlock01.scss

.parentBlock02 {}
@import '../block02/block02';


So if I place parenBlock01 and parenBlock02 on the page, they both load the block02 styles which are written to the common css file after the scss is converted to css. This is clearly visible in the developer's browser panel.

How to avoid duplicating styles when using BEM?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question