Задать вопрос
thehighhomie
@thehighhomie
css

БЭМ: небольшая стилизация без модификатора?

Можно ли к примеру для навигации оформлять ссылки без модификаторов, иначе очень много классов писать приходится и это напрягает.
Вот к примеру:
<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;
      }
    }
  }

}


то есть сращу оформлять ссылки цветом к примеру, добавить теней, размер?
  • Вопрос задан
  • 281 просмотр
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 2
fruity4pie
@fruity4pie
A
Насколько мне известно, то у элемента не может быть другой элемент:

navigation__menu - элемент, navigation__menu-item - элемент внутри элемента??
navigation__menu-item-link - это что ???

Элемент - это часть блока, но никак не часть другого элемента.
Из БЭМА:

Модификатор

Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Особенности:

Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: size_s, «тема»: theme_islands), состояние («чем отличается от прочих?» — «отключен»: disabled, «фокусированный»: focused) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: directions_left-top).

Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).

Тут уже Вам решать, нужен ли Вам модификатор или нет. Как правило, модификаторы нужны для стилизации повторно-использующихся на странице элементов.
Ответ написан
5 комментариев
5 комментариев
werty1001
@werty1001
undefined
- Сделайте блок .link (базовое оформление ссылок), миксуйте когда нужно.
- Сократите классы без ущерба для читаемости, например:
<nav class="nav entry__nav">
  <ul class="nav__items">
    <li class="nav__item">
      <a href="#" class="link nav__link">Меню 1</a>
    </li>
    <li class="nav__item">
      <a href="#" class="link nav__link">Меню 2</a>
    </li>
    <li class="nav__item">
      <a href="#" class="link nav__link">Меню 3</a>
    </li>
  </ul>
</nav>

- Пользуйтесь инструментами, которые ускоряют написание БЭМ кода, чтобы было меньше боли.

В целом делайте так как удобно, БЭМ ничего не запрещает, методология вносит порядок в код, дает рекомендации по структуре и поддержке, самое главное правило БЭМа - думать головой.
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Frontend React
Glob-com
от 100 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
В wordpress подключить модуль по рассрочке (документацию дам)
24 апр. 2024, в 11:56
4500 руб./за проект
Лечение и перенос сайта на новый сервер
24 апр. 2024, в 11:55
7000 руб./за проект
Необходимо принять 3 звонка и получить консультацию по Жилому комплекс
24 апр. 2024, в 11:47
450 руб./за проект
Ещё заказы