x
 
Юрий Мазурский
23 июля 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Таб­лицы сти­лей ЦСС — набор пра­вил, кото­рые опре­де­ляют свой­ства эле­мен­тов в зави­си­мо­сти от их иерар­хии и кон­тек­ста. Каж­дый эле­мент может быть опи­сан сколько угодно раз, но финаль­ный набор пра­вил и свойств, кото­рые бра­у­зер при­ме­нит к каж­дому эле­менту, дол­жен быть детерминированным.

В русскоязычных статьях термин specificity переводят как «специфичность», но на мой взгляд, его суть лучше передаётся словом «вес»

В стан­дарте ЦСС опи­сан алго­ритм для опре­де­ле­ния пра­вила, кото­рое должно быть при­ме­нено к эле­менту. Каж­дое пра­вило имеет своё зна­че­ние specificity, кото­рое зави­сит от исполь­зу­е­мых селек­то­ров и авто­ма­ти­че­ски рас­счи­ты­ва­ется бра­у­зе­ром. Пра­вила с боль­шей спе­ци­фич­но­стью пере­ве­ши­вают пра­вила с мень­шей спе­ци­фич­но­стью, пере­опре­де­ляют их и исполь­зу­ются бра­у­зе­ром при отри­совке страницы.

В русскоязычных статьях термин specificity переводят как «специфичность», но на мой взгляд, его суть лучше передаётся словом «вес»

Про­стыми сло­вами прин­цип можно опи­сать так — чем кон­крет­нее задан селек­тор пра­вила, тем больше его «вес».

Выбор кон­крет­ного пра­вила зави­сит от трёх состав­ля­ю­щих (в порядке воз­рас­та­ния значимости):

  1. Поря­док пра­вила в коде.

  2. Зна­че­ние спе­ци­фич­но­сти селектора.

  3. Моди­фи­ка­тор !important.

На самом деле специфичность рассчитывается несколько иным способом, но таблица отражает настоящие значения

Таб­лица для рас­чёта спе­ци­фич­но­сти селек­то­ров выгля­дит так:

На самом деле специфичность рассчитывается несколько иным способом, но таблица отражает настоящие значения
Тип селек­тораПри­мерСпе­ци­фич­ность
Инлай­но­вый стиль<p style="color: red;">1000
Иден­ти­фи­ка­тор эле­мента#button { color: green }100
Класс,
селек­тор по атри­буту,
псев­до­класс
.active { color: white; }
[name="address"] { color: black; }
:hover { color: red; }
10
Тег,
псев­до­эле­мент
a { text-underline: none; }
::placeholder { color: gray; }
1

Исходя из этой таб­лицы, каж­дое пра­вило в таб­лице сти­лей будет иметь свою спе­ци­фич­ность, например:

Селек­торТипы селек­то­ровСпе­ци­фич­ность
.menu a { color: white; }Класс и тег10 + 1 = 11
#menu a:hover { color: blue; }Иден­ти­фи­ка­тор, тег и псев­до­класс100 + 1 + 10 = 111
form.large input[type="checkbox"]::after { color: #555; }Тег, класс, тег, селек­тор по атри­буту и псев­до­эле­мент1 + 10 + 1 + 10 + 1 = 23
.thumb > a:hover img { transform: scale(1.3); }Класс, тег, псев­до­класс, тег10 + 1 + 10 + 1 = 22

Ком­би­на­торы >, +, ~, селек­тор * и псев­до­класс :not не вли­яют на специфичность.

Если два раз­ных пра­вила имеют оди­на­ко­вую спе­ци­фич­ность и вли­яют на один и тот же эле­мент, то пере­ве­сит пра­вило, кото­рое стоит ниже в коде. Свой­ство с моди­фи­ка­то­ром !important пере­ве­ши­вает все про­чие свойства.

Чтобы пере­си­лить !important, при­дётся доба­вить новый !important в пра­вило с боль­шей спе­ци­фич­но­стью, или поста­вить селек­тор с такой же спе­ци­фич­но­стью и !important позже в коде. Зло­упо­треб­ле­ние фла­гом !important часто при­во­дит к тому, что весь кас­кад пра­вил начи­нает выхо­дить из под кон­троля разработчика.

Спе­ци­фич­ность селек­то­ров — это внут­рен­ний меха­низм и алго­ритм работы ЦСС, кото­рый опи­сан в стан­дарте, реа­ли­зо­ван в бра­у­зе­рах, но напря­мую не виден раз­ра­бот­чи­кам. Спе­ци­фич­ность нельзя про­чи­тать и нельзя задать напря­мую, но полезно знать о том как она рабо­тает, чтобы при­ме­нять ЦСС более эффек­тивно и доби­ваться реше­ния задачи мини­маль­ными средствами.

Что ещё почитать

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Как бороться с багами? Часть четвёртая: отслеживать производительность Что такое непрерывная доставка? Как написать аккуратный код? Часть четвёртая: ответственность Расскажите, как автор советов работает с маргиналиями?




Недавно всплыло

3 Как выжить в дистанционной работе. Инструменты на удалёнке 4 Практика: формулировка полезного действия 9 Некоторые редакторы переписывают твои советы, а потом продают как свои курсы 2