CSS, lub Kaskadowe arkusze stylów, to akceptowany w branży projektowania stron internetowych sposób dodawania stylów wizualnych do witryny. Dzięki CSS możesz kontrolować układ strony, kolory, typografia, obraz tła i wiele więcej. Zasadniczo, jeśli jest to styl wizualny, CSS jest sposobem na wprowadzenie tych stylów do Twojej witryny.
W miarę dodawania stylów CSS do dokumentu możesz zauważyć, że dokument zaczyna się wydłużać. Nawet mała witryna z zaledwie kilkoma stronami może skończyć z sporym plikiem CSS - a bardzo duża witryna z wieloma stronami o unikalnej treści może mieć bardzo duże pliki CSS. Jest to spotęgowane przez responsywne witryny które mają dużo zapytania medialne zawarte w arkuszach stylów, aby zmienić wygląd wizualizacji i układ strony na różnych ekranach.
Tak, pliki CSS mogą być długie. Nie jest to duży problem, jeśli chodzi o wydajność strony i prędkość pobierania, ponieważ nawet długi plik CSS może być dość mały (ponieważ tak naprawdę jest to tylko dokument tekstowy). Mimo to, jeśli chodzi o szybkość strony, liczy się każdy szczegół, więc jeśli możesz zmniejszyć rozmiar arkusza stylów, jest to dobry pomysł. W tym miejscu „przecinek” może się bardzo przydać w 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 zapewnia przejrzystość — a nie kod — separatorom. Przecinek w a Selektor CSS separuje wiele selektorów w tych samych stylach.
Na przykład spójrzmy na niektóre CSS poniżej.
th { kolor: czerwony; }
td { kolor: czerwony; }
p.czerwony { kolor: czerwony; }
div#firstred { kolor: czerwony; }
W tej składni mówisz, że chcesz ten tagi, td znaczniki, znaczniki akapitu z klasą czerwony i znacznik div z identyfikatorem firstred, wszystkie mają mieć kolor stylu czerwony.
Jest to całkowicie akceptowalny CSS, ale pisanie go w ten sposób ma dwie istotne wady:
- W przyszłości, jeśli zdecydujesz się zmienić kolor czcionki tych właściwości na niebieski, musisz wprowadzić tę zmianę cztery razy w swoim arkuszu stylów.
- Dodaje do arkusza stylów wiele dodatkowych znakó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 się sumują i arkusz będzie znacznie większy niż powinien.
Aby uniknąć tych wad i usprawnić 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 można to zrobić:
th, td, p.red, div#firstred { kolor: czerwony; }
Znak przecinka zasadniczo działa jak słowo „lub” w selektorze. Więc dotyczy to ten tagi LUB td tagi LUB tagi akapitu z klasą czerwony LUB znacznikiem div o identyfikatorze firstred. To jest dokładnie to, co mieliśmy 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 nie tylko zapewnia szczuplejsze, czystsze pliki CSS, ale także znacznie ułatwia przyszłe aktualizacje. Teraz, jeśli chcesz zmienić kolor z czerwonego na niebieski, musisz dokonać zmiany tylko w jednym miejscu, a nie w ramach oryginalnych 4 reguł stylu, które mieliśmy! Pomyśl o tych oszczędnościach czasu w całym pliku CSS, a zobaczysz, jak na dłuższą metę zaoszczędzi to zarówno czas, jak i miejsce!
Odmiana składni
Niektórzy ludzie decydują się na uczynienie CSS bardziej czytelnym, oddzielając każdy selektor w osobnym wierszu, zamiast pisać wszystko w jednym wierszu, jak powyżej. W ten sposób można by to zrobić:
th,
td,
p.czerwony,
div#firstred
{
kolor czerwony;
}
Zauważ, że umieszczasz przecinek po każdym selektorze, a następnie używasz klawisza „enter”, aby podzielić następny selektor na jego własny wiersz. NIE dodajesz przecinka po ostatnim selektorze.
Używając przecinków między selektorami, tworzysz więcej kompaktowy arkusz stylów łatwiej będzie ją aktualizować w przyszłości i łatwiej ją przeczytać dzisiaj!