Если вы планируете использовать CSS на регулярной основе, вам необходимо развить понимание о том, что такое спецификация и как она применяется.
Кроме floats и positions, специфика может стать одной из самых трудных вещей к которой нужно привыкнуть, не говоря уже о доскональном ее изучении. Селекторы, которые вы используете в CSS имеют разный вес и контролируются спецификой. Вот почему иногда, когда вы применяете правило к элементу, оно не отображается в вашем дизайне. Поэтому если вы часто пользуетесь известным хаком !important – эта статья для вас!
Как браузер читает CSS
Разберемся в азах чтения CSS различными браузерами. Во-первых, браузер читает стили сверху вниз:
/*Line 10*/
ul li a {
color: red;
}
/*Line 90*/
ul li a {
color: blue;
}Правило, которое вы указали в строке 10 будет переопределено(overridden) и ссылка станет синего цвета, потому что браузер будет использовать то правило, которое находится ниже в таблице стилей и имеет больший приоритет.
Это также работает с фактическим порядком в котором были импортированы файлы CSS, например:
<link href='css/style.css' rel='stylesheet'> <link href='css/custom.css' rel='stylesheet'>
Так как вы разместили custom.css после style.css все, что вы будете писать в style.css переопределится и заменится на стили custom.css. Этот метод часто используется создателями темплейтов, что дает пользователю возможность добавлять свои собственные стили без изменения основного файла. (Заметим, что custom.css не заменяет style.css полностью, а только те правила которые находятся в обоих таблицах стилей и были переопределены)
Специфика таблиц стилей
Все, что было указано выше, применяется только в том случае, если вы используете одинаковый вес на каждом селекторе. Если вы указали идентификаторы, классы или элементы, то вы даете им вес, а это и есть специфика таблиц стилей.
Есть четыре категории, которые определяют уровень специфики селектора: встроенные стили (это те, которые иногда использует JavaScript), ID, классы и элементы. Как измерить специфику? Специфика измеряется в очках/баллах:
- ID – 100 баллов
- Классы – 10 баллов
- Элементы – 1 балл
Зная об этом, если вы используете селектор следующим образом:
#content .sidebar .module li a
Его общий вес составит 122 балла (100 + 10 + 10 + 1 +1), которым является ID, два класса и два элемента.
Что нужно помнить:
- ID имеют слишком большой вес по сравнению с классами и элементами, поэтому вы должны ограничить использование ID в ваших стилях до минимума.
- В случаях, когда селекторы имеют одинаковый вес, порядок их отображения будет в обратном направлении – снизу вверх.
- Стили встроенные в HTML стилизуются в таблицах стилей, потому что они ближе к элементу.
- Единственный способ чтобы переопределить встроенные стили, это использовать !important заявления.
- Псевдо-классы и атрибуты имеют тот же вес, что и обычные классы.
- Псевдо-элементы имеют такой же вес, как нормальный элемент.
- Универсальный селектор (*) не имеет никакого веса.
Примеры
ul li a {
color: red;
}Этот селектор будет держать вес 3, что означает, что только путем добавления класса в другом месте, вы сможете его заменить.
.content #sidebar {
width: 30%;
}Вес этого селектора составляет 110 баллов, в основном из-за ID, который добавляет 100 баллов.
.post p:first-letter {
font-size: 16px;
}Вес этого селектора составляет 12 баллов, так как псевдо-элемент :first-letter и «р» тэг весят по 1му баллу.
p {
font-family: Helvetica, arial, sans-serif;
}Этот селектор весит всего 1 балл. Такой тип селектора должен быть использован в верхней части страницы при маркировке основных стилей, которые в дальнейшем могут быть переопределены для конкретных областей.
Всегда имейте в виду, что для переопределения ID селектора, вы должны написать 256 классов для одного элемента, например:
#title {
font-weight: bold;
}
.home .page .content .main .posts .post .post-content .headline-area .wrapper
/* ... etc. ... */ .title {
font-weight: normal;
}Специфика, далеко не кричащий аспект CSS, но, на наш взгляд, это область самая недооцененная. Правильно установленная специфика, не только поможет вам избежать ошибок, но и ускорит разработку вашего веб-сайта.
Высоких конверсий!
