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
    Commented 4 июл. 2016 в 16:39
  • Глянул, но там есть моменты, описанные не полностью. Т.е. там может быть элемент с классом sth и внутри него элемент с классом sth__elem и тогда понятно, как писать css-стили. Но там в дереве есть и header с вложенным search и примера css для такого случая нет
    – user64675
    Commented 4 июл. 2016 в 16:48
  • Насчет веса селекторов не понял. Т.е. вообще. Ни саму статью, ни при чем тут она.
    – user64675
    Commented 4 июл. 2016 в 16:52
  • значит еще раз читайте, раз задаете такой вопрос .callus {} #header .callus {} .header-top .callus {} #header .header-top .callus {} и не понимаете разницы!!!
    – SVE
    Commented 4 июл. 2016 в 17:57
  • Во-первых, спокойнее. Во-вторых, статья о том, как разные селекторы влияют на элемент. А вопрос был о вложенности селекторов и какой вариант лучше. Вот БЭМ по теме.
    – user64675
    Commented 4 июл. 2016 в 18:07

1 ответ 1

3

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

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

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

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

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

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

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

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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