Приорітети в css3
У мене є знайомий який ас і бог у .java і .php але він ненавидить патологічно .css3 саме через принцип каскадності (Cascading Style Sheets - каскадні таблиці стилів). Каскадність може зламати мозок будь-кому, тому що не завжди навіть браузер, у розробнику, показує залежність стилів, особливо яскраво проявляються у верстці де багато !importan.
Тому гуру верстки верстають без !importan - хоча в ньому немає нічого поганого.
Як визначається приорітет або каскадність стилів?
Кожен селектор у css3 отримує бали, які плюсуються між собою.
Якщо кілька css-правил з однаковою вагою впливають на один елемент, то елемент отримає стилі правила, яке ближче до кінця HTML сторінки (нижче в коді).
Приорітети основних елементів:
Будь-який селектор - 1 бал
Клас - 10 бал
ID - 100 балів
Строчний стиль (style="") - 1000 балів
!important - ~Таблиця з балами селекторів:
* {} /* = 0 */
li {} /* = 1 */
li::first-line {} /* = 2 */
ul li {} /* = 2 */
ul ol+li {} /* = 3 */
ul li.red {} /* = 12 */
li.red.level {} /* = 21 */
li:not(.red){} /* = 11 */
li:not(.red):not(.green){} /* = 11 */
#t34 {} /* = 100 */
#content #wrap {} /* = 200 */
<div style=""></div> /* = 1000 */
li {.color:red!importan;} /* = ~ */ !important - перебиває усі правила та style. Його можна перекрити ще одним !important розташованим нижче в коді. :fellow: Но :fellow: Можливо і таке
***
У житті ніхто не вважає бали, просто трохи практики та виявлення помилок все розкладе на полички. Головне Ви повинні запам'ятати що:
- послідовність (.) (.) завжди сильніший за один (.)
- (#) завжди сильніший (.)
- Хто нижче в коді css той і сильніший
- !mportant використовуємо тільки в крайньому випадку, у крайньому випадку.
- Медіа запити, наприклад: @media ( max-width:500px ){ } не беруть участь у підрахунку пріоритету і завжди повинні розташовуватися нижче всіх інших правил, щоб перебивати попередні, коли спрацьовує зазначену медіа умову.