CSS: каскад, специфичность и наследование

Краткая статья, содержащая основные понятия о каскаде, специфичности и наследовании в CSS.

Что такое каскад?

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

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

Браузеры применяют следующую логику при сортировке:

1. Найти все декларации, применяющиеся к данному элементу или группе элементов, и относящиеся к определенному типу.
2. Сортировать декларации в соответствии с их приоритетом (обычный или важный) и происхождением (автор, пользователь или пользовательский агент). По нисходящей приоритетности:
   1. пользовательская декларации типа !important
   2. авторские декларация типа !important
   3. обычные авторские декларации
   4. обычные пользовательские декларации
   5. декларации пользовательского агента
3. Если декларации обладают одинаковым приоритетом и источником, то следует сортировать их по специфичности селектора.
4. Наконец, если декларации обладают одинаковым приоритетом, источником и специфичностью, то сортировать их следует по порядку положения в таблице стилей – последний элемент в списке имеет самый высокий приоритет.

Что такое специфичность?

Специфичность – это метод разрешения конфликтов в пределах каскада.

Специфичность рассчитывается своим собственным способом, базируясь на значимости 4 различных категорий. Например, в CCS2 для представления этих категорий использовались буквы a, b, c, и d, где каждая по умолчанию имела значимость равную 0.

• a равняется 1, если декларация указана в атрибуте стиля HTML («инлайн-стили»), а не в селекторе, при помощи CSS-правила.
• b равен количеству атрибутов ID в селекторе
• c равен количеству других атрибутов и псевдо-классов в селекторе
• d равен количеству элементов и псевдо-элементов в селекторе

Специфичность высчитывается путем сложения результатов всех 4 данных. Селекторы с более высоким показателем имеют приоритет.

Например, селектор #id .class[href] element:hover содержит:

• 1 ID (b равен 1)
• 1 класс, 1 селектор атрибута, и 1 псевдо-класс (c равен 3)
• 1 элемент (d равен 1)

Таким образом, элемент имеет специфичность равную 0,1,3,1. Следует отметить, что селектор, содержащий один лишь ID (0,1,0,0) будет иметь больший приоритет, чем любой другой, пусть даже последний имеет большее количество других атрибутов или элементов (например: 0,0,10,20). Это одна из причин, почему многие современные архитектурные шаблоны CSS не используют ID для стилизации.

Что такое наследование?

Наследование отличается от каскада и включает в себя дерево DOM.

Наследование – это процесс, при котором элементы наследуют значения свойств от своих предков в дереве DOM. Некоторые свойства, например, color, автоматически наследуется дочерним элементом. Каждое свойство определяет, будет ли оно автоматически унаследовано.

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

О значении !important

Написанное выше должно сделать очевидным тот факт, что «!important» отдельное понятие применительно к специфичности, которое никак не влияет на специфичность селектора правила.

Декларация !important имеет больший приоритет, чем обычные декларации (см. ранее описанную логику сортировки каскада), даже чем декларации, содержащиеся в атрибуте style.

Источник:  css-live.ru