S
S
Scryppi2018-04-25 16:06:47
css
Scryppi, 2018-04-25 16:06:47

How to use BEM?

Read about the BEM methodology. And then the elder told me - "you can modify it as it is convenient for you to write code"
And I began to typeset sites as it was convenient for me and really felt that I was typesetting very quickly, conveniently and easily debugging the code, in general, a fairy tale. But the evil programmer says that this is shit code when there are so many classes in the element.

<button class="custom__button black__button login__forgot reg__button right__part mob-full__width">
create an account
</button>

i have helper classes like: right__part mob-full__width.
In general, right__part does the same as bootstrap's pull-right. but in bootstrap it uses !important which I don't need.
And there is custom__button, this is my usual button on the site, instead of button, because I'm afraid when I connect some kind of plugin or css framework, it will also have such selectors, well, everything will collapse, so I always use underscores for my elements and use at least two words in classes. Am I doing the right thing? Will they throw stones at me if I get into a company with a large group of layout designers?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
sim3x, 2018-04-25
@Scryppi

Makeev had a video about such "layouts" https://wsd.events/2014/04/12/pres/bem-ok/
Irrespective bem - no one does
that. Tomorrow you will need to resize that block and put it to the left, and the name is like this and "right__*" will remain.
The class should give a description of the block - not "where?", But "what?"
There are wrappers and containers that can have signs of right, left, bottom, top, but it’s better not to use the position or signs in their name
Yes, yes, right_blue, red-back, absolute-float__

D
Dubrovin, 2018-06-21
@Dubrovin

BEM is not about CSS.
according to BEM, the template of a component (block), for example, in PHP, should be in the same folder as the CSS / JS component. And you could reuse this code in other components, dynamically create and delete these components on the page, and so on. The key idea here is to eliminate code duplication at all levels of the application.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question