Klasy CSS - dobre praktyki

Hej, pracuję właśnie nad stroną opartą o CMS Wordpress - jest to prosta strona, szablon piszę od zera, jako bazy użyłam Bootstrapa (choć jeszcze się zastanawiam, czy z niego nie zrezygnować lub zostawić sam grid). Chciałam spytać, jaki sposób nadawania klas jest lepszy - czy dla danego elementu (np boxa, w którym znajduje się tekst) stworzyć jedną klasę, która zawierałaby kilka atrybutów (padding, margin, kolor tła, ramkę) czyli coś takiego

<div class="dm-box">

Czy lepiej dodać kilka klas, z których każda odpowiada za jeden atrybut np

<div class="dm-border dm-bg-light my-5 p-5">

Na razie stworzyłam kilka takich klas wielokrotnego użytku, ale zaczęłam się zastanawiać czy przy takiej niedużej stronie będą mi one potrzebne (użyję każdego może 1-2 razy). Chcę też przyzwyczajać się do dobrych praktyk, jakbym chciała w przyszłości używać SCSS/LESS. Dajcie znać, jak Wy robicie.

poczytaj sobie o metodykach css i wybierz która ci odpowiada:
https://www.nafrontendzie.pl/metodyki-css-1-oocss

Czym różni się <div class="dm-border dm-bg-light my-5 p-5"> od <div style="background-color: cośtam; margin: 5px, padding: 5px;">? ;-)

CSS powstał w celu separacji danych (opisanych w HTMLu) od ich wyglądu (opisanych właśnie w CSSie) - a robiąc setki klas pomocniczych w stylu my-5 zaczynasz łączyć jedno z drugim, zaprzeczając tej idei.

Dodatkowo powstaje problem copy & paste: zamiast napisać <div class="box">...</div> musisz w wielu miejscach wklejać to samo <div class="b-1 mb-5 ma-4 iru6-3 mkvp-123'>...</div>, co sprawia, że zmiana tego stylu staje się problematyczna (trzeba ręcznie przeczesywać wszystkie HTMLe zamiast po prostu zmienić CSS w jednym miejscu).

Nie mówiąc już o sensownym RWD...

Patryk27 napisał(a):

Czym różni się <div class="dm-border dm-bg-light my-5 p-5"> od <div style="background-color: cośtam; margin: 5px, padding: 5px;">? ;-)

No nie no, jest różnica :) chociażby w sytuacji, gdy chcemy nadpisać te style

Tą klasę "dm-bg-light" stworzyłam z myślą o tym, że kolor tła będzie jeszcze gdzieś się powtarzać jako jeden z kolorów przewodnich i że ten kolor przewodni będzie można zmienić jedną linijką, zamiast ustawiać go osobno dla każdego elementu lub gdybym chciała kiedyś dodać w szablonie możliwość wyboru kolorów przez użytkownika z panelu Wordpressa.

Natomiast ten padding i margin chyba rzeczywiście jest bez sensu, lepiej dodam je do głównej klasy i pomyślę nad wywaleniem Bootstrapa, bo te klasy "my-5" i "p-5" sa z Bootstrapa.

akurat wprowadzenie class margin, padding do BT uważam za super pomysł, dodatkowo można je przypisać do określonej rozdziałki i szybko, intuicyjnie klepać grida