Золотые правила написания чистого CSS

 message { background: #eee; border: 2px solid #333; border-radius: 1em; padding: 1em; } .message.error { background: #f30; color: #fff; } .error { background: #ff0; border-color: #fc0; } 

Использование <p class="message"> с этим CSS дает нам красивую серую рамку с темно-серой рамкой, как показано на рисунке 2.1:

Рисунок 2.1. Визуальный эффект нашего селектора .message

Использование <p class="message error"> , однако, дает нам фон .message.error и границу .error показанную на рисунке 2.2:

Рисунок 2.2. Визуальный результат использования .message.error в качестве селектора

Единственный способ переопределить цепочечный селектор класса — использовать еще более конкретный селектор. Чтобы избавиться от желтой границы, нам нужно добавить в цепочку имя класса или селектор типа: .message.warning.exception или div.message.warning . Вместо этого целесообразнее создать новый класс. Если вы обнаружите, что селекторы цепочки, вернитесь к чертежной доске. Либо в дизайне есть несоответствия, либо вы преждевременно цепляетесь, пытаясь предотвратить проблемы, которых у вас нет. Исправьте эти проблемы. Вы избавитесь от проблем, связанных с техническим обслуживанием, и повторного использования, которое вы получите.

Избегайте использования селекторов id

Поскольку вы можете иметь только один элемент для каждого id в документе, наборы правил, которые используют селекторы id , трудно переназначить. Обычно это включает использование списка селекторов id ; например, #sidebar-features и #sidebar-sports .

Идентификаторы также имеют высокую степень специфичности, поэтому нам понадобятся более длинные селекторы для переопределения объявлений. В следующем CSS мы должны использовать #sidebar.sports и #sidebar.local чтобы переопределить цвет фона #sidebar :

 #sidebar { float: right; width: 25%; background: #eee; } #sidebar.sports { background: #d5e3ff; } #sidebar.local { background: #ffcccc; } 

Переключение на селектор классов, например .sidebar , позволяет упростить нашу цепочку селекторов:

 sidebar { float: right; width: 25%; background: #eee; } .sports { background: #d5e3ff; } .local { background: #ffcccc; } 

Помимо экономии нескольких байтов, наши .sports и .local теперь могут быть добавлены к другим элементам.

Использование селектора атрибута, такого как [id=sidebar] позволяет нам обойти более высокую специфичность идентификатора. Хотя в нем отсутствует возможность повторного использования селектора класса, низкая специфичность означает, что мы можем избежать цепочки селекторов.

Примечание: когда полезна высокая специфичность селекторов id

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

Наконец, давайте поговорим о селекторах, таких как #main article.sports table#stats tr:nth-child(even) td:last-child . Это не только абсурдно долго, но со спецификой 2,3,4, он также не может быть использован повторно. Сколько возможных экземпляров этого селектора может быть в вашей разметке? Давайте сделаем это лучше. Мы можем немедленно обрезать наш селектор до #stats tr:nth-child(even) td:last-child . Это достаточно конкретно, чтобы сделать работу. Тем не менее, гораздо лучший подход — как для повторного использования, так и для минимизации количества байтов — это использовать вместо этого имя класса.

Примечание: симптом вложенности препроцессора

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

Используйте имена семантических классов

Когда мы используем слово семантическое , мы имеем в виду значимое . Имена классов должны описывать, что делает правило или тип содержимого, на которое оно влияет. Нам также нужны имена, которые выдержат изменения в требованиях к дизайну. Называть сложнее, чем кажется.

Вот примеры того, что не нужно делать: .red-text , .blue-button , .border-4px , .margin10px . Что с ними не так? Они слишком тесно связаны с существующим выбором дизайна. Использование class="red-text" для разметки сообщения об ошибке работает. Но что произойдет, если изменения в дизайне и сообщения об ошибках станут черным текстом внутри оранжевых рамок? Теперь ваше имя класса неточно, что затрудняет понимание вами и вашими коллегами того, что происходит в коде.

В этом случае лучше выбрать имя класса, например .alert , .error или .message-error . Эти имена указывают, как должен использоваться класс, и тип содержимого (сообщения об ошибках), на который они влияют. Для имен классов, которые определяют макет страницы, добавьте префикс, такой как layout- , grid- , col- или просто l- чтобы сразу увидеть, что они делают. Раздел о методологии БЭМ позже описывает процесс для этого.

Избегайте привязки CSS близко к разметке

Вы, вероятно, использовали селекторы потомков или потомков в своем коде. Дочерние селекторы следуют шаблону E > F где F — элемент, а E — его непосредственный родитель. Например, article > h1 влияет на элемент h1 в <article><h1>Advanced CSS</h1></article> , но не на элемент h1 в <article><section><h1>Advanced CSS</h1></section></article> . Селектор потомков, с другой стороны, следует шаблону EF где F — элемент, а E — предок. Чтобы использовать наш предыдущий пример, article h1 выбирает элемент h1 в обоих случаях.

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

Поднимите руку, если вы когда-либо испытывали следующее. Вы разработали несколько шаблонов для клиента, и ваш CSS использует селекторы потомков и потомков в нескольких местах. Большинство этих потомков и потомков также являются селекторами элементов, поэтому такие селекторы, как .promo > h2 и .media h3 встречаются по всему вашему коду. Ваш клиент также нанял консультанта по SEO, который рассмотрел вашу разметку и предложил вам изменить элементы h2 и h3 элементы h1 и h2 . Проблема в том, что мы также должны изменить наш CSS.

Еще раз, селекторы класса показывают свое преимущество. Использование .promo > .headline или .media .title (или, проще, .promo-headline и .media-title ) позволяет нам изменять нашу разметку без необходимости изменения CSS.

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

Примечание: более архитектурно обоснованные правила CSS

Филип Уолтон обсуждает эти и другие эти правила в своей статье «Архитектура CSS». Я также рекомендую сайт CSS Guidelines Гарри Робертса и пост Николаса Галлахера « О семантике HTML и архитектуре переднего плана», чтобы больше узнать об архитектуре CSS.

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