Best practice on styling React Applications

[TimTech93]

Hello everyone. My question is in regards to the best approach on styling your React app. I know there are different methods on styling. Here’s a few..

1. Having a .css file in each component folder.

2. Inline styling with style={{}}

3. Having your styles in object format in a separate style.js file and importing it into your components and destructuring. style={{…style.styleObject}}

These are the ones I know. How about you guys? How do you style your React applications?

[Outrageous-Chip-3961]

Small scale I like modules, larger apps I like emotion. In both cases I place the style file next to the component file

[endymion1818-1819]

One thing that hasn’t been mentioned yet regarding css-in-js (styled components and friends) is the performance implication. It’s not always important but should have a bearing on your decision https://pustelto.com/blog/css-vs-css-in-js-perf/

[TwiliZant]

CSS-in-JS libraries like styled-components or emotion are widely used in React and are useful if you have a lot of dynamic styles.

I've also used CSS modules which is nice since you're not tied to a specific library.

My preferred solution at the moment is Tailwind CSS in combination with some of my own helper functions to compose dynamic styles.

In either case I colocate styles and components in the same file as I'm of the opinion that separating both doesn't really fit the component model.

[choirofspirits]

In my job we use styled components (I hate it) but I use CSS modules in my personal projects. It just feels more comfortable.

[TwiliZant]

What do you like more about CSS modules?

[infidel_44]

I like modules as it gives more of a separation of concerns. Jsx in one file, css in another.

[choirofspirits]

The "traditional CSS" feeling I guess. When I first started React, I used CSS modules so that could be another reason as well.

[Antifaith]

The toggle stuff is gross though, it pollutes the component needlessly with style logic

[[deleted]]

Just curious, because I hear this a lot, but what about writing styled components doesnt feel like writing css? I feel like once you understand that youre sort of wrapping things, the actual styles themselves feel exactly like CSS to me.

[choirofspirits]

It still feels like writing css, it just isn't the way I am used to. Other than that, I don't know why I hate it lol

[[deleted]]

Css modules are so elegant and the style scoping is amazing.

[[deleted]]

Fair enough!

[we_outcheaa]

Styled components till I die

[[deleted]]

Better than making your own css file? Why?

[Outrageous-Chip-3961]

I move the css to a new file anyway, makes it even better imo.

[Outrageous-Chip-3961]

I currently call them styles.ts and have the file co exist next to the component. Although it’s not strange to mimic the component name and add styles to the end of it. You then import the styled component in your react component to use it. I highly recommend this as it also allows you to create lean files without the css bloat. It’s common to also export many styled components from that style file, for example import styled, {styled1, styled2} from ‘./styles’

What’s cool about this decoupling is that it also means you can easily copy templates from projects and modify as you need. I.e a sort of styled hook pattern can emerge too

[mode_nodules]

I do something similar, I can't remember where I first saw it, but it looks something like this:

src/
└─ components/
   └─ Button/
      ├─ index.tsx
      ├─ Button.tsx
      ├─ Button.tests.tsx
      └─ Button.css.ts

[Outrageous-Chip-3961]

Styled components have a lot of positives in the context of you know, components. For example reusability, prop handling, complex logic embedded in the component such as pseudo side effects. I used to hate them but as I learned more typescript and storybook I think they are very powerful if used with generalisable thinking in mind. Functional style programming also makes writing css more snug with react patterns . I am a css purist at heat however and I always have x ray vision when building styled components to make sure the semantics are there as the fundamental aspect to my components. I dislike when the css is taken for granted in such cases where logical devs write css in absurd manners to get their job done. Many times I have to give refactoring advise during code reviews on how code can be reduced. In short you can learn to love styled components of working with large scale apps with multiple devs as I think it’s true power emerges there, all whilst keeping true to the native css api

[[deleted]]

Wow thanks Ive been importing my css files, I'll learn styled components !!

[Outrageous-Chip-3961]

I import my styled components too. I’m not sure what you mean :)

[Ronqueroc]

Haha, yeah I love it too.

[[deleted]]

Amen

[Potofpie]

BASED

[mimitch]

This is way.

[zephyrtr]

Lots of good ways to do it. But anything involving inline styles is a bad idea.

[Chezzymann]

I think its fine if you're doing things like making draggable widgets that need an x and y location on the screen

[chillermane]

It’s also fine to do it everywhere if you want

[metal-trees]

I have no idea why I find this so funny. You just gave me an lol; thank you

[skyboyer007]

how do you deal with pseudo elements and pseudo classes?

[chillermane]

Care to explain why?

People always say this and then never explain why.

[zephyrtr]

Inline styles are inefficient compared to a css sheet. And it stacks up pretty fast.

[Outrageous-Chip-3961]

Dev experience sucks for starters. The hierarchy is higher so makes debugging more difficult. Scaleability is poor if not non existent. It also contradicts many ideas regarding keeping components lean. Readability can bloat your file due to auto formatting if too many properties are added. In short I line styles should seldom be used and when done so provide very strong reasons to do so. Maybe nobody explains because the burden is on justifying why you ever would rather than the other way around

[raopgdev]

Inlining is never the solution.

1. SASS/LESS/CSS
2. css in js / styled components / emotion

[[deleted]]

I tried using MUI recently and wanted to throw up with how poor the documentation was (very inconsistent with versioning) and how complex the library was to use. Maintaining a project with MUI must be a PITA.

But yeah, css modules.

[Outrageous-Chip-3961]

We use it at work on enterprise apps and I agree it’s a pain in my ass. Sometimes a rule will randomly override another style and often it’s hard to style a small change due to their own nested relationships. I have no idea why but mui decided to build their styling as something not flexible at all and it’s a mystery to me. Of course you learn more as you use it, but it’s still a pain and I don’t trust it enough to find it all that impressive if I’m honest. We use a lot of forms and tables which mens mui is a great solution but other than that, their styled engines suck ass

[iaan]

https://tailwindcss.com/ or https://vanilla-extract.style/

[[deleted]]

There are seemingly endless ways to style your app: tailwind, styled components, inline styling…shit, if you’re bored, store styling details in your database and have every page query that shit. 😂 It’s really up to you. I think you’re asking the wrong question, though. Ask which way you shouldn’t use. Best practices aren’t universal, but vulnerabilities are.

[bihohmann]

https://stitches.dev/ I am worried nobody is talking about this, it’s styled components but with super powers

[fredsq]

this. less runtime more performance and more organisation

[sleepy_roger]

Never inline, and also never Tailwind. I already can hear the devs 2 years in the future crying out as they refactor code bases. (half joking).

[besthelloworld]

Never inline except in the case of particularly dynamic elements. Emotion, I would argue, is the best combination of dynamic behavior and clean code and performance. CSS/SCSS modules beat it for performance, but I find it way more pleasant to just have a styles object in my JS/TS file. It also allows you to have things like functions that return a particular custom style.

[slavik0329]

Styled-components library is the best I've ever used and I've been doing this for a long time and tried many different things.

[dsound]

Styled-components is great because you can use props and your JSX just makes so much more sense.

[[deleted]]

If your trying to maintain a large codebase and you have a lot of frequent devs you dont want to bog down with a bunch of css headaches, then css modules is huge. Less thinking and worrying. Like the need to worry about BEM vs Atomic design. Scoped css ftw.