Which css architecture to choose for a React app?

Question

css

Good time everyone! I am very familiar with such methods of splitting the css file structure as BEM, SMACSS ... Having started working on a React application, the question arose of building a css architecture on the project, maybe someone does not like the modularity of styles, but someone is offered the top the mentioned methodologies... what do you recommend? Are there any patterns or templates in this case?

Answer 1

I am using styled-components. You describe styles and use them as components, for example:

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

Answer 2

There is also css-in-js
Start with https://reactjs.org/docs/faq-styling.html
BEM, SMACSS - not much difference. See the manual in more detail.
Splitting by files will rather depend on the preprocessor and your personal preferences.

Answer 3

Personally, I find it convenient to use css modules, scss as a preprocessor. With proper configuration, you can forget about the class names that are repeated in the project, the server-side rendering approach is also quite friendly.

Answer 4

A modular structure is more convenient if it's not a one-time job. No wonder frameworks use this style.

Answer 5

No matter how much I read about all these CSS in JS, I still tend to think that React is separate, styles are separate. Make a separate Less/Scss folder, and in it separate styles according to Bam or another method that are not tied to any specific components and UI libraries. And already in React I insert classes. That is, so to speak, CSS is primary.