frycu.com

Pisze w CSS-ie już 3 lata i dalej jak otwieram pustą stronę i zaczynam pisać, uczę się czegoś nowego.

Dla tych co zaczynają swoją przygodę, jak i dla ekspertów którzy szukają kilku nowych tricków, przygotowałem małe zestawienie rzeczy które ułatwiają mi utrzymanie kodu w czystości (tak jakby:P).

1. Pisz tak aby twój kod był łatwy w czytaniu.

W poszukiwaniu najbardziej optymalnego kodu, kiedyś natrafiłem na coś takiego (i trzymam się tego do teraz):

h1 {}
h1#logo { font-size: 2em; color: #000; }

h2 {}
h2.title { font-size: 1.8em; font-weight: normal; }

Szybki skan kodu CSS dla różnych nagłówków daje nam wszelkie potrzebne informacje, a dodatkowo nie wymaga od nas męczenia się z nieczytelnym kodem. Taki kod jest także wygodny gdy pracujesz nad dużym projektem razem z kilkoma osobami i używasz takich samych tagów (np. h2) w wielu miejscach, więc możesz sobie wystylizować każdy oddzielnie, nie martwiąc się że jakieś inne klasy wpłyną na styl twojego nagłówka.

Tą samą technikę można stosować do paragrafów, anchorów i wszelkich multiklasowych tagów.

2. Grupuj kod w bloki.

Może to być oczywiste dla niektórych z was, ale często jak oglądam czyjś kod CSS nie jest on podzielony na “sekcje”. Jest o wiele łatwiej pracować na takim kodzie tygodnie, miesiące, a nawet lata później. Nawet łatwiej Ci będzie znaleźć klasy i elementy które chcesz zmienić.

Tak zazwyczaj dziele swojego CSS-a:

/* Structure */

Tu wrzucam główną strukturę serwisu, divy i klasy.

/* Typography */

Tutaj wymieniam wszystkie paragrafy, nagłówki i to co związane z definicjami czcionek (pogrubienie, rozmiar, itd.)

/* Links */

Jak sama nazwa wskazuje, wszelkie definicje anchor-ów.

/* Lists, images, etc. */

Box przeznaczony na listy, obrazki i wszystko co nie zmieściło się w poprzednich kategoriach.

Jeśli natomiast stworzyliście jakieś skomplikowane menu, to proponuję stworzyć dodatkowy box właśnie na to menu. Wszystkie nazwy pisze po angielsku, bo nigdy nie wiadomo kto czyta Twój kod :)

3. Przestań używać tak dużo div-ów!!

Temat poruszany przez wielu programistów i świrów czystości kodu. Uważam, że nie ma nic złego w używaniu ich tam gdzie jest to konieczne, ale jak ktoś nadaje styl nagłówkowi za pomocą div-a, zamiast użyć do tego tagów nagłówka to nawet mnie na twarzy pojawia się malutki uśmieszek. Spróbujcie przy tworzeniu stron użyć małych tagów lub span ułatwi wam to życie.

4. Nadaj styl wszystkiemu na raz.

Złapałem się na tym, że w każdy element wkładałem “margin: 0; padding: 0;”. Przypomniałem sobie jak jeden mój kumpel używał “*” do nadania odpowiedniego stylu wszystkim elementom na raz. Dlatego stwierdziłem, że nie ma sensu wszędzie definiować to na nowo, jak mogę zrobić to w jednym miejscu.

To naprawdę proste:) 

* { margin: 0; padding: 0; }

Teraz możesz zdefiniować margin i padding tam gdzie naprawdę tego potrzebujesz!.