Mam kilka pytań co do BEM dla osób siedzących dłużej w temacie.
❶ Posiadam block__element--modifier zauwarzyłem, że layout ma kilka różnych bloków spoko ale element--modifier się powtarza w kilku blokach są użyte te same style dla tych elementów. Czy spokojnie mogę zrobić text--light, text--semibold itd.?
❷ Layout font ma kolor w 95% taki sam, gdzie powinienem go ustawić wiedząc że jest w 5 blokach taki sam?
❸ Layout ma 7 wielkości fontów 10, 12, 13, 14, 25, 32 i 40. 13 jest użyty tylko jeden raz. Czy mogę go pominąć używam rem do określania jednostek w kodzie? Dodatkowo czy takie nazwy pasują w BEM: text--smallest text--smaller text--smaller--info text--small text--big text--bigger text--biggest #webdev
1. tak, my mamy cala liste text--bold, text--large, ja do kolorow uzywam np. text--primary, text--secondary, ale mozna tez nazwami kolorow
2. zrob dodatkowa klase i tam to ustaw, np text--primary, albo color--primary, color--light, color--white czy cos. Mozesz sobie zrobic osobny plik typography/text/settings czy cos i tam ustawic globalnie kolory dla textu, my trzymamy takie rzeczy w pliku typography.scss uprzednio ustawiajac kolory w variables.scss
@MegaZU0: Co do samych nazw to unikałbym nazywania modyfikatorów po kolorach. Nazwy powinny mieć charakter deklaracyjny, mówić o tym czym jest dany element, a nie jak wygląda. Czyli np. --info, --emphasis, --highlight Dalej - text--s-small - nie stosuj skrótów w nazwach, s kompletnie nic nie mówi. Zamiast tego możesz ten go nazwać text--extra-small.
@MegaZU0: Niezły. Takie nazewnictwo ma chyba bootstrap: success, warning itp. Ważne, żeby być konsekwentym w stosowaniu tego co sobie przyjmiesz na początku.
❶ Posiadam
block__element--modifierzauwarzyłem, że layout ma kilka różnych bloków spoko aleelement--modifiersię powtarza w kilku blokach są użyte te same style dla tych elementów.Czy spokojnie mogę zrobić
text--light,text--semibolditd.?❷ Layout font ma kolor w 95% taki sam, gdzie powinienem go ustawić wiedząc że jest w 5 blokach taki sam?
❸ Layout ma 7 wielkości fontów 10, 12, 13, 14, 25, 32 i 40. 13 jest użyty tylko jeden raz.
Czy mogę go pominąć używam rem do określania jednostek w kodzie?
Dodatkowo czy takie nazwy pasują w BEM:
text--smallest text--smaller text--smaller--info text--small text--big text--bigger text--biggest#webdev
1. tak, my mamy cala liste text--bold, text--large, ja do kolorow uzywam np. text--primary, text--secondary, ale mozna tez nazwami kolorow
2. zrob dodatkowa klase i tam to ustaw, np text--primary, albo color--primary, color--light, color--white czy cos. Mozesz sobie zrobic osobny plik typography/text/settings czy cos i tam ustawic globalnie kolory dla textu, my trzymamy takie rzeczy w pliku typography.scss uprzednio ustawiajac kolory w variables.scss
3. Mozesz uzywac samych EM, my uzywamy
2 np. https://paste.ofcode.org/Fy5eTaRc8eusCiy8YYcJpb
3. tutaj mi bardziej chodzi o to, że mam 4 różnych wielkości (10,12,13,14 px według psd) i 3 hX(25,32,40).
Mam porobione zmienne https://paste.ofcode.org/6BLZSHDmt32fNz6UqdHzHP
text--s-small (10), text--small (12), text--info (13), text--normal (14)czy te nazwy lepiej się prezentują?--info,--emphasis,--highlightDalej -
text--s-small- nie stosuj skrótów w nazwach, s kompletnie nic nie mówi. Zamiast tego możesz ten go nazwaćtext--extra-small.Ważne, żeby być konsekwentym w stosowaniu tego co sobie przyjmiesz na początku.