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