1

Предположим, есть такая разметка:

<header id="header">
  <div class="header-top">
    <div class="callus">+0 000 0000 00</div>
  </div>
</header>

И есть несколько вариантов:

.callus {}

#header .callus {}

.header-top .callus {}

#header .header-top .callus {}

Я обычно на сайтах наблюдаю первый вариант. Но мне кажется это не слишком хорошей идеей по 2 причинам:

  1. Большой шанс конфликта с будущими доработками (другому человеку придется веселиться с вашими стилями, даже если он просто хочет добавить, а не изменить что-то)
  2. При добавлении новости/поста на сайт, визуальный редактор может добавить какое-то свое оформление или теги(с чем я лично много раз сталкивался).

Второй вариант, вроде-бы, конкретизирует: нам нужны элементы в шапке. Но при большом уровне вложенности движок делает большой путь от каждого из элементов с классом callus до самого верха, пока не найдет элемент с id header

Третий вариант - нечто среднее между 1 и 2. Вроде-бы и решает проблему, но шанс ошибки остается.

Четвертый вариант называют переизбыточными селекторами, если не ошибаюсь. И да, это плохо.

Что посоветуете по поводу селекторов? То что названия классов должны максимально отражать суть элемента, это понятно. А что по поводу конкретизации, уменьшению вероятности ошибок и производительности?

Система БЭМ мне нравится, но понятно все-таки далеко не все. Буду благодарен, если кто приведет css-стили для подобной разметки:

<header class="header">
<img class="logo">
<form class="search-form">
    <input type="input">
    <button type="button"></button>
</form>
<ul class="lang-switcher">
    <li class="lang-switcher__item">
        <a class="lang-switcher__link" href="url">en</a>
    </li>
    <li class="lang-switcher__item">
        <a class="lang-switcher__link" href="url">ru</a>
    </li>
</ul>
</header>

Почему, например, logo вместо header__logo?

5
  • 1
    [вес селекторов] habrahabr.ru/post/137588 [бэм] ru.bem.info/methodology
    – SVE
    4 июл 2016 в 16:39
  • Глянул, но там есть моменты, описанные не полностью. Т.е. там может быть элемент с классом sth и внутри него элемент с классом sth__elem и тогда понятно, как писать css-стили. Но там в дереве есть и header с вложенным search и примера css для такого случая нет
    – user64675
    4 июл 2016 в 16:48
  • Насчет веса селекторов не понял. Т.е. вообще. Ни саму статью, ни при чем тут она.
    – user64675
    4 июл 2016 в 16:52
  • значит еще раз читайте, раз задаете такой вопрос .callus {} #header .callus {} .header-top .callus {} #header .header-top .callus {} и не понимаете разницы!!!
    – SVE
    4 июл 2016 в 17:57
  • Во-первых, спокойнее. Во-вторых, статья о том, как разные селекторы влияют на элемент. А вопрос был о вложенности селекторов и какой вариант лучше. Вот БЭМ по теме.
    – user64675
    4 июл 2016 в 18:07

1 ответ 1

3

Не мудрить и делать как проще.

  1. Имя достаточно точно характеризует элемент?

    • Да — перейти к п. 2.
    • Нет — переименовать, затем перейти к п. 2.
  2. Может быть несколько таких элементов?

    • Да — Они все должны выглядеть одинаково?

      • Да — использовать только класс.
      • Нет — использовать вложенность.
    • Нет — использовать только класс.

Второй вариант ... при большом уровне вложенности движок делает большой путь

Это самая распространённая и самая оптимизированная операция. Она почти бесплатна.

1
  • @Arhad, в js тернарный оператор такой же ;)
    – Qwertiy
    4 июл 2016 в 20:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.