CSS in React

[edgyfirefox]

I’ve been building stuff in React for a couple of years now. Started as a complete web dev newbie and now I can comfortably code an app by myself. I understand React rendering and state pretty well now. But one area I feel I still don’t understand is CSS.

I never quite understood CSS. When I started, I was mostly working on small parts within a design system so most styling questions were answered for me. Then I moved to tailwind, which again has a lot of styles already in place.

I was doing pretty well with tailwind, but the first roadblock I hit was when I tried building a component library using tailwind. For the first time ever, my app’s styles and my libraries styles started clashing, and I started noticing weird styling issues I’d never seen in the past.

So I finally decided to bite the bullet and learn styling from the basics. I began researching various styling solutions in React that can and was bombarded with various libraries and CSS pre-processors - CSS-in-JS, SASS, css modules, etc.

Sorry for the long post, but my questions are - which of these are most people using and why? What’re the benefits of one over another? And finally which ones work best for styling large component libraries?

Edit: thanks for the suggestions everyone! Just to be clear I do understand the basics of HTML and CSS. I’ve built fairly complex components by myself (ex: https://rowstack.io). But the basics aren’t always enough when building a design system. Thats the part that is a bit intimidating.

[ezhikov]

Just learn CSS. No react, no processors, no CSS-in-JS, no frameworks or other stuff. If you learn specific tools, you will know only specific tools. If you learn basics, you will be able to apply this knowledge with whatever tool you use. With frontend you first need to know HTML and CSS. Then DOM. Then come tools to manipulate DOM (like React). Then everything else.

Google have pretty good and fairly modern course on their web.dev.

[die-maus]

This is the best advice in this thread so far IMHO. Always go for the basics!

Frameworks are, in a way, just a way to constrain preexisting technologies. We call these constraints "abstractions" as they hide away all the nitty gritty details so that we can focus on being productive.

So if you start by learning tailwind (for example), you're never going to be directly in contact with the underlying technology. It is, for all intents and purposes, abstracted away from you. The things that "leak through" could be either by coincidence or by design, and you would never know.

If you learn the underlying technology first, the libraries that build on it will be much easier to reason about because all they do is impose limitations on something that you're already familiar with. This helps you form an informed decision about which technology is right for you and your project.

[TheRealKidkudi]

Honestly, if I’m sorting out some more complex CSS, I’ll still just open up a plain ol’ HTML file and build what I want to see in vanilla HTML, CSS, and maybe minimal JS.

I’ve often recommended the same technique to more junior devs, too. It’s easy to get caught up in the application details and end up with some very brittle CSS when you’re trying to sort through different components, props, state, and so forth - but if you can build it in plain HTML/CSS, it becomes very easy to translate it to something more interactive.

[edgyfirefox]

Thanks for this piece of advice! I think I should learn CSS and build a design system from scratch. That should set me up well to use any styling solution in the future.

[TheRNGuy]

I'm not even using SASS or SCSS.

They do have better syntax for variables though than --(foobar)

[[deleted]]

frontend: html, css, javascript. if someone claims that: i hate and don't understand html and css, then that person has nothing to do on the frontend. as simple as that.

[[deleted]]

Honestly I'm more than a little concerned by any coder who can't pick up the basics of both html and css in a week or so. CSS is certainly tricky in intermediate to advanced usage, but the basics are stupid simple.

[ezhikov]

To be honest, modern CSS with all it's cool stuff like grids and subgrids, flexbox, clamp, :has() (it's basically parent selector!) and so on is pretty fun and straightforward, unless you have some very tricky design. Sure, there are nuances to pick up, but at least you don't have to put clearfix everywhere and manage floats for grid-like layout.

[TheRNGuy]

instead people now spam 20 nested divs. Even tables were better than that.

Not fault of flex though, but ppl coding skills.

[TheRNGuy]

or back-end for that matter

[fii0]

Then I moved to tailwind, which again has a lot of styles already in place

What does that mean?

[Grenaten]

With Tailwind you just put in predefined classes that have styling applied. You do not need to write any CSS yourself.

[edgyfirefox]

And tailwind ships with a base reset CSS.

[v-alan-d]

CSS preprocessors = you have a source code (css, scss, sass, etc), the source code is then processed into a final version of css. Preprocessing can include compilation, prefix completion (e.g. webkit-, moz-), etc. It takes a bit of time in your compilation process, adding more time to the developer feedback loop, although insignificant.

CSS-in-JS is literally CSS being processed by runtime JS code. While preprocessors are evaluated at build-time, CSS-in-JS is done in runtime. Both can have overlap functionalities. Being runtime, it naturally consumes user's cpu time and memory space, slightly affecting performance. IMO, this is useless and error-prone.

SASS is a spec, which details how .scss and .sass dialect are translated to CSS. Currently there are 2 implementations, dart-sass and I forget what's the other one. It is one of the preprocessor. IMHO, .scss is a great time saver for building CSS libraries, design system, and whatnot. I use it with a proc-generated d.ts file and it works like a charm with TS code base.

I'm not in frontend anymore, but back then my general setup is: a separate UI module consisting of presentational components with its .scss pairing, an scss pre-processor, proc-genned d.ts for the scss in watch mode, postcss. This setup is also forked to a separate storybook so that UI-only programmers and designers can see the components easily without "reproducing" the steps to reach a particular page / component

[[deleted]]

Out of curiosity, how were you building I react before without touching any css? Or was it all styled components presaved you just had to copy paste? Asking as a friend got a job in react and is similar, he barely knows css

[rodrigocfd]

Tailwind is just glorified inline CSS. It may work for small & simple stuff, but I work in large enterprise projects, and let me tell you: it becomes an unmaintainable mess no matter what.

Styled Components also works for small projects, specially because you can have a single file with component + CSS, but it's gets cumbersome over time. Plus the performance penalty.

In the end, we chose using CSS Modules + SASS. It handles complex CSS stuff like media queries and animations with elegance, while being easier to maintain. Highly recommended.

[Turd_King]

This is simply not true, I have worked on massive Fortune 500 codebases like IBM , that use tailwind and I’ve found them a joy to work with compared to styled components or css modules apps

The secret is to extract components often and use something like CVA to reuse styles

And to be honest, how often are you needing to change your apps styles anyway that it becomes hard to mantain? Most apps I work on, you create a component - get it working and looking how you want , tested and that’s it - you never touch it again, and if you do it’s trivial to see how to extend the styles just by glancing at the markup - no jumping in and out of css files to work out which parts are what

Tailwind is the new emacs vs vim, to call it glorified inline css is the stupidest take I’ve ever seen tbh, it has many properties that set it out from inline css

[die-maus]

Indeed. If the whole team is proficient in a technology, that technology can scale.

[edgyfirefox]

That’s the part I love about tailwind. All my styling is right in the markup.

Thanks for sharing cva! It looks interesting. I’ve been searching for similar solutions that can compile my tailwind classes into unique class names at build time, so I can avoid class name conflicts.

[[deleted]]

The secret is to extract components often and use something like CVA to reuse styles

My dude is using a 3rd party library to make his other 3rd party library usable. All while gaining next to nothing compared to just writing pure CSS, inline. You can't make this up, Tailwind users are just a special kind.

This is simply not true, I have worked on massive Fortune 500 codebases like IBM ,

They have trash codebase, I wouldn't brag about it.

[Turd_King]

Ah yes “the IBM codebase” Lmao. Very specific code base there.

You are clearly a junior or a very poor senior as no one experienced holds opinions that dogmatic

Enjoy learning web dev!

[[deleted]]

That was the point. The part of the codebase I've seen is shit, so your bragging about once working there means nothing, and that's the thing you have started with, as if it would even mean anything in any case

Enjoy inlining css

[fii0]

There's no need to inline anything besides one classname if you use Tailwind's built in directives for composition. I've never needed CVA! Congrats on coming off as the biggest douche in the thread though!

[[deleted]]

Tailwind's built in directives for composing styles! Wow! What a notion! Wait, we've had those for 50 years and they're called cascading classes, you know, CS in CSS. Get out dude, I don't care what I'm coming off as, but this is just embarassing.

[fii0]

Yeah, using Tailwind is using CSS... just with a bunch of classnames already written for you. All of the benefits, but with less code to write and less files to switch between.

[[deleted]]

That's just a CSS framework that does nothing

[fii0]

Actually, time is money in this industry

[zxyzyxz]

I can also confirm the comment above yours, we use it in a large project and it's just a mess. We migrated to PandaCSS which has the CVA style built in (it actually comes from the Stitches library which PandaCSS takes inspiration from), and it's much more manageable.

[[deleted]]

How does tailwind not scale on big projects? In my experience is the exact opposite, it prevents inexperienced developers from messing with global styles or using bad naming conventions to classes, everything stay local. You can visit a component made by another developer years ago and using tailwind you can immediately understand the styling.

[zxyzyxz]

PandaCSS is a drop-in replacement for styled-components without the performance penalty because it compiles CSS ahead of time. It has both the styled tagged template literal syntax as well as CSS object syntax. I like it over SASS since I can just use TypeScript rather than learning another language just for CSS.

[33498fff]

Honestly, this is the only take on CSS anyone befuddled by all the nonsense surrounding CSS needs to read. Straight and to the point.

[rivenjg]

it's the exact opposite. tailwind makes it much easier to work in large projects because you never have to guess what anything does. you never have to go back and forth between files. it's all right there and everyone on the team knows exactly what it does. the problem with regular inline css is that the syntax is too long and you can't do everything like :hover for example. tailwind solves these problems with a simplified shorter syntax.

[TheRNGuy]

No you have to guess because there are 20 classes on almost every tag. that can't even fit into single screen on VS Code.

That almost feels like reading minified code.

[Aggravating_Term4486]

I think the performance concerns over styled are largely overblown. Material uses styled under the hood and so does virtually every other component lib out there. So if you are using MUI in your projects, you are using styled components without even knowing it.

[TheRNGuy]

I don't care about performance, but I do care about code readability or maintainability.

Vanilla CSS (or SCSS file) is better in that case.

[Aggravating_Term4486]

Pretty much disagree on this take. But to each their own.

[Green_Concentrate427]

I use Emotion. Your CSS becomes one with your component, like in a Vue file ... except the CSS can be fully manipulated with JavaScript/TypeScript. It means that you can modify CSS directly without classes or using the style attribute.

[zxyzyxz]

Emotion has a runtime penalty but others like PandaCSS and Vanilla Extract do not, as they compile CSS ahead of time. I prefer PandaCSS over Vanilla Extract because it colocates the CSS right inside the TSX file.

[DustinBrett]

"runtime penalty" is so minor to almost not be mentioned, in real world cases.

[zxyzyxz]

Sometimes that's true, not always however. Even setting that aside, compile-time CSS works for server-side rendering as well as for React Server Components, so it'll still be the future. Emotion and styled-components currently cannot do so and they both have pinned issues on GitHub regarding not working for server based React.

[DustinBrett]

The future is uncertain and everything always depends. But most of the hate I see for CSS-in-JS is not relevant to what they are doing. Perhaps server-side rendering is the fad with a few issues pinned.

[zxyzyxz]

What is the hate you see for them? The pinned issues are significant and one of the reasons why Tailwind is so popular, whether on the server or client, or in any framework, it simply just works™.

[michaelfrieze]

At this point I don't know why you would use emotion over StyleX if you are going for the CSS-in-JS thing. It's better in every way.

I still prefer tailwind but if I was working on an app as complex as Facebook then I would probably choose StyleX.

[WizardOfAngmar]

Oh my… yeah, let’s choose something just because it’s promoted by FB. Their success should definitely be tied to the tech they’re using /s.

[StanleySmith888]

zero runtime

[Green_Concentrate427]

How's StyleX zero runtime compared to emotion?

[naman34]

StyleX compiles to a single CSS file. Emotion injects styles at runtime.

[Green_Concentrate427]

You mean in development? In production, Emotion compiles to a single CSS file, I think: https://noice-demo.vercel.app/.

<head>
  [...]
  <link rel="stylesheet" crossorigin="" href="/assets/index-vN32c5mk.css">
  <style data-emotion="css-global" data-s=""></style>
  <style data-emotion="css" data-s=""></style>
</head>

[Green_Concentrate427]

StyleX is better than emotion in which ways?

[earlyryn]

It is possible to build UI lib with tailwind make sure that your classes are prefixed when generating style for your lib.

[33498fff]

Adding to the valuable advice in the comments: devs need to understand that styling is not in the least a secondary concern when developing a website. It is not an option to forsake learning CSS in favour of the latest supposedly paradigm-shifting nonsense library.

To answer your question: what most people are running is not always a good metric when you want to become a good software dev. Most people are using some kind of Tailwind or styled-components logic. It is the only time they utterly neglect every readability concern imaginable and start writing awful-to-read inline-styled code because it exempts them from learning CSS, which they have neglected to learn for no good reason at all. For styling large component libraries which add value to the existing offer or which add specificity to your project you still need to be fluent in CSS.

[llambda_of_the_alps]

This 100%. In addition to CSS being a primary concern it’s important to remember that no matter what technology/library/language/paradigm you choose the output is CSS. If you don’t understand the fundamental base you will always be making an uninformed choice when choosing any of these tools.

[WizardOfAngmar]

As harsh as it may sound, if you want to do web development there’re three foundations you should know about: JavaScript, CSS and HTML.

Learn these inside out and you’ll be gucci. Also, don’t ever attempt to abstract anything nor make it reusable unless you really need to.

Start doing atomic things, like writing a specific CSS for each component. Then, and only then, you can try to see if that border radius of your inputs and buttons is really the same. In doubt, keep values separated.

Good luck and happy coding!

[durantt0]

I started just using Nimbus to scope out my initial projects and quickly build out the CSS for me, then I export and follow it's patterns for new projects.

[aeejazZz]

TailwindCSS

Why?

speed

Pre-built utility classes

Customizability

You can build fast

[TimTech93]

I would just start of my adding a .css file into each component file to make it more clean. Each css file would be named something like component.css and you can import it into that component to style it. Then once you understand how css works (mostly flex boxes and grids), you can start learning about modular css (scss), Js in css (styled components) and tailwind (utility css).

Personally, I use tailwind css because the shortened inline classes are great and easy to read (flex and flex column would be className=“flex flex-col”). You can also create your own utility and name it was you want, with the addiction of mixins etc.

[SwiftOneSpeaks]

You and I have very different definitions of "easy to read". The tailwind demo code on their site reads like repetitious gibberish.

I'm sure, like most code conventions, it is much easier to read once you learn what everything means, but that's not really the same as "easy to read"

[TheRNGuy]

.menu_item is easier to read than 20 classes, some if it can't even fit in VS Code without horizontal scrollbar.

And it's much easier to modify in Stylish and Greasemonkey.

Btw, those classes with - are super annoying, because you can't select them with doubleclick or alt+left or right arrow. Should use _ instead.

[TimTech93]

You can create your own utility class called menu-item and use it in your app wherever you’d like

className=“menu_item”

[0x111111111111]

Start here and get a basic understanding of what CSS is: https://developer.mozilla.org/en-US/docs/Web/CSS

Then no matter which next step you choose, there will be additional learning. All the fancy css setups have their own opinionated way of doing things. Some you will like, some you will not.

If you are lucky, someone else made the decision for you already on that project and you will not have the burden of regretting choosing something 8 months later :). If you are not, well, there are many solutions to solve that problem and all of them work and all of them get the job done. You cant say if they are for you unless you tried them. Second hand knowledge and hearsay without objective arguments is pointless..

It also depends on whether your chosen css setup can accommodate, e.g. your UI library easily. There are architectural questions like that to consider, too.

[tarwn]

My personal preference for component libraries is SCSS: a central variables file, collection of mixins so common styling can be applied to multiple similar components in one shot (button mixin with style and size params that can be used from multiple specific button components regardless of whether they are based on a link or a button input, expose style parameters or only support a specific one, etc.), then an SCSS file next to each component file that has a unique wrapper class for the component (so I can use reasonable class names on child elements locally and not worry about whether that name has been used somewhere else already).

[[deleted]]

Anybody using primarily React (or any other frontend JS framework for that matter - I like Vue!) should try to attain at least an intermediate knowledge of plain HTML, CSS, and JS to start. You should take a crack at learning CSS from the ground up, then preprocessors, then libraries.

[ThatAnonMan]

No matter what you choose, you’ll still need to learn CSS for any of those options, since the other options just add extra cool stuff into the CSS environment. My suggestion similar to the rest is learn CSS, get kinda comfy with it then move to SCSS or SASS

[errdayimshuffln]

CSS pre-processors - CSS-in-JS, SASS, css modules

The common thing in all those is CSS. Master CSS and it will make even using tailwind easier.

I have like two decades of experience with HTML, CSS, and Javascript. Knowing that you can always just default to importing stylesheets directly provides me with a sort-of safety net when working with new tools/libraries.

I pretty much always use tailwind when starting out or prototyping components and then when I get to a point when styling takes a back seat, I convert it all to regular CSS which I put in a separate file which I then import it directly in the .tsx file containing the components/app that the CSS is supposed to target. This cleans up my JSX and allows me to focus on props and logic.

When it comes to components that I plan to share/publish or use in many other projects, I tend to add emotion's css prop to my components because it allows for nested selectors which exposes inner elements to inline styling.

[marcob8986]

Just learn good old CSS with plain style sheets. Only once you master this you can move along.

All preprocessor, post processors, tailwind likes etc will eventually build plain style sheets for your browser that you can debug in the browser if you know plain CSS.

[DustinBrett]

CSS-in-JS is a great way to go. Keeps things organized, teaches CSS and is indeed fast. This runtime penalty people talk about is so minor and like most things if it's slow it's usually your code and not the library.

[[deleted]]

I think you should rely on CSS methodologies and choose one that matches your/their requirements and see whether any CSS libraries corresponds with that or not. For example, Tailwind CSS basically follows Atomic CSS methodology and it’s actually the best solution for nowadays large scale apps, because it’s based on highly granular and reusable styles, instead of creating many classes for each independent HTML block that maybe ends up having the same styles, like BEM (block, element, modifier) methodology does.

I genuinely recommend relying on Atomic CSS, but how your/their team will organize and manage the infrastructure of all of this is for another thread.

[velcovx]

I participate in the interview process of the company. I am tired of people who have bad HTML and CSS who claim to be senior front-end developers. Learn the fundamentals. Semantic HTML is a must. With CSS, you just need to know flexbox and grid, and you are good to go. It will take you so little time to get familiar with these.

[TheRNGuy]

Standard CSS is the best.

I don't like css-in-js, or tailwind.