Приоритет и наследование в СSS на практике

По просьбам читателей сегодня я попытаюсь раскрыть такую важную тему в CSS, как приоритет и наследование. А так же вы узнаете о незаменимом помощнике в контексте сегодняшней темы, как для верстальщика, так и для front-end разработчика – веб-инспекторе.

О наследовании в CSS

Что нужно знать о наследовании в CSS при верстке сайтов? Рассмотрим это на примере фрагмента макета.

Верстальщик должен стремится не плодить лишний код, ведь для этого и существует принцип наследования. Верстка любой страницы начинается с тега body. Это значит, что мы прописываем цвет фона страницы и все атрибуты основного шрифта заранее в тег body (предок). То есть, все теги (p, div), что находятся внутри body, являются его потомками, они так же унаследуют белый фон и заданный шрифт, если мы не перебьем их другими свойствами.

Если для тега h1 зададим другие значения цвета и шрифта, в таком случае тег h1 уже не потомок body.

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

О приоритетах в CSS

Приоритетность таблиц стилей в порядке возрастания для верстальщика:

1. таблицы стилей самого браузера
2. внешний css файл, подключаемый к странице через <link>
3. таблицы стилей написанные на самой странице между тегами <style>..</style>
4. таблицы стилей внутри атрибута style="..."
5. самый высокий приоритет у стилей с пометкой на конце important!

Независимо от количества страниц, всегда надо стили выносить в отдельный файл, который будет применятся ко всем страницам, пока его не перебьет новый стиль, записанный внутри страницы между тегами <style>..</style>, ближайший к стилизуемому тегу.

В каких случаях надо писать стили внутри страницы? Если, эта страница уникальна по дизайну, отличается от остальных.

Это была теория, на практике же все выглядит куда понятнее. Очень часто верстальщику приходится разбираться в чужом коде. Например стоит такая задача – изменить цветовую гамму страницы или всего сайта. Если этот условный сайт сверстан вручную и достаточно грамотно, то найти какие из стилей применены к тому или иному тегу, легко. Просто следуя тем существующим правилам приоритета и наследования. Смотрите какие стили на странице расположены ниже или специфичнее (#id против .class) и совсем уже явно – это !important, те и будут главнее.

Сущий ад начинается, если сайт работает например на Wordpress-е. Там столько всего намешано: несколько CSS внешних файлов (wp темы, bootstrap-а, плагинов woocommerce, jetpack, виджетов, шорткодов) и это не считая styles внутри страниц. Как же в такой каше разобраться?

Волшебный веб-инспектор

Открываете искомую страницу в браузере Google Chrome --> Дополнительный инструменты --> Инструменты разработчика

Прямо на ваших глазах я поменяю цвет заголовка h1 с черного на сиреневый. Разумеется, что эта замена произошла виртуально, только в вашем браузере. После обновления браузера, будет как раньше. Вот таким быстрым способом, можно не открывая фотошоп, подобрать цветовую гамму, затем скопировать прямо из веб-инспектора новый код и вставить в файл CSS стилей. Вопрос только в какой, если их там целая куча?

Давайте разбираться пошагово:

1. Нажать на стрелочку
2. Выделить заголовок на сайте
3. На DOM дереве выделится h1
4. В правой части появится в самом верху селектор h1 с атрибутом color #111;
5. Правее h1 вы увидите файл style.css, при наведении на который, появится путь до него

В нашем примере, это style.css темы WordPress-а. Это подтвердилось, тем, что мы щёлкнув по черному квадратику рядом с атрибутом color, выбрали другой цвет. Цвет изменился, значит файл стилей выбран верно.

Вся правая часть вкладки Styles описывает только тег h1.

• inherit from - история наследования
• зачеркнутые строчки – переопределенные стили
• injected stylesheet – внутренние стили внутри тега <style>
• user agent stylesheet – дефолтные стили браузера

В Styles отображаются все изменения, которые происходили с тегом h1. А вкладка Computed показывает – что в итоге осталось, окончательный вариант.

Как видите все не так страшно, при правке чужого кода, вам в помощь веб-инспектор. А когда вы сами верстаете с нуля, вы же двигаетесь поэтапно и сразу видите результат.