frontend-разработчик. Фотографирую в инстаграме, готовлю и пишу тексты. Всё написанное не отражает мнения работодателя. 18+

Специфичность в CSS

Ваш HTML-код состоит из множества «элементов»:

  • Селекторов <header>
  • Классов .header
  • ID #header
  • Атрибутов [attr=value]
  • Псевдоэлементов ::after
  • Псевдоклассов :first-child
  • и многих других... —

каждый из них называется «селектор», и его внешний вид в вашем готовом HTML-файле определяется тем, какие стили будут даны ему в самом HTML-файле (styles у «селектора» или внутри кода <styles> на странице) или в подключенных к нему CSS-файлах.

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

Правило первое

Код ниже имеет больший приоритет при равном «весе» всех элементов страницы

Допустим, что у вас есть такой код на странице


.first {color: red}
.second {color: green}


<p class="first">Первый абзац</p>
<p class="second">Второй абзац</p>
<p class="first second">Третий абзац</p>

Получаем следующий результат:



Первый абзац
Второй абзац
Третий абзац

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

Правило второе

Стиль каждого селектора имеет свой «вес». Чем больше «вес», тем более приоритетен стиль для селектора.

«Вес» селектора традиционно показывается в виде числа 0.0.0.0. Когда мы пишем определённые стилевые правила для наших элементов страницы, мы изменяем это число.


p {color: #5D4037}


<p class="first">Первый абзац</p>
<p class="second">Второй абзац</p>
<p class="first second">Третий абзац</p>

Выглядеть результат будет так:



Первый абзац
Второй абзац
Третий абзац

Все абзацы стали коричневыми потому, что мы изменили число «веса». В случае с «селектором» мы изменили самое правое число. Оно стало 0.0.0.1

Теперь предположим, что мы сохранили классы элементов из прошлого примера. И для большего понимания, я запишу их выше нового обозначения стилей для «селектора».


.first {color: red}
.second {color: green}
p {color: #5D4037}


<p class="first">Первый абзац</p>
<p class="second">Второй абзац</p>
<p class="first second">Третий абзац</p>

Получаем следующий результат:



Первый абзац
Второй абзац
Третий абзац

Добавляя класс, мы меняем второе число справа в порядке 0.0.1.1. Стоит понимать, что 0.0.1.1 > 0.0.0.1, поэтому первый абзац стал красным, второй и третий зелеными (почему это произошло в третьем, посмотри первое правило).

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


a[target="_blank"] {color: black}
.first {color: blue}
.second {color: green}
a {color: red}


<a href="/" class="first">Первый абзац</a>
<a href="/" class="second" target="_blank">Второй абзац</a>
<a href="/" class="first second" target="_blank">Третий абзац</a>

Получаем следующий результат:


Первый абзацВторой абзацТретий абзац


Добавляя стиль атрибута, мы меняем третье число справа в порядке 0.1.1.1. Поэтому вторая и третья ссылка стали черными.

И наконец добавим одному из элементов ID.


#yandex {background: #ffcc00}
a[target="_blank"] {color: black}
.first {color: blue}
.second {color: green}
a {color: red}


<a href="/" class="first">Первый абзац</a>
<a href="/" class="second" target="_blank" id="yandex">Второй абзац</a>
<a href="/" class="first second" target="_blank">Третий абзац</a>


Первый абзацВторой абзацТретий абзац


Добавляя стиль для ID, мы меняем первое число слева в порядке 1.1.1.1. Поэтому вторая ссылка получила нужный цвет.

В каждом проекте стоит придерживаться единого стандарта написания кода, но если вы пишете с нуля, стандарт выбираете вы. Использовать именно классы для отображения стилей — это удобно потому, что вы сможете понять вес конкретного селектора и почему он отображается (не) так, как вы хотели.

Не рекомендуется использовать как самый крупный «вес» для стилей «селектора» (например ID), так и самый мелкий (например P). Одинаковых ID на странице быть не может, поэтому, если вы будете задавать стили именно для него, ваш CSS-файл разрастётся, а если вы решите изменить стиль добавив класс, у вас ничего не получится, «вес» класса меньше «веса» ID. Оставьте ID элементов для вашего JS-файла.

Так же не стоит добавлять стили для «селектора» (например <p>), потому что если у селектора будет хотя бы один класс, будет использоваться именно он. Обратите внимание, именно на «специфичности» созданы такие удобные файлы как: reset.css и normalize.css. Сохраните ссылки, они вам ещё понадобятся. Файлы сделают отображение вашего кода одинаковым во всех браузерах, избавившись от их «фирменных» встроенных стилей.

Правило третье

!important; имеет максимальный приоритет


.third {color: #ffcc00!important}
#yandex {background: #ffcc00}
a[target="_blank"] {color: black}
.first {color: blue}
.second {color: green}
a {color: red}


<a href="/" class="first">Первый абзац</a>
<a href="/" class="second third" target="_blank" id="yandex">Второй абзац</a>
<a href="/" class="first second" target="_blank">Третий абзац</a>


Первый абзацВторой абзацТретий абзац


Как видим, !important; просто переписал правила установленные всем прочим кодом.

Если вы можете не использовать !important;, не используйте его!

Во-первых, такие правки сложно отследить. Если вы полюбите !important;, однажды вы столкнётесь с тем, что в другой части кода есть и другой !important;, который к тому же, имеет больший «вес» или находится ниже. Придётся переписывать код.

Во-вторых, браузеру сложнее обработать !important;: он проходит по коду сверху вниз, определит последовательность и нарисует страницу, потом определит «вес» и снова перерисует, а затем ему надо будет сопоставить все `!important;`, которые вы использовали.

Подсказка

Если !important; использовать не рекомендуется, можно просто добавить вес вашим элементам. Например, вы можете показать, что какой-то элемент для получения нужного стиля должен обязательно находиться внутри другого или один тег «модифицирует» родителя. Это «наследование».


.first .paragraph {color: grey}
.paragraph.paragraph_recolor_blue {color:blue}
.paragraph {color: red}


<div class="first">
    <p class="paragraph">Первый параграф</p>
</div>
<div class="second">
    <p class="paragraph">Второй параграф</p>
    <p class="paragraph paragraph_recolor_blue">Третий параграф</p>
</div>



Первый абзац
Второй абзац
Третий абзац

«Вес» первого параграфа 0.0.2.0, он больше, чем 0.0.1.0, поэтому у него серый цвет.

Теперь вы легко сможете понять почему тот или иной элемент имеет определённый внешний вид.

Литература

Поделиться
Отправить
1 мес   css   код   учебник