Руководство для начинающих по специфике CSS

Вы когда-нибудь пытались переопределить правило CSS, но обнаруживали, что оно не работает должным образом? Или заметили, что когда один элемент используется несколько раз с разными комбинациями селекторов CSS, за раз применяется только одно правило? Это все из-за правил специфичности CSS.

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

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

Итак, давайте разберемся, что такое специфика CSS и как ее эффективно использовать.

Что такое специфика в CSS?

Проще говоря, если у вас есть несколько селекторов CSS для одного элемента, будет применен тот, у которого более высокое конкретное значение.

Разные селекторы имеют разный вес, и браузер сам решит, какой из них наиболее релевантен данному элементу.

Как это работает?

Специфичность селектора можно разделить на следующие четыре уровня:

1. Встроенный стиль или CSS
2. идентификаторы
3. Классы, псевдоклассы и атрибуты
4. Элементы или псевдоэлементы

Встроенные стили или CSS , где CSS применяется непосредственно к HTML-документу, выглядят так <p> . Встроенные стили всегда будут иметь самый высокий уровень специфичности.

Вторыми в этом порядке идут идентификаторы , такие как #content . Таким образом, любой селектор, использующий идентификатор, будет иметь второй по величине уровень специфичности.

Классы , псевдоклассы и атрибуты занимают третье место в этом порядке. Они выглядят так: .post , :hover и [title] соответственно.

Элементы и псевдоэлементы имеют наименьшее значение. li и :after являются основными примерами элемента и псевдоэлемента.

Расчет

Значение специфичности можно рассчитать с помощью следующих рекомендаций:

• Встроенный стиль или css: 1,0,0,0
• ID: 0,1,0,0
• Класс или псевдокласс и атрибут: 0,0,1,0
• Элементы и псевдоэлементы: 0,0,0,1
• Универсальный селектор(*): 0

Чтобы проверить уровень специфичности вашего селектора, вы можете использовать калькулятор специфичности.

Основные правила специфичности CSS

Теперь, когда у вас есть представление о том, как организована специфичность, давайте обсудим некоторые общие правила и примеры!

Это базовый HTML, который я буду использовать в своих примерах. Здесь у меня есть небольшой список внутри контейнера с #content .

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

Правило 1

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

В следующем фрагменте CSS оба селектора имеют одинаковую специфичность, поэтому цвет li будет желтым, поскольку он расположен дальше по строке.

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

Правило 2

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

В следующем примере li используется двумя разными селекторами, и оба влияют на цвет шрифта. Итак, какое правило должно применяться?

Как и в предыдущем примере, в концепции порядка CSS должен применяться второй (чтобы цвет li был зеленым), но поскольку .list li имеет более высокое значение специфичности, чем ul li , цвет останется красным.

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Правило 3

Мы видели, что класс перевешивает элементы по уровню специфичности, теперь давайте посмотрим, что происходит с идентификатором.

В следующем примере у нас есть класс и идентификатор, нацеленные на один и тот же элемент и влияющие на цвет шрифта. Опять тот же вопрос: какое правило должно применяться?

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

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

Правило 4

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

Если вы являетесь автором своего CSS и не отменяете существующее правило, вам вряд ли понадобится использовать !important .

Используйте !important только тогда, когда вы пытаетесь переопределить чужой CSS, и ваша специфика не может перевесить предыдущий селектор, особенно когда вы не можете контролировать порядок размещения своего CSS в HTML.

В основном это происходит при работе в WordPress, где вы найдете множество файлов CSS, уже добавленных различными плагинами и темами.

Как правило, CSS плагина специфичен для плагина и использует ID, inline-css или даже !important для более высокой специфичности, чтобы избежать конфликтов CSS. Чтобы переопределить этот CSS, вы должны использовать еще более высокую специфичность; для этих сценариев вы можете использовать !important .

В следующем примере я воссоздаю предыдущие сценарии с li , настроенным с помощью разных селекторов CSS, но вы можете видеть, что !important переопределяет все правила, и цвет будет желтым.

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important даст вам возможность применить свой CSS выше любого уровня специфичности.

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

Несколько исключений

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

В этом примере вы увидите :first-child (псевдокласс) и :first-line (псевдоэлемент). Мы только что узнали, что псевдоклассы будут иметь более высокую специфичность, чем псевдоэлементы, поэтому в соответствии с этим цвет первой строки абзаца должен быть зеленым, а вместо этого он будет розовым.

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

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

Здесь специфика немного сбивает с толку. Я могу только предположить, что причина такого результата в том, что :first-line ближе к элементу и, вероятно, рассматривается как встроенный стиль. Вы можете проверить jsfiddle для другого примера.

Как эффективно использовать специфичность?

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

Допустим, вы хотите использовать ту же .button , но с разными цветами фона, поэтому вы настроили специальный селектор: .red-block .button .

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

Если .button заключен в контейнер .red-block , то цвет фона кнопки по умолчанию изменится на красный.

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

Распространенные ошибки, которых следует избегать

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

 [css] div#content ul.list li{ color: purple; } [/css]

Если вы слишком конкретизируете свой CSS, он станет жестким и его будет сложнее использовать повторно. Вы можете легко написать .list li вместо div#content ul.list li , что сделает ваш CSS чище.

Дополнительные ресурсы

• Организация W3 по специфичности
• Калькулятор специфики CSS
• Ошибка IE
• взлом IE

Заключение

Как видите, специфичность CSS — важный инструмент, и каждый фронтенд-разработчик должен иметь его в своем наборе инструментов. Четкое понимание этой концепции поможет вам стать хорошим фронтенд-разработчиком.