Answer the question
In order to leave comments, you need to log in
BEM: a little styling without a modifier?
Is it possible, for example, to design links for navigation without modifiers, otherwise you have to write a lot of classes and this is annoying.
Here for example:
<nav class="navigation entry__navigation">
<ul class="navigation__menu">
<li class="navigation__menu-item">
<a href="#" class="navigation__menu-item-link">Меню 1</a>
</li>
<li class="navigation__menu-item">
<a href="#" class="navigation__menu-item-link">Меню 2</a>
</li>
<li class="navigation__menu-item">
<a href="#" class="navigation__menu-item-link">Меню 3</a>
</li>
</ul>
</nav>
.navigation {
height: 70px;
line-height: 70px;
&__menu {
float: right;
&-item {
float: left;
margin-right: 20px;
&:last-child {
margin-right: 0;
}
&-link {
color: #fff;
display: block;
font-size: 14px;
text-decoration: none;
}
}
}
}
Answer the question
In order to leave comments, you need to log in
As far as I know, an element cannot have another element:
navigation_menu is an element, navigation__menu-item is an element inside an element??
navigation_menu-item-link is what???
An element is part of a block, not part of another element.
From BEMA:
Modifier An
entity that defines the appearance, state, or behavior of a block or element.
Features:
The name of the modifier characterizes the appearance (“what size?”, “what theme?”, etc. — “size”: size_s, “theme”: theme_islands), state (“how is it different from others?” — “disabled ”: disabled, “focused”: focused) and behavior (“how does it behave?”, “how does it interact with the user?” - “direction”: directions_left-top).
The modifier name is separated from the block or element name by a single underscore (_).
It's up to you to decide whether you need a modifier or not. As a rule, modifiers are needed to style reusable elements on the page.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question