От автора: статья является выдержкой из нашей книги CSS мастер, написанной Tiffany Brown. Как уже говорилось, существуют правила по написанию чистого CSS кода, которых необходимо максимально придерживаться, чтобы не было ошибок. Они помогут писать легковесный CSS код, который можно будет повторно использовать.
Золотые правила по написанию чистого CSS
старайтесь не употреблять глобальные и элементные селекторы;
не используйте чрезмерно специфичные селекторы;
используйте семантические имена классов;
не привязывайте сильно CSS к разметке.
Разберем каждое правило.
Старайтесь не употреблять глобальные селекторы
К глобальным селекторам относится универсальный селектор (*), элементные селекторы типа p, button и h1, а также селекторы атрибутов типа [type=checkbox]. Стили в таких селекторах применяются ко всем элементам на сайте. Пример:
|
1 2 3 4 5 6 7 8 9 |
button { background: #FFC107; border: 1px outset #FF9800; display: block; font: bold 16px / 1.5 sans-serif; margin: 1rem auto; width: 50%; padding: .5rem; } |
Вроде бы все хорошо. А что, если нам понадобится кнопка с другими стилями? Давайте стилизуем кнопку .close, которая будет закрывать диалоговые окна:
|
1 2 |
<section class="dialog"> <button type="button" class="close">Close</button> </section> |
Заметка: почему не dialog?
Мы взяли section вместо dialog, так как поддержка dialog ограничена Blink браузерами типа Chrome/Chromium, Opera и Yandex.
Теперь нужно переписать все строки CSS, которые не должны наследоваться от селектора button:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.close { background: #e00; border: 2px solid #fff; color: #fff; display: inline-block; margin: 0; font-size: 12px; font-weight: normal; line-height: 1; padding: 5px; border-radius: 100px; width: auto; } |
Для перезаписи значений по умолчанию в браузере нам все еще нужны эти объявления. А если ограничить стили button в класс .default? Тогда мы сможем выкинуть свойства display, font-weight, line-height, margin, padding и width из класса .close. Размер сократится на 23%:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.default { background: #FFC107; border: 1px outset #FF9800; display: block; font: bold 16px / 1.5 sans-serif; margin: 1rem auto; width: 50%; padding: .5rem; } .close { background: #e00; border: 2px solid #fff; color: #fff; font-size: 12px; padding: 5px; border-radius: 100px; } |
Риск конфликтов в стилях будет ниже, если не использовать глобальные селекторы. Разработчик, работающий над модулем или документом, не добавит ненароком правильно, которое вызовет побочный эффект в другом модуле или документе.
Глобальные стили и селекторы отлично подходят для переустановки и нормализации стилей в браузере по умолчанию. В большинстве остальных случаев они засоряют код.
Не используйте чрезмерно специфичные селекторы
Сохранение низкой специфичности селекторов – один из способов создания легковесного, повторно используемого и обслуживаемого CSS. Насколько вы помните, типизированные селекторы имеют специфичность 0,01. У классов специфичность равна 0,1,0:
|
1 2 3 4 5 6 7 8 9 10 |
/* Специфичность 0,0,1 */ p { color: #222; font-size: 12px; } /* Специфичность 0,1,0 */ .error { color: #a00; } |
Стили в классе имеют более высокий приоритет, чем правила обычного типизированного селектора. Как-то дополнять и объединять класс с типизированным селектором не нужно. Это повышает специфичность селектора, что, в свою очередь, увеличивает вес файла.
То есть запись вида p.error это то же самое, что и просто .error. Также из плюсов то, что .error можно использовать повторно на других элементах. Селектор p.error ограничивает класс .error только на тегах p.
Не сцепляйте классы
Избегайте сцепления классов. Селекторы .message.warning имеют специфичность 0,2,0. Селекторы с более высокой специфичностью сложнее переписать. Также сцепка часто вызывает сторонние эффекты. Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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.
Идентификаторы имеют высокую специфичность, чтобы их переписать, нужен еще более длинный селектор. В коде ниже чтобы переписать фоновый цвет в #sidebar, необходимо использовать #sidebar.sports и #sidebar.local:
|
1 2 3 4 5 6 7 8 9 10 11 |
#sidebar { float: right; width: 25%; background: #eee; } #sidebar.sports { background: #d5e3ff; } #sidebar.local { background: #ffcccc; } |
Если же использовать классы, например, .sidebar, то это упрощает сцепку селекторов:
|
1 2 3 4 5 6 7 8 9 10 11 |
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>. Родительский селектор наоборот подчиняется шаблону E F, где 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 правила
Philip Walton рассказывает про эти и другие правила в своей статье CSS архитектура. Также для восполнения знаний по CSS архитектуре рекомендую посетить сайт Harry Roberts CSS Guidelines и прочитать пост Nicolas Gallagher про HTML семантику и front-end архитектуру.
Далее мы рассмотрим две методологии CSS архитектуры. Оба метода созданы для ускорения процесса разработки крупных сайтов в больших командах. Они также хорошо подходят для команды из одного человека.
Автор: Tiffany Brown
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
