Идентификатор и имя класса
Всегда используйте идентификаторы и имена классов, которые отражают назначение и использование элемента, или другие распространенные имена. Вместо выступлений и малоизвестных имен.
Следует отдавать предпочтение конкретным именам, отражающим назначение элемента, поскольку они наиболее понятны и менее подвержены изменениям.
Общие имена — это просто альтернативные имена для нескольких элементов. Они одинаковы для родственных элементов и не имеют особого значения.
Выделяйте их так, чтобы они имели особое значение и часто были нужны в качестве «помощников».
Хотя семантика имен классов и идентификаторов не имеет практического значения для компьютерного анализа,
Семантические имена обычно являются правильным выбором, поскольку они представляют информацию, не накладывающую выразительных ограничений.
Не рекомендуется
.fw-800 {
вес шрифта: 800;
}
.красный {
цвет: красный;
}рекомендовать
.тяжелый {
вес шрифта: 800;
}
.важный {
цвет: красный;
} Разумное избегание удостоверений личности
Обычно идентификаторы не следует применять к стилям.
Стили идентификаторов нельзя использовать повторно, и идентификатор можно использовать только один раз на странице.
Единственное эффективное использование идентификаторов — определение положения на веб-странице или на всем сайте.
Тем не менее, вам всегда следует использовать class вместо id, если только вы не используете его только один раз.
Не рекомендуется
#content .title {
размер шрифта: 2em;
}рекомендовать
.content .title {
размер шрифта: 2em;
} Еще один аргумент против использования идентификаторов заключается в том, что селекторы, содержащие идентификаторы, имеют высокий вес.
Селектор, содержащий только один идентификатор, имеет больший вес, чем селектор, содержащий 1000 имен классов, что делает его странным.
// Этот селектор имеет больший вес, чем следующий #content .title {
цвет: красный;
}
// чем этот селектор!
html body div.content.news-content .title.content-title.important {
цвет: синий;
} Избегайте имен тегов в селекторах CSS
При создании селекторов следует использовать ясные, точные и семантические имена классов. Не используйте селекторы тегов. Его легче поддерживать, если вас интересуют только имена классов, а не элементы кода.
С точки зрения разделения HTML-теги/семантика не должны размещаться на уровне представления.
Это может быть упорядоченный список, который необходимо изменить на неупорядоченный, или элемент div, который необходимо преобразовать в статью.
Если вы используете только осмысленные имена классов,
А без использования селекторов элементов вам нужно будет только изменить разметку HTML, не меняя CSS.
Не рекомендуется
div.content > header.content-header > h2.title {
размер шрифта: 2em;
}рекомендовать
.content > .content-header > .title {
размер шрифта: 2em;
} как можно точнее
Многие интерфейсные разработчики не используют прямые подселекторы при написании цепочек селекторов (примечание: разница между прямыми подселекторами и селекторами-потомками).
Иногда это может привести к болезненным проблемам с дизайном, а иногда и к снижению производительности.
Однако в любом случае это очень плохая практика.
Если вы не пишете очень общий селектор, который должен соответствовать концу DOM, вам всегда следует учитывать прямые подселекторы.
Рассмотрим следующий DOM:
<article class="content news-content"> <span class="title">Новостное мероприятие</span> <div class="content-body"> <div class="title content-title"> Проверьте это </div> <p>Это новостная статья</p> <div class="тизер"> <div class="title">Купить это</div> <div class="teaser-content">Ура!</div> </div> </div> </статья>
Следующий CSS будет применен ко всем трем элементам с классом заголовка.
Затем, чтобы разрешить различные стили в классе заголовка в классе контента и классе заголовка в классе тизера, потребуются более точные селекторы, чтобы снова переписать свои стили.
Не рекомендуется
.content .title {
размер шрифта: 2rem;
}рекомендовать
.content > .title {
размер шрифта: 2rem;
}
.content > .content-body > .title {
размер шрифта: 1,5рем;
}
.content > .content-body > .teaser > .title {
размер шрифта: 1.2rem;
} атрибут сокращения
CSS предоставляет различные сокращенные свойства (например, шрифт), которые следует использовать всякий раз, когда это возможно, даже если установлено только одно значение.
Использование сокращенных атрибутов полезно для повышения эффективности и читаемости кода.
Не рекомендуется
CSS-код:
стиль границы-топа: нет; семейство шрифтов: palatino, georgia, serif; размер шрифта: 100%; высота строки: 1,6; отступ-дно: 2em; отступ слева: 1em; отступ справа: 1em; отступ-верх: 0;
рекомендовать
CSS-код:
граница-верх: 0; шрифт: 100%/1,6 палатино, грузия, с засечками; отступ: 0 1em 2em;
0 и единицы
Опустите единицы измерения после значения «0». Не используйте единицы измерения после значения 0, если оно не указано.
Не рекомендуется
CSS-код:
отступ-дно: 0 пикселей; маржа: 0em;
рекомендовать
CSS-код:
отступ-дно: 0; маржа: 0;
Шестнадцатеричная запись
По возможности используйте трехзначное шестнадцатеричное представление.
Значения цвета допускают такое представление:
Трехзначное шестнадцатеричное представление короче.
Всегда используйте шестнадцатеричные числа в нижнем регистре.
Не рекомендуется
цвет: #FF33AA;
рекомендовать
цвет: #f3a;
Разделитель между идентификатором и именем класса
Используйте дефис (тире), чтобы разделить слова в идентификаторе и названии класса. Чтобы улучшить понимание урока, не используйте для соединения слов и сокращений в селекторе никаких символов (в том числе и никаких), кроме дефисов (тире).
Кроме того, стандартный селектор атрибутов по умолчанию распознает дефисы (тире) как разделители слов для [атрибут|=значение].
Поэтому лучше использовать дефисы в качестве разделителей.
Не рекомендуется
.demoimage {}
.error_status {} рекомендовать
#идентификатор видео {}
.ads-образец {}Хаки
Избегайте обнаружения пользовательского агента и «хаков» CSS — сначала попробуйте другой подход. Различия в стилях легко устраняются с помощью обнаружения пользовательского агента или специальных фильтров CSS, обходных путей и хаков. Оба метода следует рассматривать как последнее средство для достижения и поддержания эффективной и управляемой базы кода. Другими словами, обнаружение пользовательских агентов и взломы в долгосрочной перспективе.
Навредит проекту, поскольку проекты всегда должны идти по пути наименьшего сопротивления. Тем не менее, обнаружение пользовательских агентов и взломы могут легко использоваться слишком часто в будущем.
Порядок декларирования
Это примерное описание порядка, в котором свойства CSS записываются в селекторе. Это важно для обеспечения лучшей читаемости и сканируемости.
Лучше всего следовать следующей последовательности (которая должна соответствовать порядку, указанному в таблице ниже):
Структурные свойства:
отображать
положение, левое, верхнее, правое и т. д.
переполнение, плавание, очистка и т. д.
поле, отступ
Выразительные свойства:
фон, граница и т. д.
шрифт, текст
Не рекомендуется
.коробка {
семейство шрифтов: «Arial», без засечек;
граница: 3 пикселя, сплошная #ddd;
осталось: 30%;
позиция: абсолютная;
преобразование текста: верхний регистр;
цвет фона: #eee;
правильно: 30%;
дисплей: блокировать;
размер шрифта: 1,5рем;
переполнение: скрыто;
отступ: 1em;
маржа: 1em;
}рекомендовать
.коробка {
дисплей: блок;
позиция: абсолютная;
осталось: 30%;
правильно: 30%;
переполнение: скрыто;
маржа: 1em;
отступ: 1em;
цвет фона: #eee;
граница: 3 пикселя, сплошная #ddd;
семейство шрифтов: «Arial», без засечек;
размер шрифта: 1,5рем;
преобразование текста: верхний регистр;
}конец заявления
Чтобы обеспечить согласованность и расширяемость, каждый оператор должен заканчиваться точкой с запятой и переноситься на новую строку.
Не рекомендуется
CSS-код:
.тест {
дисплей: высота блока: 100 пикселей;
}рекомендовать
CSS-код:
.тест {
дисплей: блок;
высота: 100 пикселей;
}Конец имени атрибута
Используйте пробел после двоеточия в имени свойства. По соображениям последовательности,
Всегда используйте пробел между атрибутом и значением (но не используйте пробел между атрибутом и двоеточием).
Не рекомендуется
CSS-код:
ч3 {
вес шрифта: жирный;
}рекомендовать
CSS-код:
ч3 {
начертание шрифта: жирный;
}Разделение селекторов и объявлений
Всегда используйте новую строку для каждого объявления селектора и свойства.
Не рекомендуется
CSS-код:
а: фокус, а: активный {
позиция: относительная; сверху: 1 пиксель;
}рекомендовать
CSS-код:
ч1,
ч2,
ч3 {
вес шрифта: нормальный;
высота строки: 1,2;
}Разделение правил
Правила всегда разделяются пустой строкой (двойной перевод строки).
рекомендовать
CSS-код:
html {
фон: #fff;
}
тело {
маржа: авто;
ширина: 50%;
}CSS-кавычки
Заключайте селекторы атрибутов или значения атрибутов в двойные кавычки ("") вместо одинарных (").
Не используйте кавычки для значений URI (url()).
Не рекомендуется
CSS-код:
@import URL('//cdn.com/foundation.css');
html {
семейство шрифтов: «open sans», arial, без засечек;
}
тело: после {
содержание: «пауза»;
}рекомендовать
CSS-код:
@import URL(//cdn.com/foundation.css);
html {
семейство шрифтов: «open sans», arial, sans-serif;
}
тело: после {
содержание: «пауза»;
}Вложенность селекторов (SCSS)
В Sass вы можете вкладывать селекторы, что сделает код чище и читабельнее. Вложите все селекторы, но старайтесь избегать вложения селекторов без какого-либо содержимого.
Если вам нужно указать некоторые атрибуты стиля для дочерних элементов, а родительский элемент не будет иметь атрибутов стиля,
Можно использовать обычные цепочки селекторов CSS.
Это не позволит вашему сценарию выглядеть слишком сложным.
Не рекомендуется
CSS-код:
// Плохой пример, поскольку вообще не используется вложенность
.содержание {
дисплей: блок;
}
.content > .новостная статья > .title {
размер шрифта: 1,2em;
}Не рекомендуется
CSS-код:
// Лучше использовать вложенность, но не во всех случаях
// Избегайте вложенности при отсутствии атрибутов и вместо этого используйте цепочки селекторов
.содержание {
дисплей: блок;
> .news-статья {
> .title {
размер шрифта: 1,2em;
}
}
}рекомендовать
CSS-код:
// В этом примере используется лучший подход при вложении, но там, где это возможно, используются цепочки селекторов
.содержание {
дисплей: блок;
> .новостная статья > .title {
размер шрифта: 1,2em;
}
}Введение пустых строк во вложении (SCSS)
Оставьте пустую строку между вложенными селекторами и свойствами CSS.
Не рекомендуется
CSS-код:
.содержание {
дисплей: блок;
> .news-статья {
цвет фона: #eee;
> .title {
размер шрифта: 1.2em;
}
> .article-footnote {
размер шрифта: 0,8em;
}
}
}рекомендовать
CSS-код:
.содержание {
дисплей: блок;
> .news-статья {
цвет фона: #eee;
> .title {
размер шрифта: 1,2em;
}
> .article-footnote {
размер шрифта: 0,8em;
}
}
}Контекстный медиа-запрос (SCSS)
В Sass вы также можете использовать контекстные медиа-запросы при вложении селекторов.
В Sass вы можете использовать медиа-запросы на любом уровне вложенности.
Результирующий CSS будет преобразован так, что медиа-запрос будет отображаться как завернутый селектор.
Эта технология очень удобна,
Помогает сохранить контекст, к которому принадлежит медиа-запрос.
Первый подход позволяет вам сначала написать стили для мобильных устройств, а затем использовать контекстные медиа-запросы для предоставления стилей для настольных компьютеров там, где они вам нужны.
Не рекомендуется
CSS-код:
// Этот первый пример для мобильных устройств выглядит как простой CSS, где повторяется вся структура SCSS.
// внизу медиа-запроса. Это чревато ошибками и усложняет обслуживание, поскольку его не так просто связать.
// контент в медиа-запросе к контенту в верхней части (мобильный стиль)
.content-страница {
размер шрифта: 1.2rem;
> .main {
цвет фона: белый дым;
> .latest-news {
отступ: 1рем;
> .news-статья {
отступ: 1рем;
> .title {
размер шрифта: 2rem;
}
}
}
> .content {
маржа-верх: 2рем;
отступ: 1рем;
}
}
> .page-footer {
маржа-верх: 2рем;
размер шрифта: 1rem;
}
}
@media screen и (минимальная ширина: 641 пикселей) {
.content-страница {
размер шрифта: 1rem;
> .main > .latest-news > .news-article > .title {
размер шрифта: 3rem;
}
> .page-footer {
размер шрифта: 0,8рем;
}
}
}рекомендовать
CSS-код:
// Это тот же пример, что и выше, но здесь мы используем контекстные медиа-запросы, чтобы разместить разные стили
// для разных медиа в правильном контексте.
.content-страница {
размер шрифта: 1.2rem;
@media screen и (минимальная ширина: 641 пикселей) {
размер шрифта: 1rem;
}
> .main {
цвет фона: белый дым;
> .latest-news {
отступ: 1рем;
> .news-статья {
отступ: 1рем;
> .title {
размер шрифта: 2rem;
@media screen и (минимальная ширина: 641 пикселей) {
размер шрифта: 3rem;
}
}
}
}
> .content {
маржа-верх: 2рем;
отступ: 1рем;
}
}
> .page-footer {
маржа-верх: 2рем;
размер шрифта: 1rem;
@media screen и (минимальная ширина: 641 пикселей) {
размер шрифта: 0,8рем;
}
}
}Вложенный порядок и родительские селекторы (SCSS)
При использовании функции вложения Sass,
Главное, чтобы был четкий порядок размещения.
Ниже приведен порядок, который должен иметь блок SCSS.
Атрибуты стиля текущего селектора <br/>Селектор псевдокласса родительского селектора (:first-letter, :hover, :active и т. д.)
Элементы псевдокласса (:before и:after)
Стиль объявления родительского селектора (.selected, .active, .enlarged и т. д.)
Используйте подселектор контекстных медиа-запросов Sass в качестве финальной части.
Следующий пример должен проиллюстрировать, как это упорядочение обеспечит четкую структуру при использовании родительского селектора Sass.
Рекомендуется
CSS-код:
.product-тизер {
// 1. Атрибуты стиля
отображение: встроенный блок;
отступ: 1рем;
цвет фона: белый дым;
цвет: серый;
// 2. Псевдоселекторы с родительским селектором
&:наведите {
цвет: черный;
}
// 3. Псевдоэлементы с родительским селектором
&:до {
содержание: "";
дисплей: блок;
border-top: 1 пиксель, сплошной серый;
}
&:после {
содержание: "";
дисплей: блок;
border-top: 1 пиксель, сплошной серый;
}
// 4. Классы состояний с родительским селектором
&.активный {
цвет фона: розовый;
цвет: красный;
// 4.2. Псевдоселектор в селекторе класса состояния
&:наведите {
цвет: темно-красный;
}
}
// 5. Контекстные медиа-запросы
@media screen и (максимальная ширина: 640 пикселей) {
дисплей: блок;
размер шрифта: 2em;
}
// 6. Подселекторы
> .content > .title {
размер шрифта: 1,2em;
// 6.5. Контекстные медиа-запросы в подселекторе
@media screen и (максимальная ширина: 640 пикселей) {
межбуквенный интервал: 0,2em;
преобразование текста: верхний регистр;
}
}
}