IT-Storm

Когда вы группируете селекторы CSS, вы применяете одни и те же стили к нескольким различным элементам, не повторяя стили в своём CSS файле. Вместо того, чтобы иметь два, три или более правила CSS, которые делают одно и то же (например, задают красный цвет чего-либо), вы используете одно правило CSS, которое выполняет ту же функцию. Секрет этой тактики повышения эффективности — запятая.

Как сгруппировать селекторы CSS ?

Чтобы сгруппировать селекторы CSS в таблице стилей, используйте запятые для разделения нескольких сгруппированных селекторов. В этом примере стиль влияет на элементы <p> и <div>:

div, p { color: #f00; }

В вышеуказанном контексте запятая означает «и», поэтому этот селектор применяется ко всем элементам абзаца <p>и всем элементам <div>. Если бы запятая отсутствовала, селектор бы применялся бы ко всем элементам абзаца <p>, которые являются дочерними элементами блоков <div>. Это другой тип селектора, поэтому запятая важна.

Вы можете сгруппировать селектор любой формы с любым другим селектором. В этом примере селектор класса группируется с селектором ID:

p.red, #sub { color: #f00; }

Этот стиль применяется к любому абзацу с атрибутом class="red" и любому элементу (поскольку вид не указан) с атрибутом id="sub".

Вы можете сгруппировать любое количество селекторов, включая селекторы, состоящие из отдельных слов, и составные (compound) селекторы. Этот пример включает четыре разных селектора:

p, .red, #sub, div a:link { color: #f00; }

Это правило CSS будет применяться к:

• Любому элементу абзаца <p>
• Любому элементу с атрибутом class="red"
• Любой элемент с атрибутом id="sub"
• Псевдокласс link с привязкой к элементу ссылки <a>

Этот последний селектор является составным селектором. Как показано, его легко комбинировать с другими селекторами в этом правиле CSS. Правило устанавливает цвет #f00 (красный) для этих четырех селекторов, что предпочтительнее, чем написание четырех отдельных селекторов для достижения того же результата.

Любой селектор можно сгруппировать!

Любые (допустимые) селекторы вы можете поместить в группу, и все элементы в документе, соответствующие этой группе, будут иметь одинаковый стиль на основе одного указанного (для этой группы селекторов) правила-стиля.
Некоторые дизайнеры предпочитают перечислять сгруппированные элементы в отдельных строках для удобочитаемости кода. Внешний вид на сайте и скорость загрузки остаются прежними. Например, вы можете объединить стили, разделенные запятыми, в одно свойство стиля в одной строке кода:

th, td, p.red, div#firstred { color: red; }

или вы можете перечислить селекторы и правило-стиля в отдельных строках для ясности:

th,
td,
p.red,
div#firstred
{
color: red;
}

Зачем группировать селекторы CSS?

Группировка селекторов CSS помогает минимизировать размер вашей таблицы стилей, чтобы она загружалась быстрее. Следует признать, что таблицы стилей не являются главными виновниками медленной загрузки; Файлы CSS — это текстовые файлы, поэтому даже очень длинные листы CSS крошечные по сравнению с неоптимизированными изображениями. Тем не менее, любая оптимизация помогает, и если вы можете уменьшить размер своего CSS и страницы загружаются быстрее, это хорошо.
Также, группировка селекторов значительно упрощает обслуживание сайта. Если вам нужно внести изменения, вы можете просто отредактировать одно правило CSS вместо нескольких. Такой подход экономит время и нервы.

Итог: группировка селекторов CSS повышает эффективность, продуктивность, организованность, а в некоторых случаях даже скорость загрузки.