To już piąta część mojej serii na temat metodyk CSS. Jest to jednocześnie ostatnia część tego cyklu. Myślę, że starczy nam tego CSS na jakiś czas… W sumie już ostatnim wpisem, na temat metodyki Atomic Design, mogłem już to wszystko zakończyć, stwierdziłem jednak, że warto będzie na koniec dorzucić kilka słów na temat Atomic CSS (w skrócie ACSS, będę tych nazw używać zamiennie), który po części oparty jest na metodyce, o której wspomniałem ostatnio.

Co to jest Atomic CSS

Myślę, iż można powiedzieć, że Atomic CSS opiera się na posiadaniu zestawu klas CSS, które są niezależne od treści i które są maksymalnie re-używalne. Sprowadza się to do tego, że w zasadzie wszystkie nasze style to klasy CSS posiadające po jednej parze “właściwość - wartość”.

Przykład

Dla lepszego zobrazowania o co chodzi, najlepiej chyba będzie posłużyć się przykładem. Powiedzmy, że posiadamy taki oto kod HTML:

<div class="container">
  <p>Hello world!</p>
</div>

Do tego zdefiniowaliśmy poniższe style:

.container {
  width: 100%;
  padding: 10px;
  margin: 0;
}

.container p {
  padding: 10px;
  margin-bottom: 5px;
}

Jak wspomniałem, w Atomic CSS style są “atomowe” czyli maksymalnie re-używalne i najczęściej “jedno-linijkowe”. Dlatego też po przejściu na ACSS, powyższy przykład mógłby wyglądać na przykład następująco:

<div class="wd-100p pd-10 mg-0">
  <p class="pd-10 mgb-5">Hello world!</p>
</div>

Wypadałoby jeszcze pokazać definicje powyższych klas CSS:

.wd-100p {
  width: 100%;
}
.pd-10 {
  padding: 10px;
}
.mg-0 {
  margin: 0;
}
.mgb-5 {
  margin-bottom: 5px;
}

Abstrahując od nazewnictwa klas, w powyższym przykładzie dobrze widać, na czym polega “atomizacja” stylów CSS. Każdy z nich odpowiada za jedno tylko ustawienie. Dzięki temu klasy te są zupełnie niezależne od treści jakiej dotyczą.

W przykładzie, w którym nie użyłem klas jeszcze ACSS widać, że zarówno w klasie container jak i stylach dla elementu p mamy powtórzenie ustawienia padding: 10px. Dzięki temu, że podzieliliśmy style na “atomowe” klasy, nie mamy już tej redundancji kodu. Zamiast tego mamy teraz po prostu jedna klasę pd-10, którą re-używamy wszędzie tam, gdzie potrzebujemy ustawić wartość właściwości padding na 10px.

Nie jest też absolutną regułą, że każda klasa musi koniecznie mieć tylko jedno ustawienie stylu. Czasem może zajść potrzeba nadania większej liczy ustawień per klasa. Należy jedynie pamiętać o zachowaniu jej “atomowości” czyli, że ma ona być zupełnie niezależna od kontekstu w jakim się jej używa.

Nazewnictwo klas

W powyższych przykładach użyłem nazw klas, które sam wymyśliłem. W Atomic CSS w sumie nie ma jakiegoś szczególnego zalecenia jeśli chodzi o konwencje nazewnicze.

Z tego co przeglądałem sieć Internet przygotowując ten artykuł zauważyłem, że zwykle nie stosuje się nazw w stylu mg-0 gdzie md oznacza margin a 0 odpowiada wartości 0px. Wydaje się, że lepszym podejściem jest zdefiniowanie globalnych zmiennych odpowiadających poszczególnym wielkościom i stosowanie nazw bardziej opisowych. Dla przykładu, z użyciem Sass mogłoby to wyglądać tak jak poniżej:

$small-space: 5px;
$medium-space: 10px;
$big-space: 15px;

...

.mg-sm {
  margin: $small-space;
}
.mg-md {
  margin: $medium-space;
}
.md-bg {
  margin: $big-space;
}

Częstym podejściem do nazewnictwa klas “atomowych” jest też inspirowanie się popularnym ostatnio narzędziem Emmet. Nie będą wdawać się w szczegóły tego narzędzia - można o tym przeczytać i obejrzeć w innych serwisach. Napiszę tylko, że pozwala ono znacznie usprawnić proces “klepania” kodu HTML jak i CSS - wystarczy napisać w edytorze odpowiednią skrótową nazwę (lub ich cały ciąg), a Emmet na tej podstawie generuje kod. I właśnie te nazwy skrótów Emmeta są inspiracją do nazywania klas CSS tworzonych w oparciu o ACSS.

Atomizer

W oparciu o zasady tworzenia klas Atomic CSS powstał tez projekt acss.io oraz narzędzie atomizer. Pierwsze z nich definiuje zestaw predefiniowanych klas inspirowanych właśnie Emmetem. Dzięki temu drugiemu możliwe jest wykorzystywanie tychże “atomowych” klas w sposób funkcyjny… zresztą chyba lepiej pokazać to na przykładzie (wprost ze strony projektu):

<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
    Lorem ipsum
</div>

Jak widzisz, dzięki użyciu atomizera możemy wykorzystywać predefiniowane klasy jak funkcje, które nadają odpowiednim właściwościom CSS wartość przekazaną jako parametr. Jeśli Cię to zaciekawiło to być może warto zapoznać się z tym projektem - jest ono dostępne oczywiście, m.in. jako plugin dla Gulpa czy loader dla webpacka.

ACSS - podsumowanie

To tyle jeśli chodzi o Atomic CSS jak i o moją serię o metodykach CSS. Muszę przyznać, że pracując nad tymi wpisami sam sporo się nauczyłem - nie wszystko co opisałem było mi wcześniej dobrze znane. Mam nadzieję, że i Tobie ta wiedza się przyda. Nawet jeśli nie będziesz wykorzystywać w praktyce wszystkich tych podejść to myślę, że warto mieć świadomość o ich istnieniu oraz jakie są ich największe wady i zalety.

Wpis ten jest częścią serii na temat metodyk CSS - poniżej linki do wszystkich części serii: