Praktyczne używanie klas css

Question

Czy używanie kilku klas do opisania jednego div to dobra praktyka?

Mam na celu ograniczenie zawartości mojego pliku css w ten sposób, że zamiast

.class
{
display:flex;
justify-content:center;
color: blue;
}

tworzę

.class
{
display:flex;
}

class2
{
justify-content:center;
}

class3
{
color: blue;
}

i później w html, w zależności od zapotrzebowania na dany parametr css wybieram klasy, których on dotyczy i wpisuję je, tj:

<div class= "class1 class2"> zawartość </div>

<div class= "class1 class3"> zawartość </div>

Oczywiście nie da się opisać wszystkiego w ten sposób ale cześć stylizacji można załatwić w ten sposób.

Zastanawiam się tylko czy to dobra praktyka, bo nigdzie nie spotkałem się z używaniem kilku klas dla jednego diva, w trakcie mojej nauki.

Pytanie do doświadczonych jak to widzą :)

Answer 1

To jest ostatnio dość popularne podejście, możesz się spotkać z dwiema nazwami: atomic CSS (starsza) lub tzw. utility classes. Tej drugiej nazwy używa Tailiwind, który jest dość popularnym narzędziem.

Masz rację, stylowanie można tak ograć bez problemu i w teorii pozwoli to nawet na wygenerowanie mniejszego wynikowego CSS-a. Tylko że to często może prowadzić do problemów z dostępnością, bo sprowadza pisanie HTML-a do odpowiedniego ostylowania, tworząc wrażenie, że nie trzeba znać semantyki HTML-a. No i z drugiej strony można się też sprzeczać, że klasy nie są tylko od stylowania.

Nie ukrywam, że osobiście nie jestem zwolennikiem takiego pisania kodu CSS, preferuję "tradycyjne" podejście (czyli klasy opisujące nie wygląd, a rolę danego elementu). Niemniej, jeśli wie się, co się robi, może to dać wymierne efekty i zdecydowanie przyśpieszyć choćby prototypowanie.

Comments

Dziękuję za odpowiedź.