Clase specifice vs stiluri inline

Chestia asta am observat-o la câțiva colabori: class="btn-green", class="w-50" etc.

Am practicat și eu la un proiect asta și nu doar că părea greșit, dar a ajuns să mă muște rău de tot, când aveam clase de genul mb-20 pentru margin-bottom:15px, cl-blue pentru background:red șamd.

Mi se pare mult mai practică o abstractizare de genul button-primary, width-medium sau cl-primary.

Voi cum procedați?

Nu stiu de ce as folosi inline styles, in locul unei clase. Sau invers. Inline-ul e bun cand vrei sa faci overide complet la alte proprietati din stylesheet. Si de ce “button-green” si nu “button green”? Iar “mb-20” n-as folosii nici daca m-ai bate sau m-ar platii cineva. Eu folosesc chestii de gen “button something” ca sa separ pozitionarea si/sau dimensiunile de design(background). Nu stiu de ce as pune - intre ele. E posibil sa gresesc ca n-am idee prea mare de css.

O problema ar fi specificitatea, inline vs class, se pierde C-ul din CSS cand e vb de inline

1 Like

Sa folosesc button green in loc de button-green poate fi o problema cand ai si “h1 green”. Prefer: btn btn--flavor.

In niciun caz nu mai merg pe naming clase ce contin detalii specifice. Am facut odata text14 text 18. A fost horor la prima schimbare

Am mai folosit: button-red. Groaznic, caci a ajuns verde. Ca sa numa zic de leftbar care a juns in dreapta.

Daca denumesti in functie in functie de rolul ei, te pune un pic la munca sa gandesti structura logica a elemtentelor. Lucru care duce fie la un bun concept UX sau cel putin usor de intretinut sau modificat.

1 Like

Desi lucrurile imi sunt clare mai tot timpul pe aceasta problema, exista o situatie cand nu mi-e foarte usor sa ma decid. Sa zicem ca in UI-ul meu am 2 fonturi: unul condensed,folosit de obicei pentru textele mari sau bold iar unul pentru texte de font-size mai mic sau texte lungi.

Voi cum preferati? sa puneti o clasa modifier gen:

<div class="title font-condended"></div>

sau sa puneti pe .clasa

.title{
font-family:"Condesend"
}

Trebuie luat in calcul ca de-alungul aplicatiei fonturile se pot schimba sau anumite elemente pot face switch de font

Eu aș avea o abordare diferită: nu aș numi clasele în funcție de stilul curent, ci în funcție de scop.

Cam așa: <div class="title font-primary"></div> respectiv <div class="title font-headline"></div>. Asta vis-a-vis de clasa „modifier”.

În practică însă, prefer să specific direct din SASS un pseudoclass (nu știu exact cum se numește):

%font-primary { font-family: foo }
%font-secondary { font-family: bar }

Apoi, în diversele locuri în care am nevoie de fonturile respective, folosesc doar @extend %font-primary.