Когда вы группируете селекторы CSS, вы применяете одни и те же стили к нескольким различным элементам, не повторяя стили в вашей таблице стилей. Вместо двух, трех или более правил CSS, которые выполняют одно и то же (например, задают красный цвет чего-либо), вы используете одно правило CSS, которое выполняет то же самое. Секрет этой тактики повышения эффективности - запятая.
Как сгруппировать селекторы CSS
Чтобы сгруппировать селекторы CSS в таблице стилей, используйте запятые для разделения нескольких сгруппированных селекторов в стиле. В этом примере стиль влияет на элементы p и div:
div, p {цвет: # f00; }
В этом контексте запятая означает «и», поэтому этот селектор применяется ко всем элементам абзаца и всем элементам разделения. Если бы запятая отсутствовала, селектор вместо этого применил бы ко всем элементам абзаца, которые являются дочерними элементами подразделения. Это другой селектор, поэтому важна запятая.
Вы можете сгруппировать любую форму селектора с любым другим селектором. В этом примере селектор класса группируется с селектором идентификатора:
p.red, #sub {color: # f00; }
Этот стиль применяется к любому абзацу с атрибутом класса красный и любой элемент (поскольку тип не указан) с атрибутом ID равным суб.
Вы можете сгруппировать любое количество селекторов, включая селекторы, состоящие из отдельных слов, и составные селекторы. Этот пример включает четыре разных селектора:
p, .red, #sub, div a: link {цвет: # f00; }
Это правило CSS будет применяться к:
- Любой элемент абзаца
- Любой элемент класса красный
- Любой элемент с идентификатором суб
- В ссылка на сайт псевдокласс элементов привязки, которые являются потомками подразделения.
Последний селектор - составной селектор. Как показано, его легко комбинировать с другими селекторами в этом правиле CSS. Правило устанавливает цвет # f00 (красный) на этих четырех селекторах, что предпочтительнее писать четыре отдельных селектора для достижения того же результата.
Любой селектор можно сгруппировать
Вы можете поместить любой допустимый селектор в группу, и все элементы в документе, которые соответствуют всем сгруппированным элементам, будут иметь один и тот же стиль на основе этого свойства стиля.
Некоторые дизайнеры предпочитают перечислять сгруппированные элементы на отдельных строках для удобочитаемости в коде. Внешний вид на сайте и скорость загрузки остались прежними. Например, вы можете объединить стили, разделенные запятыми, в одно свойство стиля в одной строке кода:
th, td, p.red, div # firstred {цвет: красный; }
или вы можете перечислить стили в отдельных строках для ясности:
th,
тд,
p.red,
div # firstred
{
красный цвет;
}
Зачем группировать селекторы CSS?
Группирование селекторов CSS помогает минимизировать размер вашей таблицы стилей, чтобы она загружалась быстрее. Следует признать, что таблицы стилей не являются основными виновниками медленной загрузки; Файлы CSS - это текстовые файлы, поэтому даже очень длинные листы CSS крошечные по сравнению с неоптимизированными изображениями. Тем не менее, каждый бит оптимизации помогает, и если вы можете уменьшить размер своего CSS и загружать страницы намного быстрее, это хорошо.
Селекторы группирования также значительно упрощают обслуживание сайта. Если вам нужно внести изменения, вы можете просто отредактировать одно правило CSS вместо нескольких. Такой подход экономит время и нервы.
Итог: группирование селекторов CSS повышает эффективность, продуктивность, организованность и, в некоторых случаях, даже скорость загрузки.