Unikanie powtarzalności w CSS

Technologie webowe

Opublikowany: Aug 10, 2018

Wyobraźmy sobie sytuację, w której stworzyłeś dla klienta ogromną stronę www, z wieloma modułami, różnymi stylami itp. Używasz na niej dużej ilości stylów CSS, a struktura samej strony jest bardzo skomplikowana.

W pewnym momencie klient podejmuje decyzję o zmianie koloru części elementów z “chocolate” na “coral”[2]. Niestety okazuje się, że kolor chocolate użyty był w kilkunastu plikach css. A zatem conajmniej kilkanaście minut spędzisz na wyszukiwaniu napisu “chocolate” i zamianie go na inny. Wyobraź sobie, że masz bardzo niezdecydowanego klienta i kolory chce zmieniać co kilka dni…

CZY DA SIĘ TEN PROBLEM SENSOWNIE ROZWIĄZAĆ?

W tym artykule zajmiemy się dwoma podejściami do problemu: dostępnymi w standardzie zmiennymi CSS oraz narzędziami, które pozwalają wstępnie przetworzyć style CSS, czyli preprocesorami CSS.

VAR()

Zacznijmy od standardów. Pierwszym rozwiązaniem są zmienne CSS. Do tego celu używa się funkcji CSS var(), w której należy zdefiniować zmienną do wykorzystania później. Oznacza to, że możemy zdefiniować napis, który później będzie wykorzystywany jako wartość w innych miejscach stylu.

Wsparcie dla var() jest jednak mocno ograniczone do nowszych wersji przeglądarek.

Zrzut-ekranu-2018-08-10-o-08.19.56-1024x84.png

Źródło obrazu: https://www.w3schools.com/css/css3_variables.asp

Jak tego używać?

Najpierw musimy zdefiniować zmienną.

:root {
    --main-bg-color: coral; 
}

Zmienna musi rozpoczynać się od dwóch myślników. Definiujemy ją też w specjalnym zakresie :root

Od tej pory w innych miejscach możesz używać zmiennej jako wartości poszczególnych styli css.

#div1 {
    background-color: var(--main-bg-color); 
}

#div2 {
    background-color: var(--main-bg-color);
}

Rozwiązanie takie pozwala więc podmienić tylko jedną, zdefiniowaną na początku pliku linię i w ten sposób zmodyfikować całość.

Jak widać rozwiązanie ma ogromny potencjał, jednak jego wadą jest prawidłowe działanie tylko w nowszych przeglądarkach.

PREPROCESORY CSS.

Rozwiązanie drugie to preprocesory CSS. Jak sama nazwa wskazuje, rozwiązanie wymaga wstępnego przetworzenia kodu css. Dla przykładu zajmiemy się preprocesorem SASS[3], w którym można zdefiniować takie zmienne w postaci napisów $nazwa:wartość;.

$main-bg-color: coral;

#div1 {
background-color: $main-bg-color; 
}

#div2 {
background-color: $main-bg-color;
}

Na podstawie tego przykładu, kompilator [5] przygotuje wynikowy plik, który będzie zawierać gotowy, czytelny dla wszystkich przeglądarek plik CSS.

#div1 {
background-color: coral;
}

#div2 {
background-color: coral;
}

Niestety minusem jest tu potrzeba wykonania dodatkowych operacji po stronie programisty, a co za tym idzie dłuższy proces wdrażania projektu na serwer.

PREPROCESOR CZY ZMIENNE CSS?

Preprocesor oferuje znacznie więcej niż zmienne CSS. Z drugiej strony większość używanych przeglądarek wspiera już nowe standardy CSS, chociaż można na przykład spotkać jeszcze nawet przeglądarkę Internet Explorer 11, która, o dziwo, ma w 2018 roku udział na poziomie 2.5%… Przypomnijmy, że przeglądarka ta została wydana w 2013 roku i nie jest już wspierana przez Microsoft!

Decyzja o użyciu którejś z technik pozostaje więc w rękach programisty.


PRZYPISY

[1] Szczegóły użycia funkcji var() na w3schools.com.

[2] O tym, jakie kolory wspierają przeglądarki można poczytać na w3schools.com.

[3] Ale są też inne: SCSS, Stylus, Less…

[4] Na SassMeister można potestować język SASS.

[5] Jak użyć node.js aby skompilować SASS.

[6] Udział przeglądarek w rynku można obejrzeć na statcounter.com.

[7] Źródło obrazka tytułowego: pexels.com



Image
Felieton
Zarabianie Schrodingera
Sep 03, 2019
Image
Felieton
Rozliczanie aplikacji sprzedanych w AppStore
Jun 10, 2019
Image
Felieton
Cały internet na płycie CD
Apr 01, 2019
Image
Nauka programownia
Swift: O co chodzi z tymi kolejkami?
Feb 17, 2019
Image
Felieton
Tim Cook docenił wzrost sprzedaży w Polsce
Feb 04, 2019

Nasze szkolenia

Image
Image
Programowanie aplikacji iOS w Swift 5
Dwudniowe szkolenie od podstaw
Toruń - 2020-03-14
dr Błażej Zyglarski
Image
Image
Objective-C dla programistów Swift
Jednodniowe szkolenie dla programistów Swift
Warszawa - 2020-01-11
dr Błażej Zyglarski
Image
Image
Programowanie Gier 2D na iOS
Trzydniowe szkolenie ze SpriteKit i GameplayKit dla programistów Swift
Toruń - 2020-03-27
dr Błażej Zyglarski