13 dobrych praktyk, które sprawią, że Twój kod CSS stanie się lepszy!

Front-end 5 minut czytania

Ostatnio Bartłomiej Mąkina z bloga Devcorner.pl stworzył artykuł, w którym wymienia 7 złych praktyk podczas pisania kodu CSS. Zainspirowało mnie to do stworzenia swojego wpisu, w którym przedstawiam przeciwieństwo, czyli dobre praktyki 🙂

Dowiemy się dziś dlaczego w ogóle warto zwracać uwagę na poprawność naszego kodu CSS oraz poznamy dokładnie 15 sposobów na zwiększenie jego jakości.

Dlaczego warto stosować dobre praktyki w przypadku kodu CSS?

Korzystanie z dobrych praktyk ma szereg zalet. Przede wszystkim nasza witryna działa szybciej i wydajniej. Zawartość nie ma problemów z ustawianiem się na stronie, a przejrzysty oraz ułożony kod jest łatwiejszy do odczytania przez nas, jak i inne osoby, na przykład współpracowników.

Dobre praktyki:

1. Normalizacja stylów przeglądarki.

Zacznę od sposobu, o którym sam dowiedziałem się na późnym etapie nauki. Każda przeglądarka posiada własne, domyślne style, które potrafią przysporzyć sporej ilości problemów podczas tworzenia strony internetowej.

Właśnie to często jest powodem sytuacji, w której tworzymy witrynę i przykładowo na Chromie wygląda dobrze, po czym sprawdzamy ją na Firefoxie, gdzie jest zupełnie inna. Na szczęście możemy tego bardzo prosto uniknąć. Wystarczy dodać do naszych stylów kod z tej oto strony: Normalize.css.

Warto wspomnieć, że oprócz normalizacji istnieje coś takiego jak zupełny reset stylów przeglądarki. Aby go zastosować, wystarczy dodać kod z tej strony na początku naszego arkusza stylów.

2. Używanie box-sizing: border-box.

Domyślną wartością dla box-sizing _jest content-box_, ale niestety ta opcja sprawia wiele problemów. Postaram się wytłumaczyć dlaczego, na przykładzie kodu:

.div1
{
    box-sizing: content-box;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 5px;
}

W tym przypadku div ma 100px, ale osobno zostaje do niego dodany padding i border, które w praktyce sprawiają, że całość ma 130px.

.div2
{
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 5px;
}

Tu już jest zupełnie inaczej. Całość ma 100px, a padding oraz border odejmują się od wymiarów diva, przez co ten ma w praktyce 70px szerokości i wysokości.

Warto zaznaczyć, że najczęściej box-sizing: border-box implementuje się w ten oto sposób:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Jest to najlepsza praktyka, która rozwiązuje wszystkie problemy. 🙂

Zmiana tej wartości daje nam większą kontrolę nad układem strony i sprawia, że całość się nie „rozjeżdża”.

3. Łączenie stylów dla wielu elementów.

Możemy nadać takie same style dla więcej niż jednego fragmentu naszej strony. Dla przykładu chcąc ustawić kolor czcionki na ciemnogranatowy, dla nagłówków h1 do h3 nie użyjemy takiego kodu:

h1
{
    color: #10131a;
}
h2
{
    color: #10131a;
}
h3
{
    color: #10131a;
}

…a taki:

h1, h2, h3
{
    color: #10131a;
}

Nasz kod stanie się bardziej przyjazny dla ludzi, jak i przeglądarek.

4. Używanie zapisu szesnastkowego lub RGB.

Kolory dobrze jest pisać w jednej z tych dwóch postaci. Przykładowo nie używać takiego zapisu:

h1
{
    color: black;
}

…a taki:

h1
{
    color: #000000;
}

Dzięki temu nasz kod będzie trzymał się jednego standardu oraz stanie się przyjemniejszy w interpretacji.

5. Łączenie kodu w jedną linię.

Co rozumiem przez to zdanie? Gdy mamy element, któremu trzeba nadać różny margines z każdej ze stron nie używajmy takiego kodu:

div
{
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 20px;
    margin-left: 15px;
}

…a taki:

div
{
    margin: 10px 5px 20px 15px;
}

Z kolei gdy ten margines jest taki sam od góry i dołu, a inny po bokach, to ponownie nie piszmy tego w ten sposób:

div
{
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
}

…a w ten:

div
{
    margin: 10px 5px;
}

Dzięki temu nasz kod będzie krótszy i szybciej ładowany przez przeglądarki.

6. Organizacja kodu.

Ważne jest aby nasz kod był ułożony w taki sposób, jak wygląda budowa strony. Przykładowo nasze style mogą być zorganizowane wg. takiej oto hierarchii:

/* Reset stylów przeglądarki */
/* Style ogólne */
/* Czcionki i ułożenie elementów na stronie */
/* Nagłówek */
/* Główna zawartość witryny */
/* Stopka */
/* Media Queries */

Dodatkowo cały kod powinien posiadać komentarze odgradzające poszczególne sekcje i elementy stron.

Wszystkie te dobre praktyki sprawią, że kod będzie bardziej przejrzysty i prostszy do odczytania przez nas, jak i przeglądarki internetowe.

7. Nieużywanie deklaracji !important.

Ta zła praktyka jest bardzo często poruszana, z racji tego, że jej działanie jest tragiczne w skutkach. Za jej pomocą zupełnie zaburza się hierarchię kodu CSS oraz znacznie utrudnia późniejszą edycję.

8. Używanie text-transform, zamiast caps locka.

Jeśli dane zdanie w całości ma być napisane z wielkich liter, to dobrze jest nie robić tego w ten oto sposób:

<p class="distinction">ZDANIE Z WIELKICH LITER</p>

…a w ten:

.distinction
{
    text-transform: uppercase;
}

9. Dodawanie animacji na końcu.

Wszelkie animacje widoczne na stronie, szczególnie biblioteki, takie jak np. Animate.css powinny być dodane na końcu po to, aby właściwa treść mogła pojawiać się przed nimi.

Dzięki temu witryna będzie ładować najpierw właściwą treść, a dopiero później wszelkie dodatki.

10. Niepowtarzanie tego samego kodu.

Jeśli na przykład posiadamy ciemne tło i białą czcionkę dla wielu elementów na stronie, to nie przypisujmy tego dla każdego elementu. Lepiej zróbmy to na przykład w ten sposób:

html
{
    background-color: #333333;
    color: #ffffff;
}

Oczywiście nie wszystkie style są dziedziczone (np. margines). W tym miejscu możecie znaleźć listę wszystkich elementów, które działają w ten sposób.

11. Posiadanie jednego pliku CSS.

Bardzo dobrze jest połączyć cały kod w jeden plik, po to aby ograniczyć ilość zapytań, które znacznie spowalniają ładowanie się strony (swoją drogą świetnie byłoby zrobić tak samo dla skryptów JavaScript 🙂).

12. Utrzymywanie kodu CSS poza plikiem HTML.

W sumie po to aby oddzielić treść strony od jej wyglądu, zostały stworzone kaskadowe arkusze stylów. 😉 Całość szczególnie dotyczy stylowania in-line, które jest bardzo dużym błędem i wygląda w ten sposób:

<h1 style="color: #10131a;"></h1>

13. Minifikacja kodu.

Zabieg ten polega na usuwaniu wszystkich znaków białych z naszego kodu. Często też rozwiązuje problem powtórzeń. W tym celu istnieje mnóstwo narzędzi, takich jak CSS Minifer oraz CSS Compressor.

Dzięki temu nasza strona waży mniej i ładuje się szybciej.

Podsumowanie.

W tym artykule wypisałem dobre praktyki, które warto stosować podczas pisania kodu CSS. Mam nadzieję, że niektóre okażą się dla Ciebie pomocne i pomogą w tworzeniu jak najlepszych stron internetowych. 🙂

Oczywiście jeśli masz jakieś pytania lub sugestie, to zapraszam Cię do komentowania, a jeśli ten artykuł okazał się dla Ciebie wartościowy, to będę bardzo wdzięczny, gdy udostępnisz go swoim znajomym lub czytelnikom. Powodzenia w tworzeniu jak najlepszych stron internetowych! 🙂

Komentarze

Może dodasz coś od siebie?