Приоритеты селекторов

CSS – Как выставляется приоритеты у стилей?

Многие начинающие верстальщики упускают одну очень важную вещь – приоритет стилей. После прочтения этой статьи у вас не останется вопросов 🙂 .

Какой стиль выбирается первым если их несколько в CSS?

Cascading Style Sheets, ни что иное, как каскадная таблица стилей. Одна из частей этого механизма, это возможность задавать несколько стилей для одного HTML элемента.

Почему я написал правило, а оно не применилось в CSS? Ответ всё тот-же – приоритет. Разберемся при помощи простой таблицы, какие стили получит элемент и почему:

Тег, например p:	1
Класс, например .class:	10
ID, например #main:	100
Inline-стиль, например style=”font-size: 16px;”:	1000

Давайте рассмотрим на примере, чтобы было более понятней:

Как вы думаете какой стиль будет применен? Правильный ответ – #main. Давайте теперь напишем другие стили:

Правильный ответ – div.wrap. Почему так? Тег по “весу” у нас 1, класс 10, итого 11. 11 > 10, а значит у этого правила выше приоритет.

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

Поэтому, если ваше правило состоит из очень многих “родительских и дочерних элементов”, то вовсе не удивительно, что указав один лишь класс вы не сможете перекрыть стили.

К примеру, пред. разработчик написал такой стиль

#contact ul.header-nav li.header-list a.header-link <>

суммарно это 133, а такое число попробуй еще перебить 🙂 .

Можно ли использовать !important ?

!important пишется в тяжелых случаях, и в целом его использовать не рекомендуется. Применять его стоит лишь тогда, когда вы не можете перекрыть чужие стили, или такой вот “привет из прошлого” как style=”font-size: 15px;”.

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

Рекомендации по написанию CSS

Есть несколько популярных методологий: БЭМ от Яндекса, Атомарный CSS, SMACSS и т.д. Подробнее почитайте в интернете про каждую, у них есть как плюсы так и минусы. Не так важно что вы будете использовать в работе, самое главное придерживаться какому-то одному направлению, а не всего почучуть.

От себя бы порекомендовал бы следующее:

1. Не привязывайте стили к родительским блокам, если их потом можно применять в другом месте на сайте. И уж тем более не привязывайте стили к ID без крайней на то необходимости. Категорически плохо писать для каждой отдельной страницы
#contact-page li а затем #about-page li и т.д.

2. Не создавайте простыню из стилей в правиле “родитель -> потомок -> кум -> сват -> брат”, это никому не нужно. Если вы считаете что указание 1 класса мало, напишите еще 1-2, но не больше.

3. Используйте ТОЛЬКО классы. В некоторых случаях допустимо указывать вложенные теги (например .table-good td). Не используйте стили для ID, или глобальные стили без необходимости.

4. Если вы используете JavaScript или jQuery, и пишите события для этих классов, которые не будут стилизованы (например, active или visible), то пишите классы как js-submit (с приставкой js-), а стили задавайте отдельно. Будет куда понятней, что ссылка a btn btn-default” содержит стили и js событие.

Всем спасибо за прочтение, буду благодарен за какие-то дополнения к статье. Делитись в комментариях своим полезным опытом 🙂

Источник

Приоритеты стилей в CSS

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

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

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

Приоритеты стилей в зависимости от типа селектора

Да, селекторы CSS также влияют на стилевые приоритеты, причем в расчет берутся не только простые селекторы (классы, селекторы тегов, атрибуты и т.д.), но и составные (дочерние, соседние, селекторы потомков и т.д.).

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

А теперь давайте рассмотрим, каким же образом браузеры считают эти баллы.

1. Универсальный селектор — количество начисляемых баллов равно нулю (0).
2. Селекторы тегов и псевдоэлементы — по одному (1) баллу за каждый.
3. Селекторы атрибутов, классы и псевдоклассы — по десять (10) баллов за каждый.
4. Идентификаторы — по сто (100) баллов за каждый идентификатор находящийся в селекторе.
5. Атрибут style — встроенные стили не используют селекторов, а указываются непосредственно внутри тегов элементов, но при этом они имеют самый высокий приоритет исчисляемый тысячей (1000) баллов.

Чтобы вы лучше поняли, как вычисляются эти виртуальные баллы, вот вам несколько простых примеров.

* < >/* 0 баллов */ em < >/* 1 балл */ p::first-letter < >/* 2 балла (один селектор тегов и один псевдоэлемент) */ p [title="Приветствие"] < >/* 11 баллов (по одному селектору тегов и атрибутов) */ div.fine .one < >/* 21 балл (два класса и один селектор тегов) */ #header a:hover < >/* 111 баллов (идентификатор, селектор тегов и псевдокласс) */ 

Как видите все довольно просто. Только вы не пугайтесь заранее, думая, что вам придется постоянно высчитывать эти баллы при создании своих таблиц стилей. На самом деле их никто никогда просто так не считает. Обычно про селекторный приоритет вспоминают только тогда, когда какие-то стили не хотят работать. Вот тут-то и начинаются «танцы с бубном» и поиски виновного. 🙂

Пример демонстрирующий приоритеты селекторов

       
Обычный параграф.
   

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

Правило !important

Правило !important используется в тех случаях, когда необходимо, чтобы конкретное свойство было обязательно применено к элементу вне зависимости от того, в каком селекторе и в каком месте CSS-кода оно находится, а также, невзирая на имеющиеся дубли. Общий синтаксис:

Пример использования правила !important

Текст первого параграфа данного примера зеленый, так как берется значение свойства color, которое указано ниже. А вот текст второго параграфа красный, так как был использован !important .

Но это еще не все о правиле !important . Если вы помните, то из урока о подключении CSS вы узнали, что пользователи также могут использовать CSS для изменения внешнего вида сайта. И естественно, если и в пользовательских и в авторских таблицах стилей присутствуют селекторы, которые пытаются изменить одно и то же свойство одного и того же HTML-элемента (например, цвет текста), то браузеру надо сделать выбор в пользу какого-то одного варианта. В этом случае они руководствуются следующим алгоритмом.

1. Самый низкий приоритет имеют стили установленные в браузере по умолчанию, как например вертикальные поля у параграфов.
2. Более высокий приоритет получают обычные стили подключаемые пользователями.
3. Еще более высокий — авторские стили, то есть ваши.
4. Еще более высокий достается также авторским стилям, но у которых указан !important .
5. И наконец самый высокий приоритет получают стили пользователей с правилом !important . Это сделано для того, чтобы пользователи с ограниченными возможностями в любом случае могли изменить внешний вид страниц сайта под свои нужды.

Обратите внимание, что свойства с !important имеют даже более высокий приоритет, чем встроенные с помощью атрибута style .

Приоритеты подключаемых и импортируемых стилей

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

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

Содержимое файла style1.css

@import url("style/style2.css"); @import url("style/style3.css"); Ниже здесь идут стили самого файла style1.css 

Итоговая таблица созданная браузером

Первыми идут стили из style2.css Затем стили из style3.css И в конце стили из style1.css 

Итоговая таблица стилей с учетом приоритетов и что такое Каскад

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

1. Выбираются все стили подключенные к текущей странице с учетом типа устройства, на котором происходит просмотр.
2. Происходит сортировка свойств с учетом имеющихся правил !important и источников CSS (браузерные, авторские и пользовательские таблицы).
3. Делается еще одна сортировка, но уже по весу селекторов.
4. Последняя сортировка, где вычисляются те свойства, которые, находясь в селекторах с одинаковым весом и влияя на один и тот же элемент, имеют дубли. Из них выбираются те, которые располагаются ниже в CSS-коде.
5. Происходит отсеивание всех менее приоритетных дубликатов свойств и применение CSS к HTML-странице.

Ну а почему же все-таки «каскадные таблицы стилей»? Под каскадом в данном случае как раз и понимается то, что описано чуть выше. То есть возможность для браузера получения CSS из трех разных источников с учетом правил сортировки и приоритетов стилей. Все.

Не глядя в результат задания, определите, какого цвета будет текст внутри каждого элемента. Не сломайте мозг. 🙂 Вот код:

  #content p < color: black; >#par em < color: red; >#content .par em < color: blue; >.par .em < color: yellow; >.par b < color: orange; >em.em 
текст в EM1
 
текст в B
 
Параграф3 
 
 
 

Источник