V
V
vis0r2014-08-23 16:11:43
css
vis0r, 2014-08-23 16:11:43

A few questions about BEM layout. Do I understand correctly?

I'm trying to understand BEM. At the moment, we are only talking about layout and CSS. I like the paradigm of block independence from each other, the ability to move them within the document without distorting their appearance.
I've read the theory and put it into practice. The first questions appeared:
1. According to the main statement - the independence of blocks and their reuse on the page, I came to the conclusion that the description of a simple block (without other blocks nested inside) should be separated from its positioning, since I can place several identical blocks on the page in different places, with different indents and positioning.
Simple block example:

<div class="simple-block">
<div class="simple-block__item"></div>
</div>

.simple-block {
padding: 10px;
width: 100px;
height: 100px;
background-color: #ccc;
}
.simple-block .simple-block__item {
width: 30px;
height: 15px;
background-color: #fff;
}

Question: how to position the .simple-block block in this case? In other words, where and how indents, positioning, etc. should be written. so as not to tie them to this particular block? Is my statement about the separation of css appearance and block positioning correct?
2. Is the construction below correct (in this case, you are interested in the correctness of using * in styling a specific block)?
.simple-block * {
font: 400 16px "Arial";
}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
E
Evgeny Petrov, 2014-08-23
@Petroveg

1. Each element can have several classes, not just one. Including those common to the whole set.
2. What's the point of learning BEM and writing *? This is a terrible practice and you need to forget about it. Otherwise, inside your block, you rewrite these rules for all elements. This is not just bad, but very bad
3. There are frameworks for BEM, so no sane person would write these crocodiles by hand.

V
Vitaly Kirenkov, 2014-08-23
@DeLaVega

1. Use extra. classes for a block that is different from others.
2. IMHO, using * is bad... As a rule, 1 font is used on the site, maximum 2-3. It is written on the bodysuit and that's it. And additional fonts are usually used for headings. You can hang the font on the headings, or you can take the font to a separate class and put it where you need it.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question