Utrzymywanie małych i uporządkowanych plików CSS jest bardzo ważne, zwłaszcza jeśli zamierzasz poświęcić trochę czasu na edycję swojej witryny w przyszłości (lub jeśli inni będą używać kodu, np. klienci). Pomocne jest to, że istnieje wiele różnych technik, które można wykorzystać, aby pomóc w organizacji i rozmiarze plików CSS, aby uczynić je bardziej usprawnionymi. Posiadanie bardziej usprawnionego CSS zaoszczędzi Ci czasu i stresu w dłuższej perspektywie, więc ważne jest, aby zrobić to dobrze. Po pierwsze, utrzymywanie pojedynczego arkusza stylów, zwykle o nazwie style.css, jest dobrym miejscem do rozpoczęcia organizacji CSS. Posiadanie pojedynczego arkusza stylów dla większości (jeśli nie wszystkich) Twojej witryny utrzymuje wszystko razem w jednym miejscu, co sprawia, że proces edycji jest bardziej usprawniony.
Koduj stylowo
Aby zachować przejrzystość plików CSS, ważne jest, aby zacząć od użycia dobrego edytora kodu, takiego jak TekstWrangler na komputerze Mac lub Notatnik++ w systemie Windows. Ma to szereg kluczowych zalet. Oprócz tego, że jest łatwy w użyciu, program taki jak TextWrangler koduje również kolorami różne części kodu, co pomaga w postępie kodowania. Jest to bardzo przydatne, aby upewnić się, że każdy zdefiniowany styl jest poprawnie napisany, ponieważ styl nie zmieni koloru, dopóki nie zostanie rozpoznany przez TextWrangler jako styl CSS. Karty to kolejna dobra funkcja TextWrangler, która pozwala na otwieranie więcej niż jednego pliku na raz, co ułatwia sprawdzanie krzyżowe. Aby jeszcze bardziej usprawnić pliki CSS, dobrym pomysłem jest ustalenie układu zestawu, który będzie używany we wszystkich arkuszach stylów CSS. Być może najczęściej stosowaną techniką jest zdefiniowanie identyfikatora lub klasy (odpowiednio za pomocą # lub .), a następnie otwartego nawiasu {, po którym następuje wcięta nowa linia, aby rozpocząć stylizację, w następujący sposób: #header { width:500px; height:250px; } Dzięki zastosowaniu tej powszechnie stosowanej techniki arkusz stylów będzie bardziej uporządkowany i łatwiejszy do kodowania. Poniższe techniki pomogą Ci zachować spójność układu we wszystkich plikach CSS.
Zorganizuj według lokalizacji
W przypadku każdej witryny liczba używanych identyfikatorów CSS i klas może łatwo osiągnąć dużą liczbę, dlatego ważne jest, aby arkusz stylów CSS był dobrze zorganizowany. Jedną z niezwykle przydatnych technik jest uporządkowanie identyfikatorów i klas według miejsca, w którym pojawiają się na samej stronie internetowej. Na przykład; umieszczenie stylu CSS dla nagłówka u góry arkusza stylów, a stylu dla stopki u dołu. Dzięki zachowaniu spójności we wszystkich kodowanych witrynach internetowych za każdym razem, gdy otwierasz utworzony arkusz stylów, będziesz dokładnie wiedział, gdzie szukać stylu, który chcesz edytować. Ponadto, aby jeszcze bardziej ułatwić organizację stylów, warto nazwać elementy oczywistymi nazwami, takimi jak Nagłówek, Stopka, Pasek boczny, Główna treść itp., co pozwoli Ci ustalić, do czego odnosi się każdy element stylu, co dodatkowo ułatwi organizację. Jeśli jednak elementy zmienią cel, upewnij się, że ich nazwy odzwierciedlają zmiany; umieszczenie elementu o nazwie Nagłówek na dole strony może stać się bardzo mylące i utrudnić porządkowanie według lokalizacji.
Komentarze CSS
Prowadzi to do używania komentarzy CSS w arkuszach stylów. Chociaż nie zawsze są używane, komentarze CSS są bardzo pomocne w rozróżnianiu różnych części arkusza stylów. Jeśli ustrukturyzowałeś arkusze stylów za pomocą stylów odnoszących się do nagłówka na górze i odwrotnie, możesz wykorzystać komentarze CSS do oznaczenia początku i końca różnych sekcji, takich jak nagłówek i stopka lub główne elementy treści. Używanie komentarzy CSS jest proste. W dowolnym miejscu arkusza stylów zacznij komentarz od /*, a następnie upewnij się, że zakończyłeś komentarz */. Co najważniejsze, wszystko w komentarzu, czy to kod, czy tekst, nie zostanie przeanalizowane przez przeglądarkę, co sprawia, że komentarze CSS są bardzo przydatne do pozostawiania notatek i opisów odnoszących się do różnych części arkusza stylów. Być może dwoma kolejnymi zastosowaniami komentarzy CSS mogłoby być pozostawianie komentarzy dla klientów, więc jeśli chcieliby oni w przyszłości dokonać dalszych edycji swojej witryny, mają przewodnik, który im pomoże. Mogą również istnieć różne style dla tego samego identyfikatora lub klasy, które chcesz zachować do potencjalnego użytku lub do testowania. Zamiast oznaczać identyfikatory i klasy cyfrą 2 na końcu, np. header2, aby zapobiec parsowaniu tego stylu, po prostu owiń to, co byłoby header2, w /* i */. Oprócz utrzymania arkusza stylów w większej organizacji, ponieważ użycie „techniki 2” może łatwo stać się bałaganem, technika ta pomaga również w tworzeniu różnych wersji stylów w arkuszu stylów w sposób niezakłócony, z łatwością ponownego wdrażania (kopiuj i wklej zamiast zmieniać numery i usuwać stare style). Jednak chociaż komentarze CSS są bardzo przydatne, ważne jest również, aby pamiętać o rozmiarze i długości arkusza stylów i odpowiednio je zrównoważyć. Komentarze nie powinny zajmować więcej miejsca niż sam CSS; powinny być krótkie i na temat. Ważne jest również, aby pamiętać o tym w odniesieniu do różnych wersji. Czy naprawdę potrzebujesz wszystkich wersji zapisanych w arkuszu stylów? Czy możesz zapisać duplikat arkusza stylów gdzie indziej? Posiadanie wielu wersji stylów w arkuszu stylów może być mylące, dlatego rozważenie alternatyw jest kluczowe, takie jak zapisywanie duplikatów plików.
Unikaj duplikacji
Gdy arkusz stylów jest ustrukturyzowany w sposób przystępny, można łatwo wyłapać niepotrzebne duplikaty w stylach. Ze względu na naturę CSS, identyfikatory i klasy automatycznie dziedziczą styl od swojego rodzica, co eliminuje potrzebę dublowania stylów. Być może najłatwiejszą techniką jest zdefiniowanie kilku kluczowych stylów na początku arkusza stylów. Definiowanie uniwersalnych stylów dla linków i tekstu jest pomocne i eliminuje potrzebę ciągłego definiowania stylów dla każdego identyfikatora i klasy. Warto zauważyć, że jest to również skuteczny sposób na utrzymanie spójnego stylu w całej witrynie i ma również pozytywny wpływ na zmniejszenie rozmiaru arkusza stylów. Korzystając z narzędzia takiego jak Inspektor przeglądarki Google Chrome, można zobaczyć, które style są dziedziczone i skąd, co dodatkowo pomaga w eliminacji niechcianych duplikatów w arkuszu stylów.
Użyj tego, czego potrzebujesz
Następnie, aby jeszcze bardziej usprawnić swój CSS, rozważ, jakie klasy CSS implementujesz. Czy musisz używać ich wszystkich? Łatwo jest dać się ponieść i zdefiniować klasy, których bezpośrednio nie potrzebujesz, ale myślisz, że możesz ich potrzebować w przyszłości; aby zachować prostotę, mały rozmiar i porządek arkusza stylów CSS, używaj tylko klas CSS, które są integralną częścią funkcjonowania Twojej witryny. Koduj tylko to, co jest potrzebne. Aby to osiągnąć, unikaj duplikowania stylów, jak wspomniano, i pamiętaj o usuwaniu nieużywanych stylów i tych, które nie są już istotne.
Wniosek
Stosując te proste techniki możesz tworzyć lepiej zorganizowane i mniejsze pliki CSS, po których łatwo się poruszać i które łatwo edytować zarówno teraz, jak i w przyszłości, zarówno dla siebie, jak i dla swoich klientów.
Masz jakieś świetne wskazówki, jak utrzymać porządek i usprawnić CSS? Daj nam znać w komentarzach!
