CSS lub Cascading Style Sheets są branżą akceptowaną w branży projektowania witryn internetowych w celu dodawania stylów wizualnych do witryny. Dzięki CSS możesz kontrolować układ strony, kolory, typografię, obraz tła i wiele więcej. Zasadniczo, jeśli jest to styl wizualny, to CSS jest sposobem na przeniesienie tych stylów na twoją stronę.
Podczas dodawania stylów CSS do dokumentu możesz zauważyć, że dokument zaczyna być coraz dłuższy. Nawet niewielka witryna z zaledwie garstką stron może zawierać spory plik CSS - a bardzo duża strona z dużą ilością stron unikatowej zawartości może mieć bardzo duże pliki CSS. Jest to spotęgowane przez witryny responsywne, które mają wiele zapytań o media zawartych w arkuszach stylów, aby zmienić wygląd wyglądu i stronę dla różnych ekranów.
Tak, pliki CSS mogą być długie. Nie jest to poważny problem, jeśli chodzi o wydajność witryny i szybkość pobierania, ponieważ nawet długi plik CSS może być dość mały (ponieważ jest to po prostu dokument tekstowy). Mimo to, każdy mały element liczy się, jeśli chodzi o szybkość strony, więc jeśli możesz zrobić arkusz stylowy szczuplejszy, to jest dobry pomysł. To właśnie tutaj "przecinek" może się bardzo przydać w twoim arkuszu stylów!
Przecinki i CSS
Być może zastanawiałeś się, jaką rolę odgrywa przecinek w składni selektora CSS. Podobnie jak w zdaniach, przecinek wprowadza klarowność - nie kod - do separatorów. Przecinek w selektorze CSS oddziela wiele selektorów w obrębie tych samych stylów.
Na przykład spójrzmy na niektóre CSS poniżej.
th {color: red; }td {color: red; }p.red {color: red; }div # firstred {color: red; }
Dzięki tej składni mówisz, że chcesz th tagi, td tagi, znaczniki akapitu z klasą czerwoną i znacznik div z ID, wszystkie mają kolor czerwony.
Jest to całkowicie akceptowalne CSS, ale istnieją dwie istotne wady przy pisaniu tego w ten sposób:
- W przyszłości, jeśli zdecydujesz się zmienić kolor czcionki tych właściwości na niebieski, musisz dokonać tej zmiany czterokrotnie w arkuszu stylów.
- Dodaje wiele dodatkowych znaków do Twojego arkusza stylów, których nie potrzebujesz. Te 4 style mogą nie wydawać się przesadą, ale jeśli będziesz kontynuować to w całym arkuszu stylów, linie będą się sumować, a arkusz będzie znacznie większy, niż powinien.
Aby uniknąć tych wad i usprawnić Twój plik CSS, spróbujemy użyć przecinków.
Używanie przecinków do oddzielania selektorów
Zamiast pisać 4 oddzielne selektory CSS i 4 reguły, możesz połączyć wszystkie te style w jedną właściwość reguły, oddzielając poszczególne selektory przecinkiem. Oto, jak to zrobić:
th, td, p.red, div # firstred {color: red; }
Znak przecinka zasadniczo działa jak słowo "i" wewnątrz selektora. To dotyczy th znaczniki ANDtd znaczniki I znaczniki akapitu z klasą czerwoną ORAZ znacznik div z identyfikatorem początkowym. Tak było wcześniej, ale zamiast 4 reguł CSS mamy jedną regułę z wieloma selektorami. To właśnie robi przecinek w selektorze, pozwala nam mieć wiele selektorów w jednej regule.
Takie podejście pozwala nie tylko uzyskać szczuplejsze i czystsze pliki CSS, ale także znacznie ułatwia późniejsze aktualizacje. Teraz, jeśli chcesz zmienić kolor z czerwonego na niebieski, wystarczy dokonać zmiany w jednym miejscu, zamiast w oryginalnych 4 regułach stylu, które mieliśmy! Pomyśl o oszczędnościach czasu w całym pliku CSS i zobacz, jak to zaoszczędzi ci czasu i przestrzeni w długiej runie!
Zmiana składni
Niektóre osoby decydują się na uczynienie CSS bardziej czytelnym poprzez oddzielenie każdego selektora w jego własnym wierszu zamiast zapisywania go w jednym wierszu, jak wyżej. Oto, jak to zrobić:
th,td,p.red,div # firstred{kolor czerwony;}
Zauważ, że po każdym selektorze umieścisz przecinek, a następnie użyj "enter", aby podzielić kolejny selektor na własną linię. NIE dodajesz przecinka po ostatnim selektorze.
Używając przecinków między selektorami, tworzysz bardziej kompaktowy arkusz stylów, który łatwiej będzie aktualizować w przyszłości i który jest łatwiejszy do odczytania już dziś!
Oryginalny artykuł Jennifer Krynin. Edytowane przez Jeremy Girard w dniu 5/8/17
