CSS или Cascading Style Sheets са индустрията на уеб дизайна, която е приета за добавяне на визуални стилове към даден сайт. С CSS можете да контролирате оформлението на страницата, цветовете, типографията, фоновото изображение и много други. По принцип, ако става въпрос за визуален стил, CSS е начинът да донесете тези стилове на уебсайта си.
Докато добавяте стилове на CSS към документ, може да забележите, че документът започва да става по-дълъг и по-дълъг. Дори малък сайт с само няколко страници може да завърши с доста голям CSS файл и много голям сайт с много и много страници с уникално съдържание може да има много големи CSS файлове. Това е комбинирано от отзивчиви сайтове, които имат много търсения на медиите, включени в стиловите листове, за да променят начина, по който визуализациите изглеждат и страницата се очертава за различни екрани.
Да, CSS файловете могат да се дължат. Това не е сериозен проблем, когато става дума за производителност на сайта и скорост на изтегляне, защото дори дълъг CSS файл вероятно ще бъде доста малък (тъй като всъщност е само текстов документ). И все пак всеки малък брой се брои, когато става въпрос за скоростта на страницата, така че ако можете да направите вашия стилов лист по-тънък, това е добра идея. Това е мястото, където "запетаята" може да дойде много удобно в стил лист!
Части и CSS
Вероятно сте се чудили каква е ролята на запетаята в синтаксиса на селектора на CSS. Както и в изреченията, запетаята носи яснота - не код - на сепараторите. Запетаята в селектора на CSS разделя множество селектори в рамките на същите стилове.
Например, нека да разгледаме някои CSS по-долу.
ти {цвят: червен; }td {цвят: червен; }p.red {цвят: червен; }div # firstred {цвят: червен; }
С този синтаксис казваш, че искаш тата тагове, TD маркери, параграфи с червения клас и маркера div с идентификационния номер, за да се получи червеният цвят на стила.
Това е напълно приемливо CSS, но има два сериозни недостатъка за писането му по този начин:
- В бъдеще, ако решите да промените цвета на шрифта на тези свойства на синьо, трябва да направите тази промяна четири пъти в стиловия лист.
- Добавя много допълнителни знаци към стиловия лист, от който не се нуждаете. Тези 4 стила може да не изглеждат като overkill, но ако продължавате да правите това в целия си стилов лист, линиите ще се добавят и този лист ще бъде много, много по-голям, отколкото трябва да бъде.
За да избегнете тези недостатъци и да рационализирате вашия CSS файл, ще опитаме да използваме запетаи.
Използване на команди за отделни селектори
Вместо да напишете 4 отделни CSS селектора и 4 правила, можете да комбинирате всички тези стилове в едно свойство на правило, като отделите отделните селектори със запетая. Ето как ще се направи това:
th, td, p.red, div # firstred {цвят: червен; }
Знакът за запетая основно действа като думата "и" в селектора. Така че това важи за tз маркери иTD маркери и маркери за параграфи с червения клас AND и раздела div с идентификатора firstred. Точно това имахме преди, но вместо да се нуждаят от 4 CSS правила, имаме едно правило с множество селектори. Това е, което запетаята прави в селектора, позволява да имаме няколко селектора в едно правило.
Този подход не само прави по-чисти, по-чисти CSS файлове, но и прави бъдещите актуализации много по-лесни. Сега, ако искате да промените цвета от червено в синьо, трябва само да направите промяната на едно място, вместо в оригиналните правила за стила 4, които имахме! Помислете за тези спестявания на време в целия CSS файл и можете да видите как това ще ви спести време и пространство в дългите руни!
Синтаксис вариация
Някои хора избират да направят CSS по-четлив, като отделят всеки селектор на собствената си линия, вместо да го напишат на един ред, както е посочено по-горе. Ето как ще се направи това:
тата,TD,p.red,Разделение # firstred{цвят: червен;}
Забележете, че поставите запетая след всеки селектор и след това използвайте "enter", за да прекъснете следващия селектор на собствената му линия. Не добавяте запетая след крайния селектор.
Чрез използването на запетаи между вашите селектори създавате по-компактен лист стил, който е по-лесен за актуализиране в бъдеще и който е по-лесен за четене днес!
Оригинална статия на Дженифър Кринин. Редактиран от Jeremy Girard на 5/8/17
