Базовый гид по специфике CSS

Специфика CSS — определяет, какие стили применяются к элементам. То есть, чем конкретнее селектор CSS, тем больше веса он имеет при определении стиля элемента.

Возьмем следующий HTML и CSS в качестве примера:

<article id="css-rocks">
  ...
</article>
<style>
  #css-rocks {
    background-color: white;
  }
  article {
    background-color: black;
  }
</style>

Какой в итоге цвет будет у элемента article? — Белый, так как CSS-селектор белого цвета фона более специфичен.

Чтобы убедится в этом, откроем консоль разработчика в браузере. Он покажет нам все стили, примененные к элементу в порядке специфичности.

В Chrome на вкладке «Элементы» в блоке Стили видно как упорядочиваются стили элемента в зависимости от их специфики и выделяет стили, которые перезаписываются более конкретными селекторами.

Существует пять основных уровней, которые определяют специфику стиля, и все это связано с синтаксисом, используемым в селекторе. Перечислим их в порядке от наименее специфического к наиболее специфичному:

Селекторы элемента

Это стили, использующие только элемент в качестве селектора:

article {
  background-color: black;
}

Селекторы классов

Стили, которые используют класс в селекторе:

.css-class {
  background-color: black;
}

Селекторы ID

Стили, которые используют идентификатор в селекторе:

#css-id {
  background-color: black;
}

Три уровня, описанные выше, являются наиболее распространёнными. Но есть еще два уровня, которые углубляются в тёмную сторону CSS …

Встроенные селекторы

Это стили непосредственно в HTML, применяемые в качестве атрибута:

<article style="background-color: black;"> ... </article>

!important селекторы

Если индивидуальный стиль объявлен как !inportant, то он переопределит все остальное:

article {
  background-color: black !important;
}

С этой базой есть еще одна концепция: селекторы могут использовать комбинацию атрибутов, поэтому CSS использует систему весов для вычисления окончательной специфичности. Давайте использовать еще один пример:

<article id="css-rocks">
  <section class="css-history">
    ...
  </section>
</article>
<style>
  #css-rocks section {
    background-color: black;
  }
  article#css-rocks section.css-history {
    background-color: white;
  }
</style>

Есть два селектора CSS с двумя разными весами. Давайте рассмотрим, как рассчитать вес CSS:

  1. Поскольку пять различных факторов влияют на специфичность CSS, мы используем пять чисел, для отслеживания, сколько раз мы видим тип селектора. Мы начинаем вес с нулевой специфичностью, которая представлена как (0, 0, 0, 0, 0). Каждая цифра представляет (# of !important, # of inline styles, # of IDs, # of classes, # of elements).
  2. Использование селектора #css-rocks section в качестве нашего первого примера подсчитайте каждый тип селектора и добавьте его к весам. Первое, что мы видим, это #css-rocks селектор идентификаторов. Наш вес сейчас (0, 0, 1, 0, 0). Далее мы видим селектор элемента, наш вес теперь (0, 0, 1, 0, 1). Это был последний элемент в селекторе, поэтому у нас есть окончательный вес. Стиль background-color: black; имеет вес (0, 0, 1, 0, 1)

Давайте сделаем это еще раз с другим селектором. Мы начнем с (0, 0, 0, 0, 0) и рассмотрим селектор article#css-rocks section.css-history. Рассматривая каждый атрибут слева на право:

Selector      | Type        | Resulting CSS Selector Weight
article | Element | (0, 0, 0, 0, 1)
#css-rocks | Id | (0, 0, 1, 0, 1)
section | Element | (0, 0, 1, 0, 2)
.css-history | Class | (0, 0, 1, 1, 2)

Теперь у нас есть два веса для стиля background-color, который мы можем представить так:

(0, 0, 1, 0, 1) background-color: black;
(0, 0, 1, 1, 2) background-color: white;

Оба селектора имеют 1 в слоте ID. Вес CSS падает в слот класса, чтобы определить победителя. Поскольку второй селектор использует класс, а первый — нет, второй селектор более специфичен и поэтому «выигрывает».

Это основная идея специфичности CSS, но есть еще несколько моментов:

Все, что объявлено позже, побеждает. Например:

article {
  background-color: black;
}
article {
  background-color: white;
}

Оба стиля имеют специфику (0, 0, 0, 0, 1), но background-color: white; позже в таблице стилей, так что побеждает.

Атрибут !Important применяется только в том месте, где он объявлен.

article .css-history {
  background-color: black !important;  /* (1, 0, 0, 1, 1) */
  color: white;                        /* (0, 0, 0, 1, 1) */
}

Специфика — это свойство каждого стиля CSS, а не селектор. Просто случается так, что когда !important не используется, стили в селекторе будут иметь одинаковый вес.

Переопределение селектора

Это уникально для каждой ситуации, но можно последовать этому списку:

  1. Можно ли сделать стиль, который нужно переопределить, менее специфичным? Можно добавить дополнительный класс.
  2. Должен ли стиль, который вы пытаетесь изменить, быть прописанным в оригинальном селекторе? Можно установить стиль для базового компонента, который там не принадлежит.

Перевод статьи: «The Basic Guide to CSS Specificity».

Понравилось? Поделись этим с другими!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.