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