Answer the question
In order to leave comments, you need to log in
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;
}
.simple-block * {
font: 400 16px "Arial";
}
Answer the question
In order to leave comments, you need to log in
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.
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 questionAsk a Question
731 491 924 answers to any question