Декодирование специфичности CSS

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

Компоненты CSS специфичности

Поговорим о ключевых компонентах CSS специфичности.

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

<p style="color: white; font-size: 18px;">This is inline styling!</p>;

Приведённый выше код генерирует абзац с инлайн стилем, установив белый цвет текста и размер шрифта 18 пикселей.

Стилизация по идентификатору подразумевает выделение элемента по его идентификатору. Они более специфичны, чем классы и элементы. Это означает, что стили применяются с приоритетом id над менее специфичными стилями. Каждый целевой HTML элемент имеет уникальный идентификатор, что позволяет селектору id точно нацелиться на нужный элемент.

<div id="header">This is ID styling.</div>;

#header {
  color: white;
  font-size: 18px;
  font-weight: bold;
}

Приведённый выше код создаёт абзац со стилизацией по идентификатору, устанавливая цвет текста на белый, font-weight на полужирный, а font-size на 18 пикселей.

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

В классах используется точка (например, .form).

.form-container {
  background-color: #fff; /* Белый фон для контейнера формы */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

Давайте используем приведённый выше код в реальном проекте.

See the Pen

Приведённый выше код HTML и CSS генерирует центрированную форму с синим фоном. Форма содержит поля ввода для имени и электронной почты, оформленные белым фоном, подложкой и рамкой. Кнопка отправки имеет синий фон с белым текстом. Этот пример показывает, как использовать классы, псевдоклассы и селекторы атрибутов в реальном проекте.

Они нацелены на определённые состояния или положения элементов.

В псевдоклассах используется двоеточие, например, :focus, как показано ниже:

:focus {
  color: yellow;
}

Селекторы атрибутов нацеливают на элементы, основываясь на их атрибутах (например, [type="text"]):

input[type="checkbox"] {
  margin-right: 5px;
}

HTML элементы также можно выбирать по названию их тегов:

 p {
  color: red;
  font-size: 17px;
}

В этом примере для каждого элемента <p> будет использован красный цвет и font-size 17 пикселей.

Псевдоэлементы также используются для стилизации определённых частей элемента.

p::before {
  color: blue;
}

Вычисление специфичности

Для вычисления специфичности:

• Подсчитайте количество селекторов типов элементов div, p или любых имён HTML тегов и селекторов псевдоэлементов (например, ::hover) в CSS правиле.
• Подсчитайте количество селекторов классов (например, .nav-link) и селекторов атрибутов (например, [type="submit"]) в CSS правиле.
• Подсчитайте количество идентификаторов селекторов идентификаторов (например #my-id) в CSS правиле.
• Проверьте, есть ли в правиле встроенные стили, переопределяющие любые внешние правила и обладающие наивысшей специфичностью.

Стили, объявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

Универсальный селектор (*), комбинаторы (+, >, ~, '``') и отрицающий псевдокласс (:not()) не влияют на специфичность. (Однако селекторы, объявленные внутри :not(), влияют)

Следующий шаг — упорядочить значения специфичности в порядке id, класса и типа элемента.

Такое расположение играет важную роль в определении веса каждого селектора при расчёте специфичности. Учитывая это, создайте число из трёх частей, основанное на порядке расположения. Например:

Если у вас есть 1 селектор id, 2 селектора классов и 3 селектора элементов, специфичность можно представить как 1-2-3.

Следующие причины объясняют, почему важна специфичность:

• Знание специфичности предотвращает конфликты между стилями.
• Понимание специфичности селектора позволяет предсказать, какие стили будут иметь приоритет.
• Правильное использование специфичности позволяет разработчикам писать понятный и удобный в обслуживании код.
• Выявить и устранить конфликты становится проще, просмотрев применённые стили.

Реальные примеры CSS специфичности

Рассмотрим несколько примеров, иллюстрирующих применение специфичности.

В этом примере мы создадим меню nav со ссылками, отображающими различные ссылки в зависимости от их текущего состояния.

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

See the Pen

Чтобы продемонстрировать применение специфичности в приведённом выше коде, давайте рассчитаем её.

Как уже говорилось, специфичность рассчитывается как трёхзначное значение, причём крайняя левая цифра представляет собой наивысший уровень специфичности. Исходя из этого, мы рассчитаем специфичность приведённого выше кода как:

Селектор body имеет специфичность 1 как селектор элементов, с разделением на части:

• Селектор id не используется, поэтому он представлен как 0.
• Селектор класса не используется, поэтому он представлен как 0.
• Используется один селектор элементов, поэтому он представлен как 1.
• Таким образом, специфичность представлена как [0, 0, 1].

Селектор .nav-link:

• Селектор id не используется, поэтому он представлен как 0.
• Используется один селектор класса, поэтому он представлен как 1.
• Селектор элементов не используется, поэтому он представлен как 0.
• Таким образом, специфичность представлена как [0, 1, 0].

Селектор #active-link:

• Используется один селектор id, поэтому он представлен как 1.
• Не используется селектор класса, поэтому он представлен как 0.
• Не используется селектор элементов, поэтому он представлен как 0.
• Таким образом, специфичность представлена как [1, 0, 0].

В итоге:

• Селектор body имеет специфичность [0, 0, 1].
• Селектор .nav-link имеет специфичность [0, 1, 0].
• Селектор #active-link имеет специфичность [1, 0, 0].

При сравнении селекторов, чем выше номер в категории специфичности, тем более специфичным является селектор. В приведённом выше примере стили для #active-link будут переопределять стили, установленные .nav-link, из-за более высокой специфичности.

В примере ниже показана стилизация формы с элементами ввода разных типов, такими как текст и кнопки.

See the Pen

Рассчитаем специфичность для приведённого выше кода:

Для input[type="text"]:

• Селектор id здесь не используется, поэтому он представлен как 0.
• Селектор класса не используется, поэтому он представлен как 0.
• Используется один селектор атрибутов, поэтому он представлен как 1 (для селектора атрибутов type="text").
• Используется один селектор элемента, поэтому он представлен как 1 (для селектора элемента input).
• Таким образом, специфичность представлена как [0, 1, 1].

Для input[type="submit"].primary-btn:

• Селектор id здесь не используется, поэтому он представлен как 0.
• Используется один селектор класса, поэтому для селектора класса .primary-btn он представлен как 1.
• Используется один селектор атрибутов, поэтому он представлен как 1 для селектора атрибутов type="submit". Плюс селектор класса, получается 2.
• Используется один селектор элемента, поэтому он представлен как 1 для селектора элемента input.
• Таким образом, специфичность представлена как [0, 2, 1].

В приведённом выше примере стили для input[type="submit"].primary-btn будут переопределять стили, установленные для input[type="text"], из-за его более высокой специфичности.

Текстовые поля ввода стилизованы базовой рамкой, в то время как кнопка отправки с классом primary-btn имеет более специфический стиль, включающий в себя отдельный цвет фона и цвет текста.

Это показывает точный и индивидуальный метод стилизации, основанный на типе и классе элементов формы. Это подчёркивает адаптивность и контроль, обеспечиваемые CSS специфичностью при представлении внешнего вида определённых компонентов.

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

See the Pen

Вычисление специфичности для приведённого выше кода:

Для .third-party-button:

• Селектор идентификатора не используется, поэтому он представлен как 0.
• Используется один селектор класса, поэтому для селектора класса .third-party-button он представлен как 1.
• Не используется селектор атрибутов, поэтому он представлен как 0.
• Используется один селектор элемента, поэтому для селектора элемента button он представлен как 1.
• Таким образом, специфичность представлена как [0, 1, 1].

Для #custom-container .third-party-button:

• Используется один селектор идентификатора id, поэтому он представлен как 1 для селектора идентификатора #custom-container.
• Используется один селектор класса, поэтому для селектора класса .third-party-button он представлен как 1.
• Селектор атрибутов не используется, поэтому он представлен как 0.
• Селектор элемента не используется, поэтому он представлен как 0.
• Таким образом, специфичность представлена как [1, 1, 0].

В итоге значения специфичности выглядят следующим образом:

• Селектор .third-party-button: [0, 1, 1].
• Селектор #custom-container .third-party-button: [1, 1, 0].

Селектор #custom-container .third-party-button обладает большей специфичностью благодаря наличию селектора идентификатора, и он имеет приоритет перед более общим селектором .third-party-button.

Исключение из правил — !important

Лучший подход — не использовать !important. Приведённые выше пояснения по поводу специфичности должны помочь избежать использования флага и вообще убрать его, если он встречается.

Чтобы устранить кажущуюся необходимость в !important, вы можете сделать одно из следующих действий:

• Увеличьте специфичность селектора прежнего объявления !important так, чтобы она была выше, чем у других объявлений.
• Придайте ему ту же специфичность и поместите его после объявления, которое он должен отменить.
• Уменьшите специфичность селектора, который пытаетесь отменить.

Лучшие практики эффективного CSS кода

• Располагайте селекторы таким образом, чтобы сбалансировать их специфичность: Учитывайте естественную иерархию HTML и пишите стили в соответствии с ней.
• Присваивайте уникальные идентификаторы уникальным элементам, таким как контейнеры заголовка и футера.
• Для общей стилизации используйте классы, повышающие гибкость.
• Используйте последовательные соглашения об именовании классов, улучшающие ясность и структуру.
• Используйте простые селекторы для улучшения читабельности.
• Соблюдайте осторожность при использовании объявления !important, чтобы не нарушить естественный поток специфичности.
• Чётко структурируйте таблицу стилей и используйте комментарии для документирования.

Применение этих практик позволит создать хорошо организованную кодовую базу CSS, легко читаемую и масштабируемую.

Заключение

CSS играет важную роль в веб-разработке, преобразуя HTML-документы в визуально привлекательные и функциональные для пользователей веб-сайты. Для фронтенд-разработчика важно иметь базовое представление о CSS правилах, позволяющих улучшить стилистику веб-сайтов.

CSS Специфичность играет важную роль, определяя приоритет стилей, применяемых к веб-странице, на основе иерархии селекторов.

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