search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

[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. Korzystaj 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. Korzystaj ze skrótów CSS

    Zamiast pisać kod w stylu:

    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*/

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

  3. Stosuj 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*/
    /***********/

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

  4. Twó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
    /**********************/
  5. Pamię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. Unikaj 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. Stosuj 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. Dodawaj 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. Dodaj 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. Korzystaj 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;
    }

    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;
    }

    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. Stosuj 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:
    struktura folderów w szablonie by Piotr Nalepa

  12. Buduj 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>
  13. Stosuj 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. Nie 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 { ... }

    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 { ... }
  15. Pisz 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.

  • Nie mogę się zgodzić co do punktu 13. Jak zaprojektować tzw. liquid layout bez użycia procentów, tak by np. marginesy strony były stałej wielkości, niezależnie od monitrora?

    Piksele do tekstu? Em-y zapewniają skalowalność. Na firefoxie powiększanie / pomniejszanie strony działa niezależnie od stosowanych jednostek, ale w innych przeglądarkach fontów określonych w pikselach powiększyć się nie da. Nie mówiąc o drukowaniu strony, której tekst jest opisany w pikselach…

  • Nie wiem jaki zwiazek ma 15 punkt z reszta ale spoko. Dales go chyba tylko po to zeby byla pelna liczba 🙂

    Odnosnie punktu 2 to zapomniales takze o margin: 1px 2px 3px;

    Menu na liscie albo na .

    .post .tytul -> tam przecinka nie powinno byc?

    Korzystajac z okazji bo temat zblizony moze sie komus przyda: http://www.capaciouscore.pl/artykuly/standardy-kodowania-arkuszu-stylu-css/

  • Ja z kolei nie wiem o co dokładnie chodzi w punkcie 9. Przecież elementy floatowane przyjmują minimalną możliwą szerokość chyba że otrzymały szerokość ustaloną w px lub innej jednostce miary. I nie jest prawdą, że IE nie będzie widział, że elementy mają być obok siebie. Atrybut float jest poprawnie obsługiwany od bardzo dawna (nie wiem w której wersji był wprowadzony ale w IE 6, 7, 8 działa bez zarzutu).

    I mała uwaga do punktu 7. W niektórych miejscach warto korzystać z paddingów. Przydatne są np. przy menu, paginacji. Jeśli zamiast marginesów zewnętrznych użyjemy marginesu wewnętrznego zwiększa nam się powierzchnia klikalna i łatwiej trafić w link.

  • Odnośnie paddingów chodzi o to, że często ludzie mylnie stosują paddingi jako marginesy właściwe, a przez to że ustalą sobie szerokość jakiegoś elementu mają problem z rozmieszczeniem ich na stronie. Załóżmy mamy blok o szerokości 200px to po dodaniu paddingów 20px z każdej strony, rzeczywista szerokość elementu to 240px. Ważne to jest przy ustalaniu tła obrazkowego w CSS i odległości pomiędzy elementami.

  • A ja nie zgodzę się z punktem 6, czyli niestosowaniem haków w arkuszu głównym. Co szkodzą haki w arkuszu głównym? Odpowiedź jest – nic nie szkodzą. Więc zamiast mieć dwa arkusze stylów, które generują dwa requesty, lepiej mieć jeden arkusz z jednym requestem.

  • Szkodzą w momencie gdy zależy nam na 100% walidacji strony WWW. Niektóre osoby potrafią być na tym punkcie przeczulone.

  • Czyli rozumiem, że czasem trzeba podpiąć trzy arkusze stylów, z tego jeden się waliduje w 100%, drugi (w którym jest CSS3 z przedrostkami -moz, itd) nie waliduje się, a trzeci (haki dla IE) równiez się nie waliduje, ale jest ukryty przed walidatorem w komentarzu warunkowym.

    No cóż, można i tak, rozumiem, że tacy pedanci mają bardzo trudne życie.

  • Skoro już się stosuje osobny arkusz stylów dla IE to już nie są potrzebne żadne hacki w takim arkuszu i ten arkusz też będzie się ładnie walidował.
    Jeśli chcemy koniecznie korzystać z CSS3 to możemy, jednak musimy się liczyć z tym, że pewne efekty muszą być pisane pod konkretną przeglądarkę a przez to walidator już na wyrzuci błędy. Poza tym, CSS3 nie jest wspierany we wszystkich przeglądarkach w tym samym stopniu.

  • Albo umieścimy wszystkie style dla IE w jednym arkuszu – to miałem na myśli wcześniej – wtedy nadal będzie trzeba stosować haki, aby rozdzielić od siebie style przeznaczone dla IE6, IE7, IE8 i wtedy nie będzie walidacji. Albo – tak jak rozumiem – dla każdej wersji IE, utworzyć osobny arkusz stylów i wtedy rzeczywiście będą się one walidowały, z tym, że będzie ich jeszcze więcej.

    Z CSS3 jest dokładnie jak napisałeś, jeśli już zastosujemy CSS3, to nie da się obejść problemu braku walidacji.

    Czyli jaka jest recepta dla pedanta walidacji?
    – nie stosuj właściwości eksperymentalnych CSS3;
    – nie stosuj właściwości z prefiksami (czasem potrzebne jest to dla starszych wersji np. Firefoksa);
    – nie używaj filtrów IE, one nigdy się nie walidują – opacity w IE mówimy pa pa;
    – twórz osobne arkusze stylów dla rożnych przeglądarek – czyli wiele plików, zamiast jednego.

    Po co to wszystko? Żeby się walidowało.
    Jak dla mnie nie ma to sensu, No ale każdy robi jak chce.

  • Dokładnie, każdy robi tak jak mu wygodniej, ale najbardziej zalecane jest tworzenie stron WWW, które się walidują. Wiele plików to nie problem w założeniu, że nie ma w nich zbyt rozbudowanego kodu CSS.
    Korzystając z CSS3 i tak należy wziąć poprawkę, że nie wszystko będzie widać zależnie od przeglądarki, a klienci lubią jak w każdej przeglądarce widzą to samo.

  • To prawda, że zalecane jest aby CSS jak i HTML przechodziły walidację i ja się z tym zgadzam, to słuszne praktyki. Ale stosowanie się do zasad, bez zrozumienia czemu mają służyć, jest ignorancją.

  • Orange

    Szkodzą w momencie gdy zależy nam na 100% walidacji strony WWW. Niektóre osoby potrafią być na tym punkcie przeczulone.

  • kolega

    Świetny pomysł z tymi graficznymi przyciskami! W sumie to nie wiedziałem o nim, a po przeanalizowaniu wielu stron okazało się, że to jest właśnie stosowana przeważnie technika. Muszę przerobić moje wszystkie strony bo z takim rozwiązaniem działają zdecydowanie szybciej. Dzieki!

  • Co do pkt 14
    Oczywiście nie zawsze jest to dobre rozwiązanie.
    Przykład: mam post, w którym jest tytuł h2 content wprowadzany przez użytkonika 😉 (np z jakiegoś wysiwyg edytora)
    Osobiście lubię wtedy stosować h2.nazwa_elementu, bo wtedy dodatkowo wiem, że jest to styl h2. Ale to też nie zawsze się sprawdza, bo przecież ktoś może chcieć zmienić h2 na np h3. Wszystko zależy od danego projektu 😉

  • W momencie gdy dajemy możliwość edytowania treści zewnętrznym użytkownikom, możemy zapomnieć o semantycznym kodzie i jego walidacji (tak jest najczęściej). A to dlatego, że zwykły użytkownik o to nie dba.
    Lecz jeśli projektujemy stronę jako zlecenie, to zdecydowanie polecam korzystać z właściwych znaczników i pomijanie tworzenia zbędnych klas.

  • wow

    Mam szczere wątpliwości co do stosowania marginesów|paddingu i kompatybilności w przeglądarkach pkt. 7. Od dawna nie używam margin: do pozycjonowania treści, chyba że wymagane jest środkowanie pion/poziom. Z ciekawości zapytałem google co i jak w tym temacie: „margin|padding explorer” – wiadomo że chodzi głównie o błędy kompatybilności w explorerach – generalnie tematy dotyczą problemów z wartością margin. Odpalając stronę w IE6, IE7 i IE8 pociętą tylko z użyciem margin: (nie stosując css czyszczącego) mamy często 3 różne layouty, a nawet 5 różnych (button kompatybilności w IE7 i 8). Nie mówię że margin: jest zły, ale wszystko wynika z przyzwyczajeń, staram się używać padding ze względu na logikę tworzenia kodu. Przykład; Mamy kontener i załóżmy że pakujemy do niego różne elementy , , …. i teraz użycie margin wymusza na nas dodanie wartości margin do każdego z zagnieżdżonych elementów(chyba nie muszę rozwijać tematu – jakie to ma skutki). Natomiast paddingu wystarczy użyć na elemencie będącym kontenerem, oczywiście należy pamiętać o sposobie interpretacji rozmiarów elementu width padding.

  • yacobi

    Hej, link do resetu nie działa…

  • Piotr Nalepa

    bardzo możliwe, w końcu ten artykuł powstał 2 lata temu. Uaktualniłem link do nowego pliku reset.css