Спецификация таблиц стилей CSS

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

Кроме floats и positions, специфика может стать одной из самых трудных вещей к которой нужно привыкнуть, не говоря уже о доскональном ее изучении. Селекторы, которые вы используете в CSS имеют разный вес и контролируются спецификой. Вот почему иногда, когда вы применяете правило к элементу, оно не отображается в вашем дизайне. Поэтому если вы часто пользуетесь известным хаком !important  – эта статья для вас!

Как браузер читает CSS

Разберемся в азах чтения CSS различными браузерами. Во-первых, браузер читает стили сверху вниз:

Правило, которое вы указали в строке 10 будет переопределено(overridden) и ссылка станет синего цвета, потому что браузер будет использовать то правило, которое находится ниже в таблице стилей и имеет больший приоритет.

Это также работает с фактическим порядком в котором были импортированы файлы CSS, например:

Так как вы разместили custom.css после style.css все, что вы будете писать в style.css переопределится и заменится на стили custom.css. Этот метод часто используется создателями темплейтов, что дает пользователю возможность добавлять свои собственные стили без изменения основного файла. (Заметим, что custom.css не заменяет style.css полностью, а только те правила которые находятся в обоих таблицах стилей и были переопределены)

Специфика таблиц стилей

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

Есть четыре категории, которые определяют уровень специфики селектора: встроенные стили (это те, которые иногда использует JavaScript), ID, классы и элементы. Как измерить специфику? Специфика измеряется в очках/баллах:

• ID – 100 баллов
• Классы – 10 баллов
• Элементы – 1 балл

Зная об этом, если вы используете селектор следующим образом:

Его общий вес составит 122 балла (100 + 10 + 10 + 1 +1), которым является ID, два класса и два элемента.

Что нужно помнить:

• ID имеют слишком большой вес по сравнению с классами и элементами, поэтому вы должны ограничить использование ID в ваших стилях до минимума.
• В случаях, когда селекторы имеют одинаковый вес, порядок их отображения будет в обратном направлении – снизу вверх.
• Стили встроенные в HTML стилизуются в таблицах стилей, потому что они ближе к элементу.
• Единственный способ чтобы переопределить встроенные стили, это использовать !important заявления.
• Псевдо-классы и атрибуты имеют тот же вес, что и обычные классы.
• Псевдо-элементы имеют такой же вес, как нормальный элемент.
• Универсальный селектор (*) не имеет никакого веса.

Примеры

Этот селектор будет держать вес 3, что означает, что только путем добавления класса в другом месте, вы сможете его заменить.

Вес этого селектора составляет 110 баллов, в основном из-за ID, который добавляет 100 баллов.

Вес этого селектора составляет 12 баллов, так как псевдо-элемент :first-letter и «р» тэг весят по 1му баллу.

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

Всегда имейте в виду, что для переопределения ID селектора, вы должны написать 256 классов для одного элемента, например:

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