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

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

Каскад — специальная процедура, которая задает необходимый порядок пересекающимся правилам стиля.

Классификация согласно источнику

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

Относительно важности первым в этом списке должен стоять стиль автора. Этот тот код стиля, который программист составляет при создании веб-страницы.

Незначительно меньший приоритет имеют правила, которые пользователи применяют к контенту для удобства чтения и работы с информацией. Данное явление достаточно редкое.
И наконец, стили браузера с самым низким приоритетом. Правильно написанный сайт перекрывает все стили браузера.

Классификация согласно важности

Все правила стилизации веб-сайта можно разделить на два вида: рядовые и !important. дальнейшая классификация проходит в рамках конкретного вида. Стоит обострить внимание на том, что правило с командой !important всегда будет иметь более высокий приоритет нежели рядовые правила.

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

1. Пользовательские правила с отметкой !important;
2. Авторские правила с отметкой !important;
3. Рядовые правила автора;
4. Рядовые правила пользователя;
5. Правила браузера.

Классификация согласно специфичности

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

Классификация согласно порядку расположения

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

HTML

<div class="blackwhite">Белое или черное?</div>

CSS

.white {
	color: #ffffff;	/* белый */
}
.black {
	color: #000000;	/* черный */
}

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

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

1. Анализ файла CSS на присутствие двух и более стилей для одного и того же элемента.
2. Классификация стилей согласно источнику и важности:
   1. Пользовательские правила с отметкой !important;
   2. Авторские правила с отметкой !important;
   3. Рядовые правила автора;
   4. Рядовые правила пользователя;
   5. Правила браузера.
3. Классификация по специфичности в рамках важных и рядовых групп.
4. классификация равноценных по специфичности стилей согласно расположению в файле CSS