Zmienne w CSS znacznie ułatwiły pracę wszystkim programistą pracującym na froncie. Łatwiej zarządza się stylami przez co praca jest szybsza i przyjemniejsza. Oczywiście nie jest to żadna nowość, a coś czego używa się od bardzo dawna. W tym wpisie chciałbym przedstawić, jakie praktyki są wykorzystywane do tworzenia zmiennych w CSS.

Tworzenie zmiennych

Utworzenie zmiennej w CSS jest bardzo łatwe. Odwołujemy się do :root{} i w niej definiujemy zmienne.

:root {
  --primary: rgb(21, 24, 39);
  --secondary: rgb(131, 58, 152);
}

Praktyki przy tworzeniu zmiennych w CSS

Przedrostki

Przedrostek w nazwie zmiennej CSS, to nic innego jak ciąg znaków stawiany przed każdą nazwą zmiennej. W poniższym przykładzie dodałem przedrostek mf, skrót od (Magia Frontu) dla nazwy każdej zmiennej.

:root {
  --mf-primary: rgb(21, 24, 39);
  --mf-secondary: rgb(131, 58, 152);
}

Po co taki zabieg? Tworząc jakiś większy serwis czy aplikacje, korzystamy z różnego rodzaju dodatków. Każdy taki dodatek może posiadać zmienne w CSS. Co się stanie kiedy w Twoim kodzie jak i w kodzie dodatku będzie zmienna o takiej samej nazwie? Wtedy nastąpi nadpisanie stylu przez przeglądarkę. Przedrostki pozwalają na uniknięcie konfliktu nazw zmiennych. Najlepszą praktyką jest aby przedrostek był skrótem projektu.

Nazwy zmiennych kolorów

Najczęściej spotykam się z trzema wariatami zapis koloru do zmiennych.

Sposób pierwszy

Nazwy zmiennych w zależności od funkcji jaki pełni kolor. W poniższym przykładzie specjalnie pominąłem przedrostki dla lepszej czytelności.

:root {
  --primary: rgb(21, 24, 39);
  --primary-light: rgb(38, 46, 70);
  --primary-dark: rgb(13, 15, 24);
  --secondary: rgb(131, 58, 152);
  --secondary-light: rgb(244, 199, 255);
  --secondary-dark: rgb(106, 46, 122);
  --dark: rgb(8, 9, 14);
  --white: rgb(235, 235, 235);
  --light: rgb(177, 192, 250);
  --info: rgb(35, 166, 184);
  --success: rgb(60, 153, 94);
  --warning: rgb(250, 145, 38);
  --error: rgb(215, 57, 58);
}

Nazwa --primary, to podstawowy kolor na stronie czy w aplikacji. Mamy również dwa dodatkowe kolory oznaczona nazwami --primary-light oraz --primary-dark. Jest to odpowiednio jasny oraz ciemny odcień koloru --primary. Ten sam schemat jest powielony z drugim kolorem podstawowym pod nazwą --secondary. Dalsze nazwy zmiennych są już jasne i oczywiste. Na przykład kolor zmiennej --success, będzie wykorzystywany do informowania użytkownika o poprawnym wysłaniu e-mail czy zapisu do bazy.

Zaletą takiego rozwiązania jest to, że używając zmiennej --success, wiesz, że ten kolor będzie pasował do poprawnego wypełnionego pola formularza czy informacji dla użytkownika o powodzeniu operacji. Dodatkowo jeżeli będzie istnieć zmienna --success-text, to wiesz, że ten kolor będzie dobrze kontrastował z kolorem --success.

Wadą tego podejścia jest, jeżeli dany kolor chcemy wykorzystać w inny sposób niż wskazuje to nazwa zmiennej. Na przykład nazwa zmiennej --error, świetnie nadaje się do błędnego wypełnionego pola formularza. Ale co w przypadku kiedy ten kolor chcemy użyć jako obramowanie obrazka? Wtedy nazwa ta może być myląca co sprawia, że całość jest mniej intuicyjna.

Sposób drugi

Nazwy zmiennych opisujący kolor. Tak jak wyżej, specjalnie pominąłem przedrostek dla lepszej czytelności.

:root {
  --black: rgb(0, 0, 0);
  --white: rgb(255, 255, 255);
  --cyan-bluish-gray: rgb(171, 184, 195);
  --pale-pink: rgb(247, 141, 167);
  --vivid-red: rgb(207, 46, 46);
  --orange: rgb(255, 105, 0);
  --amber: rgb(252, 185, 0);
  --light-green-cyan: rgb(123, 220, 181);
  --green-cyan: rgb(0, 208, 132);
  --pale-cyan-blue: rgb(142, 209, 252);
  --vivid-cyan-blue: rgb(6, 147, 227);
  --vivid-purple: rgb(155, 81, 224);
}

W tym przypadku nazwa zmiennej to opis koloru.

Zaletą tego rozwiązania jest, że dany kolor nie pełni żadnej funkcji na stronie czy aplikacji. Jego przypisanie do dowolnego elementu jest bardziej intuicyjne niż w sposobie pierwszym.

Natomiast wadą będzie, jeżeli znacząco zmienimy kolor przypisanej do zmiennej, to również będzie trzeba zmienić nazwę zmiennej w root{} jak i w każdym miejscu gdzie ona występuje.

Jeżeli nie wiesz jak nazwać dany kolor, jest na tą okazję odpowiednia strona https://chir.ag/projects/name-that-color

Sposób trzeci

Numerowanie kolejnego odcienia koloru. Sposób ten najczęściej występuje kiedy nazwa zmiennej określa kolor. Im większy numer odcienia koloru, tym odcień danego koloru jest coraz ciemniejszy.

:root {
  --color: rgb(0, 124, 186);
  --color-10: rgb(0, 107, 161);
  --color-20: rgb(0, 90, 135);
  --color-30: rgb(0, 77, 115);
  /* zazwyczaj największy numer to 100 */
}

Zaletą tego rozwiązania, jest łatwość stosowania wielu odcieni tego samego koloru oraz mnogość kolorów do wykorzystania w ramach projektu. Taka kombinacja daje nam kolor bazowy plus jego 10 odcieni.

Wadą tego rozwiązania jest definiowanie wszystkich 10 odcieni koloru, mimo że nie wszystkie wykorzystamy w projekcie.

Pozostałe zmienne

Nazwy pozostałych zmiennych zazwyczaj informują o jej przeznaczeniu oraz wartości. Poniżej kilka przykładów.

:root {
  --font-size-small: 13px;
  --font-size-medium: 20px;
  --font-size-large: 36px;
  --font-size-x-large: 42px;
  --border-radius-small: 6px;
  --border-radius-medium: 10px;
  --border-radius-large: 14px;
  --spacing-10: 0.44rem;
  --spacing-20: 0.67rem;
  --spacing-30: 1rem;
  --spacing-40: 1.5rem;
}

Decydując się na używanie zmiennych w CSS, warto wybrać jeden ze sposobów definiowania kolorów i trzymać się go w danym projekcie.

Jeżeli znasz jeszcze jakaś inną praktykę definiowania zmiennych w CSS, podziel się tym w komentarzu.

Podobał się artykuł?