How I'm Writing CSS in 2024

[@JamesMoyle_3p]

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

[@goodboytech]

CSS modules is just so simple and perfect

[@rand0mtv660]

I personally really like CSS Modules, but they aren't perfect. I've been using them for last couple of years, but recently switched to Tailwind and I think I'm not going back.

[@axlYT]

@@rand0mtv660same

[@axlYT]

@@rand0mtv660after all this css and scss modules i tried tailwind and was amazed by it. 99% of the arguments people use against it they don’t really understand the right way to using it. If u use something like React its just perfect for now

[@darshandhabale143]

@@rand0mtv660 what are the issues you faced with them that tailwind solved

[@aberba]

​@@rand0mtv660 what was your issue with it?

[@WebDevCody]

tailwind gang, comment with a "woot woot"

[@learntechbasics]

Woot Woot 😂

[@harsh_9797]

Woot woot 😅

[@itsyourboyt4683]

woot woot

[@DestinoDello]

woot woot

[@rishabh1S]

Woot Woot 😂

[@HermesSoilder]

Thank you for always being so active in the community.

[@leerob]

🖤

[@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.

[@Kenshin-z5m]

StyleX is basically trying to solve cross platform styles like using same styles in web, react-native, desktop etc.

[@RiyaBiswas-pq1xo]

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

[@hichemfantar1965]

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.

[@aryankathawale9269]

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

[@leerob]

Good idea!

[@maxwebstudio]

Oh that's a pain !

[@dannylake1968]

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.

[@DoraTheExplorer-lu2in]

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.

[@lcarv20]

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.

[@JamesQQuick]

Great content as always!

[@madebyjonny7637]

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

[@leerob]

Yeah, StyleX seems really powerful here. Agreed.

[@sethwright2518]

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

[@deatho0ne587]

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="".

[@mateus.duraes]

What an amazing video, thanks Lee

[@virtual5754]

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

[@loquek]

Panda/CVA is looking super strong

[@TrackingAcademy]

Thank you, always for amazing content

[@KuroKazeZX]

irdk who stylex is for, because even lets say a brand wants to make the style consistent accross platform, its simply too much busiwork to implement some additional basic styling for the consumer, which is far easier to write and read with tw

[@TheBswan]

Not everyone wants to learn all the tailwind shorthand, have long class strings in their markup, and bring in additional libraries like cva for variants. StyleX has a minimal API surface area, so if you know CSS you can learn StyleX in 10-20 minutes. I'm not necessarily sold one way or the other; just two different approaches with different tradeoffs.

[@KuroKazeZX]

@@TheBswan thats fair actually, if you had to pick one poison stylex might be easier to down for the uninitiated. i think longer term, tw is faster to pick and iterate with, but yeah if tailwind is discontinued then that's a lost knowledge. btw, i agree, cva and tw-merge should be built in to tailwind. that said, i think inline styles, as long as it makes "class", is more readable and configurable than ...someStylex. but preference pretty much.

[@jellyfish1772]

this is a cool video.thanks!

[@bingers_uk]

StyleX isn't compatible with NextJs 🙁

[@marclamy9997]

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 😅

[@yondoy987]

styled-components is the best for me

[@SunAndMoon-zc9vd]

Why would you not use the CDN for production code? Ref. the part at about 8:20 about Tailwind CSS.

[@AlwafiCharki]

I want to ask for you advice 🙏 I am now at point that i can work very well with css and can say i understood mostly everything , but i have no idea of boostraps and that tailwind thing and the other things , i want your advice what should i do next ? (My ultimate goal is to make amazing websites that is responisive)

[@HumanoAI]

Learn css html and js then have the AI help you code extensive functions and the back end. You must know how to communicate with the AI in describing what you need. Without terms and some understanding of how things work you won’t be able to use AI to resolve. If you learn frameworks you will always be a T the mercy of those frameworks, there is a pro and con. Getting up to speed is very frustrating as breakage happens. I think AI is stunning frameworks, reason being is you can have AI create only the js needed, avoiding all the extra code that goes unused.

[@otto3225]

That's perfect, knowing CSS is always an advantage over knowing a framework. You can build everything you want with pure CSS and it has great features to make your websites responsive and you can easily debug it with dev tools in your browser. Frameworks come and go like trends come and go. Maybe in 3 or 5 years everyone says, "get rid of tailwind, it's the biggest crap we ever made 😂" ... and i'm pretty sure that day will come, like it came for other super trendy trends. CSS will still be there and it will have even more amazing features than it has now 😉

[@AlwafiCharki]

@@HumanoAI very eye opening thank you very much🙏🙏

[@AlwafiCharki]

@@otto3225 this what i though too , right now i am taking lessons in boostrap , and i cant stand it specially that i can do everything it does with pure css , but now i need to remmber the names of classes just why lol But just as you said as lobg i understand the core which is css , i can adjust with time

[@Nightizm]

I think my ideal would be using Tailwinds design system along w/ a StyleX alternative like PandaCSS

[@SCK-47]

why do you need stylex what does it give that you need along side tailwind? I am currently using MUI and I want to switch to Tailwind but stylex is very like MUI so I am torn

[@Nightizm]

@@SCK-47 I like writing styles, it's a personal preference. I'm just saying I really like Tailwinds robust Design System with spacing, colouring, etc, but hate actually using Tailwind. So I'd much rather start a fresh project using their design system but writing my own styles with a zero runtime CSS-in-JS tool. Also MUI is a component library and stylex is not, I wouldn't be comparing them.

[@adamthesoftwareengineer]

Hey Lee, nice video! I got a question related to Next tho. Is it fine if I store my reusable components or services (functions I use to retrieve data from my DB) in folders that are prefixed by _ in my app directory? Or can this practice potentially impose routing performance issues if they get heavy? Thanks in advance!

[@ThanHtutZaw3]

I can't check css module import error with next lint .

[@rand0mtv660]

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.

[@dealloc]

Styled components can be done with different APIs and is not limited to only create components from styles. It's useful for creating reusable wrapper components for default styles, like buttons, etc. which forwards all props from a base html tag. Another example is Stitches which allows you to define variants and expose those as props (rather than exposing arbitrary CSS attributes as props). It scales the same as StyleX, because each CSS attribute + value becomes its own class, so it scales linearly. As with other styled-component like APIs it also exposes a `css` function which can be used for creating class names from styles, like StyleX' API. So the only difference API-wise is that StyleX doens't allow cascading and doesn't provide an API to create wrapper components.

[@rand0mtv660]

@@dealloc how is that base/default component different compared to using a stylex defined style here that you just put as first and those are your base styles and then you add a prop called "variant" for example to expose different variants of that component? I mean, maybe I didn't explore styled-components fully, but everything I had contact with when working with SCs was just a horrible experience. I respect that many people might like them, but I'm not one of those.

[@dealloc]

@@rand0mtv660 I wasn't talking about styled-components (the library) specifically, but Stitches which is/was another "styled" component library. It has its own problems-e.g. passing props can end up duplicating CSS at runtime. In Stitches (and APIs like it) you get a nicer API around defining variants with zero logic, and produces deduplicated styles, since they utilize CSS variables (for tokens) and generates class per attribute. For variants you just define an object with keys that are the prop names, which defines an object of values mapped to the style they represent. These are then exposed on the resulting React component. For example say you have a Button component and you add 2 variants, one "kind" where its values can be a string of "confirm" | "destructive" | "default", each defining their own style, extending from and can override from) the base style, and another that maps a boolean value (e.g. true) to specify an outlined style. You can choose to either use CSS variables directly (using var(--... syntax)), or create compound variants to create the combination of variants so they can be used with different permutations of those variants. The point here is that styled components doesn't have to be limited to only creating components from CSS with custom handling of passed props using template strings.

[@LutherDePapier]

What's the font you're using in your VS Code ? Edit: My bad, I just realized it's CodeSandbox.

[@Jason-mk3nn]

5. No popups, unless critically essential to the end user. The popup on blur should be penalized.

[@nomadshiba]

really love this new css @scope foo @scope { :scope { background-color: red; } .foo { background-color: blue; } } also big fan of Name .card { --my-special: "card" } @container style(--my-special: "card"){ .name { color: red; } }

[@lukasmolcic5143]

Can Next please allow loading non .module .css and .scss files in to components, Next can handle the loading and leave the worrying about name collisions to me, I want to have non hashed class names which I when needed can reference contextually in other files and I don't want to always load those styles globally which is the only option next provides.

[@theReal_WKD]

I'm not sure if I fully understand what's your issue but do you know that you can create css/scss file and import them inside a specific component file? It essentially works like a module.css. It gets imported only when the corresponding component is used, and you get to keep clean class names. The only diff would be that these classes, once loaded by there component will be accessible by the whole page and not just scoped to that component like with module.css. Actually, using module doesn't scope the classes for a specific component, it just uses hashed class names so no matter how you named it in your file, it will end up as hashed to avoid conflict with a class named identically in another module that would happen to be loaded on the same page.

[@MaxWeir]

Is there any advantage to having css variables for more than just colour? We currently only use them for colour but I’ve seen other sites that use them in greater detail.

[@UTube-nigga]

Font sizes? Padding? Margins?

[@w00t360]

I've been in the web industry for over 15 years. I went from Bootstrap to Tailwind. Haven't written a single CSS line of code since. And like Lee said, coming back 2-3 years later you'll immediatelly recognize the APIs, text-sm, font-semibold etc. I'm never going back to writing CSS ever again!

[@aiamfree]

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

[@Iammrunkown]

You didn't mention Panda CSS. I wonder why

[@leerob]

Panda looks interesting as well!

[@newbielife1]

is styled-components dead?

[@coherentpanda7115]

Dead? It gets updates nearly every week, and still just behind Tailwind on the popularity chart.

[@TomRadic]

Is it bad practise using Tailwind css with modules? I am using @apply with "tailwindcss/nesting": "postcss-nesting",

[@bn5055]

You should avoid using @apply unless absolutely necessary. If your css is in a separate file, you're doing it at least a little wrong 😊

[@germantoenglish898]

Working at Next.js must be cool.

[@capricik]

How i'm writing css: "hey chatgpt, what's the code to give my text a Red background?"

[@PaulMcCannWebBuilder]

How I'm writing CSS: "Hey copilot, build me an entire site, and make the text the most commonly loaded google font, on a red background, but make the red color value hsl."

[@aberba]

stylex is overengineered just like most things from those companies

[@VeitLehmann]

Looks like it's made to build a shared ui library and using that across different projects. That's where it shines because you can define how component styles can be overridden by ui lib consumers in a much more granular way than ever before. For standalone projects, it's likely to be overkill.

[@samoart]

panda css ❤

[@goldroger6374]

styled components go brrrrr

[@WebsiteDevelopment-Uk]

I personally don't like Stylex as it can get very confusing.

[@mikehurtado4772]

Pues igual que antes, con el teclado

[@kasper_573]

Vanilla extraaaact

[@IkraamDev]

I prefer to use Tailwind or Styled Components.

[@mattwebbertime]

5:50 - "NFL"

[@okopyl]

The same as in 2023, so change the title of the video so it's not misleading

[@iAmTheWagon]

tailwind-variants

[@codokit]

Traditional CSS has much less issues than CSS in JS, Less/SASS. Tailwind is horrible thing.

[@thegrumpydeveloper]

Scale that up, add a few hundred devs and try to touch that one css file without breaking things. I’ll be busy shipping tailwind in production while someone sweats that monster file and debates Bem naming standards of a giant oversized css littered with unused classes and all those classes that were supposed to be reusable but end up being nonsensical because of the cascade.

[@codokit]

@@thegrumpydeveloper CSS modules was invented in 2015 I guess. Plus do not mix class scouping and CSS design system. You can have own design system that adopted for your needs instead of tons of tiny CSS classes. Example: you can have one ".toolbar" that adopted for many usecases instead of each time describe the same via Tailwind. You can define react component of cource, but you need react in that case. Poor design system provocate to use a tons of libs.

[@tibitomuta7996]

Codding is dead.... AI is taking over! Is a waste of time...

[@HumanoAI]

Not completely dead, but a lot of things will go no code. Knowing how to prompt, that isn’t say knowing your language functionality and the terms to use AI in development will be key. I’m thinking frameworks will be used less by the new generation, since most js needed can be produced by AI and it can do back end. You will need to understand functionality and terms. There will be many no code solutions. I have a custom GPT producing sites with one word, obviously they’re simple sites but. One word such as “mechanic” produces images and the content, SEO, for a website for auto mechanic and the code. CSS happened to be hard for AI, not in explaining but in creating good visuals. We’re six months in and they say the next six months with exponentially increase in intelligence. Not dead but there will be a lot of easy methods to develop some pretty in debt stuff.

[@mehrabmahmudpur6984]

Bringing css to js was a big mistake of all the time

[@fwdflashwebdesign]

Coding is dead, AI si taking over!!!

[@doksara420]

StyleX? Really? How much did meta pay you to say that? StyleX literally came up couple of weeks ago acting like they invented the term “zero runtime” while all other libraries like PandaCSS / vanilla-extract / KumaUI had it years ago 😂😂