[CSS] 15 nawyków, które powinien mieć każdy webmaster tworzący style w CSS

W dzisiejszym artykule postanowiłem opisać nawyki, które powinien mieć każdy webmaster tworzący strony WWW przy pomocy arkuszy stylów CSS.
Część z tych porad ma odniesienie do innych języków programowania również.
Zastosowanie się do tych porad pozwala na zwiększenie czytelności kodu. Zwiększa jego optymalizację oraz pozwala uniknąć frustracji w przekopywaniu się przez kod.

1. Sekcja 1Korzystaj z resetowania domyślnych stylów

   Pomaga to wyczyścić wszystkie dziwne style, które domyślnie przeglądarki aplikują stronom internetowym. Należy jednak pamiętać, aby ustawić własne domyślne style dla pseudoklas takich jak: :focus czy :active.
   Pod tym linkiem możesz pobrać plik resetujący CSS, którego ja używam: reset CSS by Piotr Nalepa

2. Sekcja 2Korzystaj ze skrótów CSS

   Zamiast pisać kod w stylu:

   margin-top: 5px; margin-right: 4px; margin-bottom: 5px; margin-left: 4px;

   margin-top: 5px; margin-right: 4px; margin-bottom: 5px; margin-left: 4px;

   Możesz to zapisać na dwa sposoby:

   margin: 5px 4px; /*góra-dół prawo-lewo*/ /*lub*/ margin: 5px 4px 5px 4px; /*góra prawo dół lewo*/

   margin: 5px 4px; /*góra-dół prawo-lewo*/ /*lub*/ margin: 5px 4px 5px 4px; /*góra prawo dół lewo*/

   Najczęściej takie skróty się wykorzystuje ustawiając atrybuty: background, border, margin i padding

3. Sekcja 3Stosuj komentarze do swojego kodu

   Dobrze jest komentować swój kod. Dzięki temu na łatwiej się domyślić, która część kodu odpowiada za którą część strony.
   Jeśli, dodatkowo, stosujesz jakieś modyfikacje CSS pod specyficzne wersje przeglądarek to dobrze jest też to opisać komentarzem.
   Przykładowy komentarz może wyglądać tak:

   /*Komentarz*/   /***********/ /*Komentarz*/ /***********/

   /*Komentarz*/ /***********/ /*Komentarz*/ /***********/

   W zasadzie wygląd bloku komentarza zależy od tego jak koder chce by to wyglądało.

4. Sekcja 4Twórz legendę kolorów wykorzystanych na stronie

   Jest to bardzo użyteczny nawyk, ponieważ kiedy kodujesz jakiś projekt graficzny i pewne kolory na stronie się powtarzają, to dzięki takiej legendzie kolorów na stronie masz dostęp do nich od razu pod ręką.
   Taką legendę kolorów możesz stworzyć korzystając z bloku komentarzowego:

   /**********************/ /* jasny niebieski: #4595BE /* ciemny niebieski: #367595 /* ciemny czerwony: #B30000 /**********************/

   /**********************/ /* jasny niebieski: #4595BE /* ciemny niebieski: #367595 /* ciemny czerwony: #B30000 /**********************/

5. Sekcja 5Pamiętaj o tym, wedle którego elementu następuje pozycjonowanie absolutne

   Z mojego doświadczenia, takie rzeczy dobrze jest oznaczyć komentarzem obok elementu wedle którego będziemy pozycjonować absolutnie inne elementy. Unikniemy wtedy zagubienia się w kodzie szukając tego elementu pozycjonowanego relatywnie.

6. Sekcja 6Unikaj stosowania hacków w głównym arkuszu stylów

   Zamiast stosowania dziwnych oznaczeń z gwiazdkami, myślnikami na początku atrybutu lepiej jest stosować specjalne arkusze stylów, które będą się ładowały tylko dla tej jednej specyficznej przeglądarki. Ma to najczęściej zastosowanie przy tworzeniu kodu CSS dla przeglądarek Internet Explorer.

7. Sekcja 7Stosuj marginesy zamiast paddingów w określaniu położenia elementu na stronie

   Zapewni Ci to mniej problemów z różnymi przeglądarkami. Z niewiadomych powodów przeglądarki różnie interpretują paddingi.

8. Sekcja 8Dodawaj overflow:hidden do elementu w środku którego są elementy floatowane

   Dzięki temu stosując marginesy i paddingi do elementów floatowanych istnieje mniejsze prawdopodobieństwo, że coś na stronie sie wysypie.
   Owszem, można korzystać z clear:both, ale w trakcie tworzenia kodu nigdy nie będziesz pewien w którym momencie powinno to być wstawione.

9. Sekcja 9Dodaj display:inline do floatowanych elementów

   Dzięki temu, elementy będą się ładnie ustawiać jeden obok drugiego zamiast jeden pod drugim przyjmując, ze mają szerokość 100%. Firefox zazwyczaj nie potrzebuje tego atrybutu, ale Internet Explorer bez niego nie będzie wiedział, że te elementy powinny być obok siebie.

10. Sekcja 10Korzystaj ze spritów (plików graficznych zawierających kilka stanów danego elementu)

    Takie podejście do cięcia grafiki, a potem jej kodowania w szablonie pozwala uniknąć tworzenia zbyt wielu zapytań do serwera w celu wygenerowania każdego stanu na przykład przycisku w menu.
    Dlatego zamiast takiego kodu:

    #menu li { background: url(img/obraz1.png); width: 100px; height: 20px; } #menu li :visited { background: url(img/obraz2.png); width: 100px; height: 20px; } #menu li:hover { background: url(img/obraz3.png); width: 100px; height: 20px; } #menu li:active { background: url(imgobraz4.png); width: 100px; height: 20px; }

    #menu li { background: url(img/obraz1.png); width: 100px; height: 20px; } #menu li :visited { background: url(img/obraz2.png); width: 100px; height: 20px; } #menu li:hover { background: url(img/obraz3.png); width: 100px; height: 20px; } #menu li:active { background: url(imgobraz4.png); width: 100px; height: 20px; }

    Możesz mieć taki kod:

    #menu li { background: url(img/obraz-mix.png) 0 0; width: 100px; height: 20px; } #menu li :visited { background-position: 0 -20px; } #menu li:hover { background-position: 0 -40px; } #menu li:active { background-position: 0 -60px; }

    #menu li { background: url(img/obraz-mix.png) 0 0; width: 100px; height: 20px; } #menu li :visited { background-position: 0 -20px; } #menu li:hover { background-position: 0 -40px; } #menu li:active { background-position: 0 -60px; }

    Jak widać, kod CSS jest mniejszy. Jednak muszę dodać, że na początku taki sposób tworzenia tła dla przycisków w menu może być kłopotliwy, ale po chwili jest intuicyjny i oczywisty.
    Minusy przy określaniu pozycji oznaczają, że albo się przesuwamy w dół (minusy występują przy drugiej wymiarze pikseli) lub w prawo (minusy pojawiają się tam gdzie w przykładzie jest 0).

11. Sekcja 11Stosuj przejrzysty układ plików w szablonie

    Stosując przejrzysty układ plików w szablonie strony WWW jesteś w stanie szybko znaleźć odpowiednie pliki szablonu strony, na przykład odpowiedzialne za efekty JavaScript, których użyłeś na stronie lub obrazki.
    Przykładowa struktura folderów szablonu często wykorzystywana przeze mnie w trakcie tworzenia szablonów dla systemu CMS Joomla! wygląda następująco:
    

12. Sekcja 12Buduj menu na liście

    Bardzo często można spotkać się z takimi praktykami, że webmasterzy tworzą menu oparte na divach lub tabeli zamiast na liście nieuporządkowanej. Jest to błąd, który sprawia, że zdecydowanie ciężej jest stworzyć przejrzysty, czytelny kod szablonu, który podlega walidacji i jest semantyczny.
    Menu buduje się w następujący sposób:

    <ul> <li><a href="#" title="Przycisk 1">Przycisk 1</a></li> <li><a href="#" title="Przycisk 2">Przycisk 2</a></li> <li><a href="#" title="Przycisk 3">Przycisk 3</a></li> <li><a href="#" title="Przycisk 4">Przycisk 4</a></li> <li><a href="#" title="Przycisk 5">Przycisk 5</a></li> </ul>

    <ul> <li><a href="#" title="Przycisk 1">Przycisk 1</a></li> <li><a href="#" title="Przycisk 2">Przycisk 2</a></li> <li><a href="#" title="Przycisk 3">Przycisk 3</a></li> <li><a href="#" title="Przycisk 4">Przycisk 4</a></li> <li><a href="#" title="Przycisk 5">Przycisk 5</a></li> </ul>

13. Sekcja 13Stosuj piksele (px) jako miary tekstu, paddingów czy marginesów

    Dzięki temu, łatwiej jest określić odległości czy wymiary tekstu. Stosowanie em lub % powoduje to, że często wymiary danego elementu odbiegają od tego co zostało zaplanowane przez webmastera.

14. Sekcja 14Nie wymyślaj koła od nowa

    Zamiast stosować nadmiarowości klas, przydzielając daną klasę do diva znajdującego się wewnątrz innego, coś w stylu:

    .post .tytul { ... }

    .post .tytul { ... }

    Lepiej jest wykorzystać znaczniki wbudowane w HTML takie jak h1, h2 czy inne. Dzięki temu mamy porządek w kodzie i semantycznie napisany szablon:

    .post h2 { ... }

    .post h2 { ... }

15. Sekcja 15Pisz poprawny kod HTML!

    Podstawą dobrego kodowania stylów w CSS jest stworzenie poprawnego kodu HTML.
    Zamykaj znaczniki, korzystaj z wbudowanych znaczników języka HTML i unikaj przesadnego wykorzystania znaczników div.

Mam nadzieję, że powyższa lista porad pozwoli Ci stać się jeszcze lepszym koderem stron internetowych.