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