Какую архитектуру css выбрать для приложения на React?

Question

[faleaksey]

Всем доброго времени! очень хорошо знаком с такими методами разделения файловой структуры css как БЭМ, SMACSS... Начав работу над React-приложением, встал вопрос о построении css архитектуры на проекте, тк кому-то не нравится модульность стилей, а кому-то то что предлагают верх упомянутые методологии... что посоветуете? существуют в данном случае какие-либо паттерны или шаблоны?

Answer 1

[Алексей Лауд]

Я использую styled-components. Описываешь стили и используешь их как компоненты, например:

const RedButton = styled.button`
  background-color: red;
`
...
<RedButton>Click me</RedButton>

Answer 2

[sim3x]

Есть еще css-in-js

Начните с https://reactjs.org/docs/faq-styling.html

БЭМ, SMACSS - разница не сильно большая. В бем детальнее мануал
Разделение по файлам будет скорее зависеть от препроцессора и ваших личных предпочтений

Answer 3

[Anubis]

Лично мне удобно пользоваться css-модулями, в качестве препроцессора - scss. При должной настройке можно забыть о повторяющихся в проекте именах классов, с server-side rendering подход тоже вполне дружит.

Answer 4

[Sanes]

Модульная структура удобней, если это не одноразовая работа. Не зря же фреймворки используют такой стиль.

Answer 5

[Listrigon]

Сколько не читаю про эти все CSS in JS, все равно склоняюсь к тому, что React отдельно, стили отдельно. Сделать отдельную папку Less/Scss, и в ней отдельные стили по Бэм или другой методике, которые никак не завязаны на какие то конкретные компоненты и UI библиотеки. А уже в React вставляю классы. Т.е так сказать CSS первично.