Роль запятой в синтаксисе селектора CSS

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

Добавляя стили CSS в документ, вы можете заметить, что документ начинает становиться все длиннее и длиннее. Даже небольшой сайт, содержащий всего несколько страниц, может получить значительный CSS-файл, а очень большой сайт с большим и большим количеством страниц уникального контента может иметь очень большие CSS-файлы. Это усугубляется адаптивными сайтами, которые содержат множество медиа-запросов, включенных в таблицы стилей, чтобы изменить внешний вид визуальных элементов и расположение страницы на разных экранах. 

Да, CSS-файлы могут быть длинными. Это не является серьезной проблемой, когда речь идет о производительности сайта и скорости загрузки, потому что даже длинный CSS-файл, вероятно, будет довольно маленьким (поскольку на самом деле это просто текстовый документ). Тем не менее, каждый бит имеет значение, когда дело доходит до скорости страницы, поэтому, если вы можете сделать свою таблицу стилей более тонкой, это хорошая идея. Вот где «запятая» может оказаться очень полезной в вашей таблице стилей!

Запятые и CSS

Вы, возможно, задавались вопросом, какую роль играет запятая в синтаксисе селектора CSS. Как и в предложениях, запятая вносит ясность, а не код, в разделители. Запятая в селекторе CSS разделяет несколько селекторов в пределах одного и того же стиля.

Например, давайте посмотрим на некоторые CSS ниже.

th {цвет: красный; }
тд {цвет: красный; }
p.red {цвет: красный; }
div # firstred {color: red; } 

С этим синтаксисом вы говорите, что хотите го теги тд теги, теги абзаца с красным цветом класса и тег div с идентификатором firstred all, чтобы иметь красный цвет стиля.

Это вполне приемлемый CSS, но есть два существенных недостатка при написании этого:

• В будущем, если вы решите изменить цвет шрифта этих свойств на синий, вы должны будете сделать это изменение четыре раза в своей таблице стилей.
• Он добавляет много дополнительных символов в вашу таблицу стилей, которые вам не нужны. Эти 4 стиля могут не показаться излишними, но если вы продолжите делать это для всей таблицы стилей, строки будут складываться, и эта таблица будет намного, намного больше, чем нужно.

Чтобы избежать этих недостатков и упростить ваш CSS-файл, мы попробуем использовать запятые.

Использование запятых для разделения селекторов

Вместо того, чтобы писать 4 отдельных селектора CSS и 4 правила, вы можете объединить все эти стили в одно свойство правила, разделяя отдельные селекторы запятой. Вот как это будет сделано:

th, td, p.red, div # firstred {цвет: красный; } 

Символ запятой в основном действует как слово «или» внутри селектора. Так что это относится к го теги ИЛИ тд теги ИЛИ теги абзаца с классом red ИЛИ тег div с идентификатором firstred. Это именно то, что у нас было раньше, но вместо 4-х CSS-правил у нас есть одно правило с несколькими селекторами. Это то, что делает запятая в селекторе, это позволяет нам иметь несколько селекторов в одном правиле.

Этот подход не только делает более компактные и чистые файлы CSS, он также значительно облегчает будущие обновления. Теперь, если вы хотите изменить цвет с красного на синий, вам нужно будет сделать это только в одном месте, а не в оригинальных 4 правилах стиля, которые у нас были! Подумайте об экономии времени по всему файлу CSS, и вы увидите, как это сэкономит вам время и пространство в долгосрочной перспективе!

Синтаксическая вариация

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

го,
тд,
p.red,
DIV # firstred
{
красный цвет;
} 

Обратите внимание, что вы ставите запятую после каждого селектора и затем используете «ввод», чтобы разбить следующий селектор на его собственную строку. Вы НЕ добавляете запятую после последнего селектора.

Используя запятые между селекторами, вы создаете более компактную таблицу стилей, которую легче обновлять в будущем, и которую легче читать сегодня!