@AlexDeLarge and any other React guys, which do you prefer? Traditional css files, whether that be vanilla or with a preprocessor, or style objects for each component.

There are some pretty clear pros i can identify for both sides, but I'm pretty sure I'm missing somethings and I'd like to hear from you guys your opinions and experiences with either

I usually choose to go with BEM using either pure css or sass, it depends on the project size. I've tried CSS Modules, styled-components and some alternatives but never got satisfied.

@cowsay care to elaborate on why you were never satisfied?

Depends on the overall project or the environment. Lemme explain what I mean by that. When working with React on the web, I stick to a similar approach to what Alex said and bundle css files. When on native tho, my prefference is for style objects since in mobile I always liked the idea of having the visual modifications close to the logic...horrible I know but it works for my quirks and mental blocks.

@AllenII
I wasn't very satisfied with styled-components because, at the time, style changes would cause the browser to refresh. Also, the generated classNames made the DOM hard to inspect. Lastly, it allowed other devs in my team to more easily do hacky stuff: create many nested element selectors and define small components in the same file of a container component for specific styling. CSS modules on the other hand didn't satisfy me because (1) className values got too verbose because of the function call; and (2) I don't like how camelCase classes look.

Note that most (if not all) of this is purely subjective.

I'm interested to see what others have to say

I started doing react with sass, because that was what I was used to before react, but I've changed to radium and now styled-components.

Having styles in your js code makes it easy to change when props/state change, but you can easily achieve that with classnames, too (take a look at BEM modifiers).

I'd say it's really a matter of preference or what you feel comfortable using. I could go back to using sass but I'm good with styled-components.

@cowsay I've only recently started using styled-components, but I've never seen it refresh the browser on style changes. How long ago was that?
Yeah, the class names it generates are cryptic, but it doesn't really matter if you have react dev tools.

@shellbug not sure, but it was before v2, probably it was just our webpack config

Comment to follow so I learn some shit.

Who says you can't use both, a single style sheet for reused things and components styling for scoping?

We use SASS and try to follow BEM. 1 scss file per route or logical section/big components and import them in main scss. Also a seperate scss for const variables like colors and such.

@AlexDeLarge I use stylesheets with post-css as my preprocessor, just as I would without React. It's only recently I thought about it more seriously since I seem to be doing more and more React. That's why I'm asking. Your way makes sense, but I like @Jameslikestea suggestion of using both where it makes sense.

I started to consider styled components with @shellbug mode of thinking in mind; changing styles directly with prop/state changes, and also with the idea of modifying classes with optional additionsl props. But none of that is impossible with classes, so I was just wondering if my ideas made practical sense to anybody smarter than me 😂😂. Also there was a bittersweet appeal to having style info right next to the component it was for

@AllenII yes, it's very nice to have the style in the same file as the component, but there are those that prefer to separate view from styles. In my opinion, with react you are already mixing view and logic in the same file, so adding styles too is just a small step.

On the other hand you can have the .js and the .scss files next to each other in the same folder.

@AllenII @shellbug do you guys have any issues with performance? I mean, changing a prop has to be slower than toggling a css class.

@shellbug I disagree, if you separate well functional and container components then you're not mixing view and logic at all. Besides that, as you know, jsx is just sugar for function composition.

@cowsay you're right, but the reality is that a lot of us don't get that right 100% of the time😂😂😂

I'll stick to what I'm doing now, but I'll try out styled components in my next React project

@cowsay I know all that, I was just referring to that "Wtf, html in js?" thing people use to say when they first look at react. Once you pass that "html in js" shock, having inline styles isn't such a big step.

Regarding performance, I never benchmarked, but I have no complaints. Also, don't you need to change props to toggle class names?

@shellbug yes, but it reflects in a different way. By toggling one class I can set many different properties of the element and it's children.

@cowsay toggling anything in React involves changing props/state, so I'm not sure of what you mean

@AllenII here's an example:

Let's say I change a given Button's prop 'disabled' to true. It can toggle a class 'button--disabled' which will change it's color, border, shadow, etc. and it's child icon color too. How would you do it with styled-components? Wouldn't it cause many render calls?

@cowsay you can do the exact same thing with inline styles. The approach would be different depending on the tech used.

@cowsay I'll later provide an example using styled-components when I'm on my computer.

@shellbug okay, but I was referring to styled-components specifically

@shellbug thanks

@cowsay what @shellbug said. And by the way, React does not allow changes to props and stare within the render function anyways. I'll provide an example of my own too ic I find the time

@cowsay here's a simple example: https://codesandbox.io/s/...

I'm sleepy so didn't care about making it look nice.

@shellbug oh, thank you for the example, I see what you mean now. I was sure I tried that before with v1 and it didn't work. Anyways, I still find it easier and prettier to use classNames + modifiers.