React Styling— Best Practices 💅
Stephanie Workman

I already know I’ll get bashed but I’ll still go for it.
Saying that CSS does things without you willing it is stupid of course. It’s just that you don’t know that you asked CSS to do exactly that. Be honest, you know I’m right.
That simply means you don’t know enough of CSS. No offence. If the language is very simple, it’s also very powerful and you have to know how to use it.

BEM can solve the problems you’re talking about (things changing here and there without wanting it) if you know how to use it as well. BEM is all about namespacing. It prevents from any name collision, so no more problems if you use it properly.

Defining your styles in your components only prevents you from sharing your styles easily. It prevents a designer from intervening on the development because touching the styles in React may be dangerous if you don’t know React.

Defining the styling inside the behaviour is just going against the principle of separation of concerns. You could just manipulate classes in React and have your styles in a dedicated stylesheet beside your js file. Webpack can assemble everything on build. Even if I don’t like it, the module styleable can take the place of BEM and isolate your classes automatically.

So definitely, writing the styles inside React is a no go for me.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.