T
T
thehighhomie2018-02-03 14:56:49
css
thehighhomie, 2018-02-03 14:56:49

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;
      }
    }
  }

}

that is, I will splice the links with color, for example, add shadows, size?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
B
BB 8, 2018-02-03
@thehighhomie

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 question

Ask a Question

731 491 924 answers to any question