How I'm Writing CSS in 2024

Here's the tools I'm using for CSS this year – and my thoughts on why they matter.

0:00 – Introduction
0:32 – Design Constraints
2:26 – CSS in 2024
3:50 – Build Steps?
5:04 – Streaming
6:37 – CSS Modules
7:36 – Tailwind CSS
9:49 – StyleX
12:31 – Conclusion

[DoraTheExplorer-luin]

Generated by Merlin AI
00:02 CSS is easier and more powerful with new features.
01:46 Write maintainable CSS with good developer experience
03:19 CSS queries allow for dynamic styling without additional tooling
04:52 Streaming CSS is important for on-demand styling.
06:35 CSS modules and Tailwind CSS are popular options for styling in 2024.
08:17 Tailwind CSS allows for generating a CSS file based on used class names.
09:47 StyleX is a zero-runtime CSS and JS solution.
11:27 CSS in 2024 offers easier styling with improved tooling and cross-framework support.

[JamesMoyle_p]

I'm glad you started this with raw CSS, and how to use it in a real world scenario with lightning. Showing how CSS can be done without JS build systems or typescript

[HermesSoilder]

Thank you for always being so active in the community.

[VeitLehmann]

Nice overview! I think those three are probably the best options today. I'm still mostly using CSS modules as they solve most of the past headaches, but I'm also looking into Tailwind and StyleX.

CSS modules solve the naming collision problem of plain CSS, and with colocation with the components, they make it easy to get rid of unused styles. Drawbacks: you still have to come up with names, and it you're building a shared ui library with it, you will always ship the CSS for all modules, even when consumers only use some.

Tailwind makes it easy to get started quickly: By shipping a nice design token system, you are likely to get consistent styling without much effort. You also don't have to name classes. And with extreme colocating, it helps with code reviews. Drawbacks: convoluted JSX code, and getting overridable styles right (often needed for shared ui libraries) is not easy. Also, you lose access to a lot of CSS features, and you have to learn the system, but to use Tailwind effectively, you still need to know CSS to choose the best layout approaches.

StyleX is more complex to begin with. But it really seems to be made with shared ui libraries in mind! In contrast to past solutions in its family, you get fine-grained control over how ui library consumers can override component styles, along with type safety. Drawbacks: I personally don't like writing CSS rules in JS objects, there's quite a bit of boilerplate code needed, and you still have to name things like with CSS modules.

So, in conclusion, all three are great. CSS modules are great if you know CSS and want access to all its features without getting lost in naming conventions. Tailwind is great to get started quickly with standalone projects, and StyleX is awesome for use in different projects with a shared ui library.

[WebDevCody]

tailwind gang, comment with a "woot woot"

[RiyaBiswas-pqxo]

I really liked how you explained things, specially your storytelling style

[goodboytech]

CSS modules is just so simple and perfect

[lcarv]

Love the vid, one thing I hate about stylex (besides the name), is that you have to use the spreads a lot, which, IMO, makes the code unpleasant to read. With tailwind people can always create variables that express the intent or wrap everything in a single class.

[dannylake]

Styling engines built with a static / build time css-in-js architecture, like stylex or panda-css, is a generational leap ahead of tailwind. They provide the developer experience of css-in-js and remove the bundle cost and runtime in browser tradeoffs. UI libraries that build on top of these types of styling engines will be the new hotness in 1-2 years.

[aryankathawale]

Hey lee, preety cool stuff, i would love to have an indepth overview on Metadata api introduced with app router, specifically the og stuff and twitter images, best practices, ps: love this video, love you, thanks for amazing content

[hichemfantar]

Another great plugin I use is Tailwind Typography, I use it after tailwind resets all the css. it allows me to achieve consistent typography across the entire app and different browsers without additional setup on my end. And the cool thing is that I can opt in/out at anytime with the prose classname. I have it on by default and disable when I need to.
The plugin was initially created for html that's coming from external sources but I find it really good in my mentioned use case as well.

[randmtv]

11:20 I dislike most css in js solution, but this is at least more readable and clear compared to something like styled-components where every little style is a component so you always jump back an forth to see what's going on, plus that styles can compose from other components etc. To me personally, it was one of the worst experiences I had writing CSS.

[shahzadaalihassan]

Thank you, always for amazing content

[madebyjonny]

Great video. Only part I think was missing would be if you were to go beyond simple styles into design systems & style variants, as Tailwind does start to resemble StyleX when you want to have variants

[deathone]

StyleX and Astro seem similiar.
One of the things I hated about pre-2010 web was inline styles, which I still dislike and Tailwind basicaly is that. Just instead of writing style="..." it is class/className="".

[sethwright]

I've been in Tailwind camp for a while now.. but StyleX looks like a really strong alternative

[marclamy]

I love your videos Lee but could you change the cam video placement? it's often above the content you're showing and talking about 😅

[bingers_tv]

StyleX isn't compatible with NextJs 🙁

[virtual]

One issue I get with css modules (at least in react/next projects) is critical chain warning. Always huge when using modules for all pages and components

[aiamfree]

as soon as I saw the shirt i knew he was going to mention tailwind lol