Непонятки с БЭМ

314
24 декабря 2016, 15:19

Есть например примитивное меню в котором есть разделители в виде вертикальных полос. Я делаю это с помощью бордера вот так

.navbar
max-width: 725px
float: left
background: transparent
border: none
&__li:not(:last-child)
    border-right: 1px solid white

А вот код меню

        <ul class="nav navbar-nav">
          <li class="navbar__li active"><a class="navbar__link" href="#">О нас</a></li>
          <li class="navbar__li"><a class="navbar__link" href="#">Наши услуги</a></li>
          <li class="navbar__li"><a class="navbar__link" href="#">Отзывы</a></li>
          <li class="navbar__li"><a class="navbar__link" href="#">Акция</a></li>
          <li class="navbar__li"><a class="navbar__link" href="#">Контакты</a></li>
        </ul>

А если я захочу подействовать на допустим на ссылку в последнем элементе li как мне поступить? Это может понадобиться если я этот разделитель буду задавать не в li, а в самой ссылке a. Ну или я например буду писать стиль чего либо.

На пример модального окна

.modal-green
  &__button
    background: green
  &__link
    color: green
Answer 1

Если с бэм, то можно так:

<ul class="nav navbar-nav">
  <li class="navbar__li active"><a class="navbar__link" href="#">О нас</a></li>
  <li class="navbar__li"><a class="navbar__link" href="#">Наши услуги</a></li>
  <li class="navbar__li"><a class="navbar__link" href="#">Отзывы</a></li>
  <li class="navbar__li"><a class="navbar__link" href="#">Акция</a></li>
  <li class="navbar__li navbar__li_last"><a class="navbar__link" href="#">Контакты</a></li>
</ul>

Т.е. добавить последнему элементу модификатор navbar__li_last и его стилизовать.

Либо использовать &__li:last-child:

.navbar
...
&__li
    border-right: 1px solid white
&__li:last-child
    border-right: none

При этом всем лишкам Вы задаете необходимые стили, а последнему элементу уже или отменяете или задаете свои стили, соответственно и для ссылки внутри лишки.

Пример для ссылки:

&__li:last-child
  a
    border: none

или

<li class="navbar__li"><a class="navbar__link navbar__link_last" href="#">Контакты</a></li>
navbar__link_last
  border: none

+ поддержка Вашего :not(), может быть это плохая идея использовать его!

READ ALSO
Литература\справочник по c#+unity

Литература\справочник по c#+unity

Посоветуйте толковую литературку по с# для unityПосле с++ меня пугает обилие "сахара" в шарпе, а особенно в связке c#+unity, ибо там что-то совсем специфичное

465
отладка зависающего приложения VS

отладка зависающего приложения VS

В Unity зависает редакторЕсли сбилдить программу(под вин), то она тоже зависает(no responding)

393
ASP.NET MVC Core: Dependancy Injection не в контроллере

ASP.NET MVC Core: Dependancy Injection не в контроллере

А как я могу передать сервисы из Dependancy Injection которые зарегестрированы в startupcs в приложении ASP

365
Освобождение памяти в Stack&#39;e

Освобождение памяти в Stack'e

Всем известно,что с Stack это некий участок памяти,который аллоцируется на каждый поток в виде размера 1МБ , в нем хранятся ссылки(ObjRef) на ReferenceType,пользовательские...

345