10 najlepszych praktyk CSS w ulepszaniu Twojego kodu
Naprawdę łatwo jest się zastanowić, jak twój CSS stał się takim bałaganem.
Czasami jest to wynikiem niechlujnego kodowania od samego początku, czasami z powodu wielu hacków i zmian w czasie.
Niezależnie od przyczyny, nie musi tak być. Pisanie czystego, super-łatwego w zarządzaniu CSS jest proste, gdy zaczynasz od prawej stopy, a kod jest łatwiejszy do późniejszego utrzymania i edycji.
Oto 11 wskazówek dotyczących przyspieszenia procesu pisania CSS, który jest szczuplejszy, szybszy i mniej podatny na ból głowy.
1. Bądź zorganizowany
Podobnie jak wszystko inne, opłaca się zachować porządek. Zamiast przypadkowo upuszczać id i klasy w takiej kolejności, w jakiej myślą, użyj spójnej struktury.
Pomoże ci to zachować kaskadową część CSS i stworzy arkusz stylów, aby wykorzystać dziedziczenie stylu.
Najpierw zadeklaruj swoje najbardziej ogólne przedmioty, a następnie nie tak generyczne i tak dalej. Dzięki temu Twój CSS poprawnie odziedziczy atrybuty i znacznie ułatwi ci zastąpienie określonego stylu, gdy zajdzie taka potrzeba. Szybciej edytujesz swój CSS później, ponieważ będzie on następował po łatwej do odczytania, logicznej strukturze.
Użyj struktury, która najlepiej Ci odpowiada, jednocześnie mając na uwadze przyszłe zmiany i innych programistów.
- Resetuje i zastępuje
- Linki i typ
- Główny układ
- Wtórne struktury układu
- Formuj elementy
- Różne
2. Tytuł, data i znak
Daj znać innym, kto napisał Twój CSS, kiedy został napisany i do kogo się zwrócić, jeśli mają pytania na ten temat. Jest to szczególnie przydatne podczas projektowania szablonów lub motywów.
Poczekaj chwilę ... co to jest o kolorach kolorów ? Z biegiem lat odkryłem, że dodanie prostej listy popularnych kolorów używanych w moich arkuszach stylów jest niezwykle pomocne podczas początkowego tworzenia i późniejszego wprowadzania zmian.
Dzięki temu nie trzeba otwierać Photoshopa, aby wypróbować kolorów z projektu, ani sprawdzić kolorów w witrynie przewodnik po stylu (jeśli ma). Kiedy potrzebujesz kodu HTML dla tego konkretnego niebieskiego, po prostu przewiń w górę i skopiuj go.
3. Zachowaj bibliotekę szablonów
Po ustaleniu struktury, której chcesz użyć, usuń wszystko, co nie jest generyczne, i zapisz plik jako szablon CSS do późniejszego wykorzystania.
Możesz zapisać wiele wersji dla wielu zastosowań: układ dwukolumnowy, układ bloga, drukowanie, telefon komórkowy i tak dalej. Coda (edytor dla OSX) ma niesamowitą funkcję Clips, która pozwala ci to łatwo zrobić. Wiele innych edytorów ma podobną funkcję, ale nawet prosta partia plików tekstowych będzie dobrze działać.
To szalone, aby ponownie napisać każdy z arkuszy stylów od podstaw, zwłaszcza gdy używasz tych samych konwencji i metodologii w każdym z nich.
4. Użyj przydatnych konwencji nazewnictwa
Zauważysz powyżej, gdzie zadeklarowałem kilka identyfikatorów kolumn i nazwałem je col-alpha i col-beta. Dlaczego po prostu nie nazwać ich col-left i col-right? Pomyśl o przyszłych edycjach, zawsze.
W przyszłym roku może zajść konieczność przeprojektowania witryny i przesunięcia lewej kolumny w prawo. Nie powinieneś zmieniać nazwy elementu w kodzie HTML i zmieniać nazwy identyfikatora w swoim arkuszu stylów, aby zmienić jego pozycję.
Oczywiście, możesz po prostu zmienić położenie lewej kolumny po prawej stronie i zachować identyfikator jako # col-left, ale czy jest to mylące? Jeśli identyfikator mówi w lewo, należy oczekiwać, że zawsze będzie po lewej stronie. Nie pozostawia to wiele miejsca na późniejsze przenoszenie.
Jedną z głównych zalet CSS jest możliwość oddzielania stylów od treści. Możesz całkowicie przeprojektować swoją witrynę, modyfikując CSS bez dotykania kodu HTML. Więc nie ukrywaj swojego CSS, używając ograniczających nazw . Użyj bardziej uniwersalnych konwencji nazewnictwa i zachowaj spójność.
Opuść styl lub styl słów ze stylów i identyfikatorów. Klasa .link-blue albo zrobi dla ciebie więcej pracy, albo sprawi, że twój arkusz stylowy będzie naprawdę brudny, kiedy twój klient poprosi cię później o zmianę tych niebieskich linków na pomarańczowy.
Nazwij swoje elementy na podstawie tego, czym są, a nie jak wyglądają. Na przykład .comment-blue jest znacznie mniej uniwersalny niż .comment-beta, a .post-largefont jest bardziej ograniczony niż .post-title.
5. Hypeny zamiast podkreśleń
Starsze przeglądarki lubią wstydzić się z podkreśleniami w CSS lub w ogóle ich nie obsługują. Aby uzyskać lepszą kompatybilność wsteczną, należy zamiast tego używać nawiasu. Użyj # col-alpha zamiast #col_alpha.
6. Nie powtarzaj się
Użyj ponownie atrybutów, gdy tylko jest to możliwe, grupując elementy, zamiast deklarować style ponownie. Jeśli twoje elementy h1 i h2 używają tego samego rozmiaru czcionki, koloru i marginesów, podziel je za pomocą przecinka.
To:
Powinieneś także używać skrótów, kiedy to tylko możliwe. Zawsze szukaj okazji do grupowania elementów i używania skrótów deklaracji.
Możesz wykonać to wszystko:
tylko z tym:
Bardzo ważne jest, aby zrozumieć kolejność, w której CSS interpretuje następujące skróty: górny, prawy, dolny, lewy. Wielki okrąg zgodny z ruchem wskazówek zegara, zaczynający się w południe.
Jeśli twoje górne i dolne lub lewe i prawe atrybuty są takie same, musisz użyć tylko dwóch:
Ustawia górny i dolny margines na 1em, a lewy i prawy margines na 0.
7. Zoptymalizuj pod kątem lekkich arkuszy stylów
Korzystając z powyższych wskazówek, możesz naprawdę zmniejszyć rozmiar swoich arkuszy stylów. Mniejsze ładunki są szybsze, a mniejsze łatwiejsze w utrzymaniu i aktualizacji.
Wytnij to, czego nie potrzebujesz i skonsoliduj, gdzie to możliwe, grupując. Zachowaj ostrożność również podczas korzystania z konserwowanych frameworków CSS. Prawdopodobnie odziedziczysz masę, która nie będzie używana.
Kolejna szybka wskazówka dla cienkiego CSS: nie musisz określać jednostki miary przy zerowym użyciu. Jeśli margines jest ustawiony na 0, nie musisz mówić 0px lub 0em. Zero jest zerowe niezależnie od jednostki miary, a CSS to rozumie.
8. Napisz swoją bazę dla Gecko, a następnie wybierz dla Webkita i IE
Oszczędzaj sobie na rozwiązywaniu problemów związanych z bólem głowy i napisz najpierw CSS dla przeglądarek Gecko (Firefox, Mozilla, Netscape, Flock, Camino). Jeśli Twój CSS działa poprawnie z Gecko, jest znacznie bardziej wolny od problemów w Webkit (Safari, Chrome) i Internet Explorer.
9. Sprawdź poprawność
Zrobić użytek z Darmowy walidator CSS W3C . Jeśli utkniesz i twój układ nie robi tego, co chcesz, to weryfikator CSS będzie dużą pomocą w wskazywaniu błędów.
10. Zachowaj porządek w domu
Oddziel kod CSS od przeglądarki do własnego arkusza stylów i dołącz w razie potrzeby do JavaScript, kodu po stronie serwera lub komentarze warunkowe . Użyj tej metody, aby uniknąć brudnych włamań CSS w głównych arkuszach stylów. Dzięki temu Twój podstawowy CSS będzie czysty i łatwy w zarządzaniu.
Napisany specjalnie dla WDD przez Jeffa Couturiera
Czy stosujesz te metody podczas kodowania swoich stron internetowych? Jakie inne techniki wykorzystujesz do tworzenia lepszego kodu?