V
V
Vasily2019-09-04 12:41:36
BEM
Vasily, 2019-09-04 12:41:36

What is the best way to split Block styling according to BEM?

We are considering a large project.
Here I have a button and I need to give it classes in which I need to pack its styles.
I dug up what needs to be broken down into styles that are responsible for the appearance of the element, positioning and block size. Correct me if I'm wrong.
For example, I have a button and it turns out I have to assign three classes, the first is the appearance, the second is the dimensions (of the block or element), the third is the padding?

<button class="button-form button-form_size-s button-form_layout">Log in</button>

How to choose the right names, for example, for the class that is responsible for positioning?
In my case, there is an indent from the top and the button is located in the center.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Ivan V, 2019-09-04
@verkhoturov

For example, I have a button and it turns out I have to assign three classes, the first is the appearance, the second is the dimensions (of the block or element), the third is the padding?

You misunderstood BEM. It must be different.
Let's say you have a block with a form (for example, with the class "form"), the block has a child element in the form of a button. Then according to BEM, the button will have the class "form__button" (block__element).
Let's say there are several buttons in the form, standard and "large". Then for the "big" button we add the class "form__button--large" (block__element--modifier). And in the selector "form__button--large" we write the necessary properties.
The button itself will already have two classes, like
For example, for large and standard buttons, some will be "green". Then for the "green" buttons we add the class "form__button--green".
In this case, some of the standard buttons will look like this
and the "large" part will look like this
<button class="form__button form__button--large form__button--green"></button>

In the Modifier, you can write any property of the Element (size, color, position, etc.), but only when we need to modify some existing element. Specially splitting properties into different selectors (as in your example) does not make sense, especially if there is only one element.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question