Sytuacja kobiet w IT w 2024 roku
28.09.20226 min
Marcin Kaczor
Shiji Poland

Marcin KaczorFrontend DeveloperShiji Poland

Czy nazywanie kolorów w CSS musi być tak frustrujące?

Poznaj 9 rozwiązań nazywania kolorów w CSS i sposób na rozbudowaną paletę kolorów.

Czy nazywanie kolorów w CSS musi być tak frustrujące?

W życiu programisty są momenty frustrujące. Do jednego z nich można zaliczyć nazywanie plików, klas, funkcji, zmiennych, komponentów itp. Zdarza się, że nazwy obiektów są często zmieniane, bo trudno jest uzyskać satysfakcjonujący efekt.

Pracując w zespole programistów, może pojawić się problem polegający na tym, że każda osoba ma inne doświadczenie, wiedzę i pomysły na to, jak można wymyślać nazwy poszczególnych elementów. Dzieje się też to w przypadku, gdy chcemy użyć zmiennych do nazywania kolorów. 

Wprowadzenie


Jednym z przykładów radzenia sobie z nazewnictwem kolorów jest użycie klas CSS oferowanych między innymi przez popularną bibliotekę Bootstrap:

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>


W tym przypadku istnieje jednak sporo ograniczeń. Jednym z nich jest liczba kolorów oferowanych przez bibliotekę. A drugą jest brak możliwości dostosowania odcieni tych kolorów do potrzeb własnych lub samego projektu graficznego. Można tworzyć własne klasy odpowiadające kolorom i sugerując się nazewnictwem proponowanym przez Bootstrap, jednak nie jest to rozwiązanie wystarczająco uniwersalne. Dalej nie wiadomo jak nazwać kolejną klasę z nowym kolorem.

Najbardziej prymitywnym podejściem jest użycie kolorów w postaci heksadecymalnej:

color: #ac59d2


Podstawową wadą takiego rozwiązania jest brak jego czytelności. Spoglądając na powyższy przykład, ciężko wyobrazić sobie jak wygląda zastosowany kolor. Może to też powodować inne kłopoty na przykład przy kopiowaniu lub porównywaniu istniejących kodów kolorów. Nie jest łatwo na pierwszy rzut oka stwierdzić, że nowy kolor nie jest już gdzieś użyty w kodzie aplikacji.

Tak samo trudno jest porównać takie kolory w przypadku, gdy wprowadzając nowy z projektu graficznego, można nieświadomie dodać bliźniaczo podobny, mimo że projektant mógł mieć na myśli ten sam kolor, który jest już użyty w aplikacji. Używając kodu szesnastkowego, istnieje 16 770 216 kombinacji.

Do celów projektowania aplikacji internetowych niekoniecznie używa się wszystkich możliwych odcieni. Dobrą praktyką przy projektowaniu witryny internetowej jest używanie palety kolorów. Często wiele marek lub firm posiada ją zdefiniowaną w podstawowej księdze znaku. Do definicji takiej palety dobrym sposobem jest użycie zmiennych. Gdy w aplikacji jest wykorzystany jeden z popularnych dynamicznych arkuszy styli jak na przykład Sass lub Less mamy możliwość ich użycia. Również od kilku lat można skorzystać ze zmiennych wbudowanych w język CSS.

Niedoskonałe rozwiązania

Użycie zmiennych nie jest jednak wystarczające. Potrzeba te zmienne jeszcze jakoś nazwać. Istnieją różne podejścia:

1. Kolory można po prostu numerować:

$color1: #23ea56;
$color2: #a8b9c0;
$color3: #120e4b;


W tym przypadku jedyną korzyść, jaką się uzyskuje, jest identyfikacja kolorów przez numer.

2. Kolory można również identyfikować poprzez ich proste nazwy i modyfikacje:

$green: #008000;
$lightGreen: #90ee90;
$blue: #0000ff;
$lightGray: #999;
$lighterGray: #bbb;
$lightestGray #ddd;


Zaletą powyższego podejścia jest to, że kolory mogą być identyfikowane po ich nazwie. Problemy zaczynają się pojawiać, kiedy operuje się na bardziej subtelnych odcieniach. W powyższym przykładzie widać, że wystąpi problem z nazwaniem kolejnego jaśniejszego odcienia szarości.

3. Można również nazywać zmienne z kolorami, jak miejsca, w których są używane:

$panel-header: #ab20ef;
$footer-icon: #2390ea;
$body-background: #000;


Co, jeżeli chce się użyć tego samego koloru w innym miejscu? Wtedy albo należy zduplikować ten sam kolor z inną nazwą, albo wykorzystać tę samą zmienną w złym miejscu. Alternatywą może być łączenie dwóch nazw zmiennych:

$panelHeaderAndFooterIcon: #409ddd;
$bodyBackgroundAndPanelBodyAndAnnotationText: #efa230;


Jak widać, czytelności to wcale nie poprawia.

4. Ciekawym pomysłem jest wykorzystanie metodologii BEM w nazewnictwie zmiennych:

$breadcrumbs__section--collapsed: #a397dd;
$user-fom__footer__annotation--selected: #34ad90;


Niestety nie rozwiązuje to żadnych problemów, które były przedstawione wcześniej.

5. Podobnym sposobem jest wykorzystywanie nazw semantycznych, takich jak:

$primary: #dd6ac;
$secondary: #d78e2a;
$background: #41ee44;
$warning: #ffc107;
$error: #dc3545;


W tym podejściu można używać tych samych nazw w wielu miejscach, ale kolory nadal będą się duplikować. Może się tak zdarzyć, że skończą się pomysły na ich nazywanie w ten sposób (na przykład inny kolor tła) i wtedy jednym z wyjść jest numerowanie (co tylko przysparza dodatkowych problemów, a nie pomaga).

6. Jednym z dziwniejszych podejść jest używanie greckiego alfabetu:

$color-alpha: $dadada;
$color-beta: $909090;
$color-gamma: $fefefe;


Niestety lista kończy się na 24 elementach.

7. Ostatnim przykładem jest inspiracja Material Design od Google. Jest to kombinacja prostych nazw kolorów i numeracji oznaczającej jej jasność:

$deep-purple-100: #673ab7;
$deep-purple-200: #422575;
$deep-purple-300: #2a184b;


Niestety wraz z kombinacją tych dwóch propozycji pojawiają się również ich wady.

8. Równocześnie wszelkie połączenia powyższych przykładów dają podobne rezultaty. Pomimo że użycie ich daje więcej możliwości, powoduje to również, że kod staje się mniej czytelny:

$highlightAlpha: #dd5a00;
$secondaryPanel: #7a31c8;
$warningLight2: #ffc107;


9. Używając możliwości dynamicznego arkusza stylów np. Sass można strukturę zmiennych mocno rozbudować: 

$red: (
	primary: #f00,
	light: lighten(#f00, 10%),
	lightest: lighten(#f00, 25%),
	dark: #8b0000,
	darkest: #800000
);


Problemem, który pozostaje nierozwiązany przy użyciu powyższych rozwiązań, jest sytuacja, gdy w projekcie graficznym pojawia się kolor bardzo mocno zbliżony do któregoś z obecnie używanych w aplikacji. Kolory takie mogą być na tyle podobne, że nie będą do rozróżnienia dla zwykłego użytkownika, jednak programista, konwertując je na kod heksadecymalny, zauważy różnicę i stworzy niepotrzebnie nową zmienną.

Rozbudowana paleta kolorów

Skoro użytkownik nie jest w stanie rozpoznać różnicy, nie warto tworzyć 2 różnych zmiennych z kolorami, a zatem podobne odcienie powinny być zgrupowane. Specyfikacja CSS definiuje podstawową paletę 140 kolorów, ale przy budowaniu komercyjnych aplikacji jest to zdecydowanie niewystarczające. Korzystając ze zmiennych, można zbudować własną paletę, która zredukuje ilość możliwości z 16 milionów do listy, którą będzie można łatwo zarządzać i będzie bardziej czytelna.

Taką listę kolorów można stworzyć samemu lub skorzystać z gotowych rozwiązań. W internecie znaleźć można wiele takich palet. Przykładem może być paleta złożona z 25 858 kolorów. Pomimo bogatej ich liczby warto wybrać rozwiązanie, które jest popularne i sprawdzone. W 2007 roku Chirag Mehta stworzył narzędzie online, konwertujące kod heksadecymalny do nazwy spośród utworzonej przez niego palety ok. 1500 kolorów:

Kolor można wybrać za pomocą próbnika kolorów, poprzez wpisanie kodu lub po prostu wybrać konkretny odcień z listy. Są to nazwy, które z jednej strony dają jakieś wyobrażenie o danym kolorze, a z drugiej grupują wiele odcieni tej samej barwy. Na przykład poniższe kody heksadecymalne na pierwszy rzut oka dla programisty wydają się być różne, jednak dla zwykłego użytkownika i dla powyższego narzędzia są jedną i tą samą nazwą:

Dzięki ograniczonej palecie kolory w aplikacji pozostają jednolite. Niekoniecznie też należy paletę w całości kopiować i wrzucać do lokalnego pliku. Generując ją na bieżąco na podstawie wykorzystywanych barw, budujemy paletę konkretnej aplikacji, z której chętnie skorzystają projektanci.

$cornflower-blue: #6495ed;
$canary: #dcfd61;
$pink-flamingo: #fe61de;


Rezultatem użycia kodu koloru otrzymanego od projektanta jest nazwa barwy. Jej odcień jest najbardziej zbliżony do barwy odpowiadającej wprowadzonemu kolorowi. Jeśli jest to pierwsze wystąpienie tej nazwy w aplikacji, trzeba dodać ją do pliku z lokalną paletą. Aby znaleźć oryginalny kod koloru, można wybrać jego nazwę z rozwijanej listy, aby odcień koloru zgadzał się z zaproponowaną paletą. W ten sposób powstaje czytelny, usystematyzowany i unikalny zestaw zmiennych. 

Narzędzia pomocnicze

Zaletą wykorzystania popularnej palety kolorów jest duży wybór narzędzi pomocniczych. Do usprawnienia pracy nad zmiennymi można korzystać z wtyczek do wielu edytorów kodu źródłowego oraz narzędzi dla projektantów: 


Przy pracy nad projektem aplikacji kopiując kod heksadecymalny i wklejając go do edytora, można za pomocą wtyczki od razu skonwertować go na nazwę z danej palety lub na definicję zmiennej koloru w języku Sass, lub CSS.

Podsumowanie

Jaki widać, nazywanie kolorów brzmi dość prozaicznie, a może stać się niemałym wyzwaniem. Jest wiele podejść do tego tematu, każde wiąże się z jakimiś zaletami oraz ograniczeniami. Pomimo tego, że zaproponowane rozwiązanie może nie spełniać wszystkich wymagań, jest ono tym, które jest sprawdzone i posiada najwięcej zalet.

<p>Loading...</p>