LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней

Спецификация таблиц стилей CSS

Спецификация css

Если вы планируете использовать CSS на регулярной основе, вам необходимо развить понимание о том, что такое спецификация и как она применяется.

Кроме floats и positions, специфика может стать одной из самых трудных вещей к которой нужно привыкнуть, не говоря уже о доскональном ее изучении. Селекторы, которые вы используете в CSS имеют разный вес и контролируются спецификой. Вот почему иногда, когда вы применяете правило к элементу, оно не отображается в вашем дизайне. Поэтому если вы часто пользуетесь известным хаком !important – эта статья для вас!

Как браузер читает CSS

Разберемся в азах чтения CSS различными браузерами. Во-первых, браузер читает стили сверху вниз:

/*Line 10*/
ul li a {
color: red;
}

/*Line 90*/
ul li a {
color: blue;
}

Правило, которое вы указали в строке 10 будет переопределено(overridden) и ссылка станет синего цвета, потому что браузер будет использовать то правило, которое находится ниже в таблице стилей и имеет больший приоритет.

Это также работает с фактическим порядком в котором были импортированы файлы CSS, например:

<link href='css/style.css' rel='stylesheet'>
<link href='css/custom.css' rel='stylesheet'>

Так как вы разместили custom.css после style.css все, что вы будете писать в style.css переопределится и заменится на стили custom.css. Этот метод часто используется создателями темплейтов, что дает пользователю возможность добавлять свои собственные стили без изменения основного файла. (Заметим, что custom.css не заменяет style.css полностью, а только те правила которые находятся в обоих таблицах стилей и были переопределены)

Специфика таблиц стилей

Все, что было указано выше, применяется только в том случае, если вы используете одинаковый вес на каждом селекторе. Если вы указали идентификаторы, классы или элементы, то вы даете им вес, а это и есть специфика таблиц стилей.

Есть четыре категории, которые определяют уровень специфики селектора: встроенные стили (это те, которые иногда использует JavaScript), ID, классы и элементы. Как измерить специфику? Специфика измеряется в очках/баллах:

  • ID – 100 баллов
  • Классы – 10 баллов
  • Элементы – 1 балл

Зная об этом, если вы используете селектор следующим образом:

#content .sidebar .module li a

Его общий вес составит 122 балла (100 + 10 + 10 + 1 +1), которым является ID, два класса и два элемента.

Что нужно помнить:

  • ID имеют слишком большой вес по сравнению с классами и элементами, поэтому вы должны ограничить использование ID в ваших стилях до минимума.
  • В случаях, когда селекторы имеют одинаковый вес, порядок их отображения будет в обратном направлении – снизу вверх.
  • Стили встроенные в HTML стилизуются в таблицах стилей, потому что они ближе к элементу.
  • Единственный способ чтобы переопределить встроенные стили, это использовать !important заявления.
  • Псевдо-классы и атрибуты имеют тот же вес, что и обычные классы.
  • Псевдо-элементы имеют такой же вес, как нормальный элемент.
  • Универсальный селектор (*) не имеет никакого веса.

Примеры

ul li a {
color: red;
}

Этот селектор будет держать вес 3, что означает, что только путем добавления класса в другом месте, вы сможете его заменить.

.content #sidebar {
width: 30%;
}

Вес этого селектора составляет 110 баллов, в основном из-за ID, который добавляет 100 баллов.

.post p:first-letter {
font-size: 16px;
}

Вес этого селектора составляет 12 баллов, так как псевдо-элемент :first-letter и «р» тэг весят по 1му баллу.

p {
font-family: Helvetica, arial, sans-serif;
}

Этот селектор весит всего 1 балл. Такой тип селектора должен быть использован в верхней части страницы при маркировке основных стилей, которые в дальнейшем могут быть переопределены для конкретных областей.

Всегда имейте в виду, что для переопределения ID селектора, вы должны написать 256 классов для одного элемента, например:

#title {
font-weight: bold;
}

.home .page .content .main .posts .post .post-content .headline-area .wrapper 
/* ... etc. ... */ .title {
 font-weight: normal;
}

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

Высоких конверсий!

03-03-2016

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".