Best practice to apply a modifier style to a block or an element

Question

I have a question of what is the best way to apply a style to a block or an element with the ABEM approach to CSS formatting and class naming.

I'm working on a site with WordPress and I have opted to use SCSS and use the ABEM (atomic) approach to BEM (Block, element and modifier) formatting and class naming technique. I know that I shouldn't add a modifier directly to an element so not like this: <div class="-padding">To achieve some padding </div>. Instead do this <div class="a-col -padding">Better way to achieve some padding</div>. Here is my problem:

Should I add the -padding to the a-col (like above) to achieve the padding, or should the a-col block have the padding applied to it directly in its CSS?

Answer 1

For me, there is no reason to use the modifier in your case, so it's a go for declaring the padding directly on a-col.

The block in BEM are here to make a part of your CSS reusable, regardless of the usage context. But, sometimes, you will have to handle particular cases. For example, in a specific case a block should be darker or smaller. That why we have the modifiers.

In your case:

• You just want to reuse a padding?
  => You should create a block
• It's a column and you already have a block for it, but this one should have a padding?
  => You should create a modifier