BEM: no stylization without the modifier?

Is it possible for example to navigate to the references without modifiers, otherwise a lot of classes and have to write about it.
Here for example:
<nav class="navigation entry__navigation">
 <ul class="navigation__menu">
 <li class="navigation__menu-item">
 <a href="#" class="navigation__menu-item-link">Menu 1</a>
</li>
 <li class="navigation__menu-item">
 <a href="#" class="navigation__menu-item-link">Menu 2</a>
</li>
 <li class="navigation__menu-item">
 <a href="#" class="navigation__menu-item-link">Menu 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;
}
}
}

}


that is spliced to make the link color for example, to add shadows, size?
June 8th 19 at 16:29
3 answers
June 8th 19 at 16:31
Solution
that is, to alter the structure this way?:
<nav class="navigation entry__navigation">
 <ul class="navigation__menu">
 <li class="navigation__item">
 <a href="#" class="navigation__link">Menu 1</a>
</li>
 <li class="navigation__tem">
 <a href="#" class="navigation__link">Menu 2</a>
</li>
 <li class="navigation__item">
 <a href="#" class="navigation__link">Menu 3</a>
</li>
</ul>
 </nav>


and the modifier really need?
June 8th 19 at 16:33
Solution
As far as I know, the element may be another element:

navigation__menu - item navigation__menu-item element inside an element??
navigation__menu-item-link - what's that ???

The element is part of the unit, but not part of another element.
From BAM:

Modifier

Entity that defines the appearance, condition or behaviour of the unit or element.

Features:

Modifier name describes the appearance ("what size?", "what?", etc. — size: size_s, "subject": theme_islands), condition ("different from others?" — "disabled": disabled, "focused": focused) and behaviours ("how's yourself?" "how to communicate with the user?" — "direction": directions_left-top).

The name of the modifier is separated from the name of a block or element with a single underscore (_).

Here You have to decide whether You need the modifier or not. Typically, the modifiers need to style re-used on page elements.
you made a mistake. find here the string `search-form__input` or `search-form__content-input` - jaquelin_Litt commented on June 8th 19 at 16:36
And what is my mistake ?

search-form__input - serch-form - block, s-f__input - element. s-f_content-input - feel the difference ?

Now look here:

<nav class="navigation entry__navigation">
 <ul class="navigation__menu">
 <li class="navigation__menu-item">
 <a href="#" class="navigation__menu-item-link">Menu 1</a>
</li>
 <li class="navigation__menu-item">
 <a href="#" class="navigation__menu-item-link">Menu 2</a>
</li>
 <li class="navigation__menu-item">
 <a href="#" class="navigation__menu-item-link">Menu 3</a>
</li>
</ul>
 </nav>


Or is there no difference ?

And there in black and white:

Nesting

Elements can be nested in each other.

Any valid nesting of elements.

Element is always part of the unit and not another element. This means that in the name of the elements can not prescribe a hierarchy of block__elem1__elem2. - Lavonne25 commented on June 8th 19 at 16:39
, 'menu-item-link' the name of the element that comes after the _ _ is the correct code from the point of view BEM - jaquelin_Litt commented on June 8th 19 at 16:42
,

Thanks, I will consider. But the readability in this example it turns out so-so. - Lavonne25 commented on June 8th 19 at 16:45
Yes, I already knew tupanul something. - jaquelin_Litt commented on June 8th 19 at 16:48
June 8th 19 at 16:35
Solution
- Make a block .link (basic styling of links), mix when you need to.
- Cut classes without compromising human readability, for example:
<nav class="nav entry__nav">
 <ul class="nav__items">
 <li class="nav__item">
 <a href="#" class="link nav__link">Menu 1</a>
</li>
 <li class="nav__item">
 <a href="#" class="link nav__link">Menu 2</a>
</li>
 <li class="nav__item">
 <a href="#" class="link nav__link">Menu 3</a>
</li>
</ul>
</nav>

- Use tools that speed up the writing of the BEM code to make it less pain.

In General, do whatever, BAM, nothing prohibits the methodology brings order to the code gives recommendations for the structure and support, the most important rule BAM - to think a head.
thank you. but I'm a little not understand this structure:
<nav class="nav entry__nav">
 <ul class="nav__items">
 <li class="nav__item">
 <a href="#" class="link nav__link">Menu 1</a>
</li>
 <li class="nav__item">
 <a href="#" class="link nav__link">Menu 2</a>
</li>
 <li class="nav__item">
 <a href="#" class="link nav__link">Menu 3</a>
</li>
</ul>
</nav>


you can style links, or add the mixes? - jaquelin_Litt commented on June 8th 19 at 16:38
depends on the situation, and describe it. - Lavonne25 commented on June 8th 19 at 16:41
well I wrote to put the color, size, shadow - jaquelin_Litt commented on June 8th 19 at 16:44
, hover, for example a - Lavonne25 commented on June 8th 19 at 16:47
options:

1. Modifier for link (.link--{mod}) when a reference is slightly different from the usual, and also the similar style somewhere else can be found on the website

2. Mix block (.link) and element (.nav__link) if the link is slightly different from the usual and these differences are only in that block (.nav)

3. Just the element (.nav__link) if link is in a block (.nav) not like normal at all and is found only in this unit (.nav)

4. To create a new block, if a link is not like the usual do, and found somewhere on the website yet - jaquelin_Litt commented on June 8th 19 at 16:50

Find more questions by tags CSSBEM