Pull to refresh

Простое правило выбора CSS селекторов

Reading time 2 min
Views 22K
Я хотел написать комментарий к статье о том куда отправляются хорошие верстальщики, но мне стало лень. А потом опять стало не лень, но мыслей накопилось уже на целый пост.

Возьмем самый первый попавшийся пример из приведенной статьи. Там в макете, в самом верху, есть полоска на всю ширину окна:

image

Автор принимает решение сверстать эту полоску с помощью тега
, вот так:

<body class="whitesquare">
  <hr/>
  <!-- вся остальная страница -->
</body>


.whitesquare hr {
  /* стили для полоски  */
}


Это просто супер пример несоблюдения моего правила.



Чтобы применять правило, которое я попытаюсь сформулировать чуть позже, нужно научиться вербализировать селекторы. Что говорит селектор ".whitesquare hr"? Если помнить что .whitesquare это , то селектор говорит: "все
на сайте".

Посмотрим еще раз на CSS:

"все <hr> на сайте" {
  /* стили для верхней полоски, и только для нее */
}


Это как-то странно. То ли автор не собирался больше использовать тег
, то ли собирался для новых
сбрасывать эти стили. Я не знаю, но думаю, что в любом случае селектор выбран неправильно.

Возьмем еще один пример, уже не из статьи. Меню.

<nav class="main-menu">
  <ul>
    <li><a>...</a></li>
    <li><a>...</a></li>
    <li><a>...</a></li>
  </ul>
</nav>


Нам нужно задать стили для ссылок. Какой выбрать селектор?

  • a — все ссылки на сайте? Вряд ли ...
  • li a — все ссылки на сайте, которые внутри ? Тоже нет.
    .main-menu li a — ссылка, которая внутри , который внутри .main-menu? Не совсем. В нашем меню все ссылки внутри — это лишнее уточнение.
    .main-menu a — любая ссылка внутри .main-menu? То что нужно.


    Пора сформулировать правило, но у меня получилось не правило, а небольшой алгоритм:

    1. Вербализируйте селектор. Ответьте на вопрос: какие элементы мне нужны? Каким элементам я хочу задать этот стиль? Ответ может быть: все ссылки на сайте; заголовок в блоке статьи; текстовое поле в форме с темой оформления ".dark-form"; эта уникальная кнопка, которая нигде не повторяется и т.д.
    2. Составьте минимально специфичный селектор выбирающий элементы которые вам нужны и только их.


    А теперь всё-таки правило:
    Пишите в селекторе то, что вы действительно имеете в виду.


Tags:
Hubs:
+10
Comments 24
Comments Comments 24

Articles