[HivPositiv]

Jakie rozwiązanie do stylowania polecacie dla małych apek w React? Do średnich i większych projektów zawsze używałem styled-components, ale ta apka jest tak minimalna, że wydaje mi się to grubym overkillem.

Teraz próbuje CSS modules, ale ja #!$%@? jakie to jest brzydkie i nieczytelne w JSX-ie

#webdev #react #css #programowanie

[papryczekNaBombach]

@HivPositiv: tailwindcss?

[HivPositiv]

@papryczekNaBombach: o proszę tylko nie on, kiedyś próbowałem go użyć ale nie dość, że trzeba zapamiętać pełno nazw klas aby w miarę szybko w tym pisać, to ultra zajebiście nieczytelny robi się cały jsx. To tak jakbym bezpośrednio "style" używał zamiast klas

Ogólnie nie polecam mocno

[Abel11]

@HivPositiv: Tak chyba jest przy każdej bibliotece styli

[Rst00]

@HivPositiv: akurat CSS Modules jest chyba najbardziej czytelny. Masz ładne rozbicie na plik jsx/tsx i scss. Zainstaluj sobie paczkę classnames to będziesz mógł robić np.

className={classnames("row", {
'free': isFree,
'taken': !isFree,
'selected': isSelected,
[styles.commonItem]: isCommonItem
})}

itd.

[Bulburator]

@HivPositiv: Możesz tworzyc własne klasy budując je tymi z tailwind i kod od razu czystszy. Do tego ma JIT, a nieużywane klasy tailwindowe zostają usuwane z builda produkcyjnego. Niesamowicie przyspiesza prototypowanie, a nazwy klas wbrew pozorom są fajnie wymyślone i z czasem intuicyjnie je „odgadujesz” przy korzystaniu z intellisense w vscode. Ciężko cokolwiek innego polecić pod małe projekty. Może warto się ponownie przemóc?

[Nomada29]

@HivPositiv: a czemu nie css z jakimś preprocesorem?

[HivPositiv]

@Nomada29: Używam PostCSS-a, ale żaden preprocesor nie rozwiązuje w ogóle problemu z klasami w JSX, bo to nie jest zupełnie ich scope