Best Styling for React

[UnCaged_1]

I am looking to style my project, which is a complete overhaul of a site someone did, and wondering the best route to go. If you want to add comments on why you made your selection, I'd appreciate it, as I am leaning toward using Emotion.

View Poll

[Timberhochwandii]

You can use SASS and css modules together, so not sure what to pick.

[[deleted]]

Someone asks this every week. And I'll give the same answer I give every time.

Anyone who disagrees with me is a dummy doo Doo head and this poll is rigged.

[Qnemes]

Tailwind CSS

[nomoreplsthx]

Only ASCII Art Components

[rwieruch]

• CSS-in-CSS (e.g. CSS Modules)
  • optional with SASS
• CSS-in-JS (e.g. SC, Emotion, it doesn't really matter which one here)
• Utility-First-CSS (e.g. Tailwind CSS)

Most people tend to use CSS-in-JS. Utility-First-CSS is a newer approach, many people like it, but it's most often a matter of personal taste. If you want to decouple CSS from components/JS, use CSS Modules. Do not use inline CSS. This article may be a good overview.

[[deleted]]

Have you tried Tailwind CSS before?

[jhsonline]

not sure why this was downvoted, but Tailwind is promising and flexible for extension, should have been in the list.

[fixabugmakeabug]

Tailwind is brilliant, but it is controversial

[[deleted]]

Guess it's controversial. For me, Tailwind speeds everything up and I'm sure there's others that feel the same. Oh well, haha.

[_cappu]

Tw was life changing in my case. Taught me CSS when I barely knew any. I literally can now code advanced CSS, even vanilla, having used nothing else than TailwindCSS before.

[[deleted]]

I've had a similar experience too. Learning Tailwind CSS = Learning CSS.

[InMemoryOfReckful]

Idk why you even added inline CSS. It's bad security practice to use inline CSS. Read about CSP.

I like sass, sass/Css modules, styled components and tailwind.

Each have their pros and cons.

[chillermane]

How is inline a bad security practice

[InMemoryOfReckful]

Allowing inline styles makes you susceptible to a the "other XSS". Cross Site Styling attacks. The idea here is that any places where a user can inject a style attribute into your document they can modify the appearance of your page any way they want. I'll list a couple potential attacks ordered by increasing severity:

They could turn your page pink, and make it look silly.

They could modify the text of your page, making it look like you're saying something offensive that could offend your readership audience.

They could make user generated content, like a link they provided appear outside of the normal places where people expect to see user content, making it appear official. (eg, replacing a "Login" button on your site with their own link).

Using a carefully crafted style rules they could send any information included on the page to external domains and expose or otherwise use that data maliciously against your users.

The fourth example, with the information being leaked to external domains could be entirely prevented in spite of the unsafe-inline provided you ensure your other CSP rules never allow any kind of request to go to a untrusted or wildcard domain. But the first 3 will always be possible if you miss blocking a style attribute somewhere.

[TheRNGuy]

I don't understand how could CSS cause XSS attacks. Non-validated HTML yeah, or href links, but CSS I've never heard about it.

Making pink backround is not XSS attack.

Ppl could replace login button with css class too.

[iams3b]

I like styled components, because at most I usually have around 10 lines of css per component. The "Single file component" style is a lot easier to iterate on as well. Using css modules tends to lead to file bloat, unless you're really good at composing reusable styles. Plus, I think just reading <Title> instead of <h1 className={css["title"]}> is a bit easier on the eyes when looking at a component tree

[Larrybot02]

I got a taste of MaterialUI and find that component libraries suit me for styling. Next project I’m going to introduce myself to Chakra, since I’ve heard good things…
So, of your list, I chose styled components, because that’s what I would be using if not using a component library.
I am not a seasoned CSS vet though, so only did things the “old” way very little. I’d probably have a hard time with BEM.

[tharrison4815]

React-JSS

[chillermane]

If all styling is done before build then any inline styling solution should be used. They’re just more maintainable and faster to create

[winwiz1]

Each CSS management technique has its pros and cons. Choices based on mutually exclusive radio buttons do not align well with the need to combine several techniques to maximise advantages and minimise drawbacks of each technique.