Многие начинающие верстальщики упускают одну очень важную вещь – приоритет стилей. После прочтения этой статьи у вас не останется вопросов 🙂 .
Какой стиль выбирается первым если их несколько в CSS?
Cascading Style Sheets, ни что иное, как каскадная таблица стилей. Одна из частей этого механизма, это возможность задавать несколько стилей для одного HTML элемента.
Почему я написал правило, а оно не применилось в CSS? Ответ всё тот-же – приоритет. Разберемся при помощи простой таблицы, какие стили получит элемент и почему:
Тег, например p: | 1 |
Класс, например .class: | 10 |
ID, например #main: | 100 |
Inline-стиль, например style=”font-size: 16px;”: | 1000 |
Давайте рассмотрим на примере, чтобы было более понятней:
div id="main" class="wrap"
и напишем такие стили:
.wrap { font-size: 14px; } #main { font-size: 16px; } div { font-size: 13px; }
Как вы думаете какой стиль будет применен? Правильный ответ – #main. Давайте теперь напишем другие стили:
div.wrap { font-size: 15px; } .wrap { font-size: 20px; }
Правильный ответ – 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, пример:
#nav li { font-size: 13px !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 class=”js-submit btn btn-default” содержит стили и js событие.
Всем спасибо за прочтение, буду благодарен за какие-то дополнения к статье. Делитись в комментариях своим полезным опытом 🙂
Очень полезная информация, спасибо