How I'm Writing CSS in 2024

writing CSS is getting both easier and more powerful with cross browser support for container queries and has and nesting and so much other very exciting stuff so I want to talk a little bit about the state of CSS the ecosystem and what some of my recommendations are today by the way everything here will be in a blog post down below too if you prefer to read through this or reference it later so let me walk through both on the user experience as well as the developer experience how we can make a site that loads really fast and loads Styles efficiently so for ux Styles should load as fast as possible and have small file sizes style sheets should not redownload unless they change so we apply the proper caching headers so they can be cached in browsers three the page content should have minimal or no layout shift nobody likes that experience right and four fonts should load as fast as possible and minimize layout shift this is like somewhat related but I think still important to include now the ux is definitely more important and our tools should give us a developer experience that helps us achieve that ux so what does some of those points look like well first we want to prune unused Styles Minify down the CSS and compress it to be as small as possible helping us get those small file sizes two we want to generate hash file names so that we can enable that safe caching you don't want to try to Cache a file that doesn't have a unique identifier in the name and three we want to bundle CSS files together so we can make fewer Network requests finally we want to prevent naming collisions to avoid visual regressions now these are just the things that we can do in our styling solutions that help enable that better user experience but of course we're developers we like good tools we like things that help us write more maintainable Styles so what are the things that can help us just enjoy using our styling Solutions but maybe don't affect the ux as much well you want to make it easy to delete Styles so you can collocate your UI code whether whatever framework you're using but making it easy to also delete the corresponding styling code for that as well too you want to adhere to a design system or or a set of themes you want to have editor feedback with good typescript support Auto completion and linting and you want to receive that feedback in your editor so that you can have this good DX as you're iterating on your application locally it's really never been easier to write great Styles without having any additional tooling and have it work cross browser so I built a small example here showing some of the latest CSS features I just want to walk through them in this code sandbox and you can check it out later so pretty simple example but it shows some cool things I think the biggest thing for me personally is nesting so in the past this is what I would pull a SAS for or a CSS modules for or even going back further something like less too which a lot of people still use so the fact that this is now built in to the browser it's supported cross browser I think that's huge I also don't think that a lot of people are using variables or custom properties even though they've been around for a while I think there's still a lot more adoption for them to be had so that's a cool one if you haven't seen that before as well too um container queries are super super cool so when the max inline SI here is 500 pixels we're saying we want to have different sizes on this blog post element we want to change the padding oh and we can have nesting in here as well too which I think is pretty cool so let me just drag this over and we can see the font size and the padding changes a little bit so pretty nice actually and there's a bunch more stuff that we could do in here but I just think this is a nice small example of some of these features that don't require any additional tooling or pre-processing or build step now because CSS has progressed does that mean that we do not need a build step anymore well maybe it kind of depends I think for a lot of people you probably still want a build step first off it's unlikely that all of your users are on the latest browser versions and secondarily you're probably always going to want to use some features that haven't yet landed cross browser especially if you're on the bleeding edge now you can use the supports CSS Rule and have some Progressive enhancement so when a feature is supported by a browser you can offer it otherwise you can have some other styles I think that's great I think more commonly people will have something in their tool chain like a lightning CSS that has transpilation and it will have syntax lowering so let's say you want to use CSS nesting but the browsers that you're targeting for the visitors and the users of your products don't yet have support for this they're not the latest versions you can still write code and prepare for that future so I think this is pretty common if you want to learn a lot more about this I highly recommend this post from Harry Roberts he's extremely extremely smart and an expert in this area this post the three concatenate compress and cash great overview definitely check it out now there's one last bit I want to talk about that influences some of the recommendations I'm going to make for what styling Solutions I think are great in 2024 and that's streaming and I think the best way to demonstrate this is to show an example here with Google so if I go to Google and I type in uh flight New York to San Francisco well first off Google has no idea what I was going to do when I land on this page so I'm served this initial loading shell there was no way it could have pre-computed ahead of time that I was going to search for flights so there was no way it could have known to render this widget and include this style and this isn't the only widget of course there's uh timers you can do there are um scores football near me something I think there's probably okay well there's probably a way to get scores to come up up let's try ESPN okay I don't know but if there's a game going on right now you can get scores to show up in line here which I think is really interesting but my point by and large is that there's no way that Google knows ahead of time that you want to have this timer I'm going to erace the timer now to try to explain this so how does it know how to include the styles on demand well it needs to be able to stream in the Styles and recently the latest features in react and xgs support streaming server rendering and streaming CSS so I'm considering those as well too when I'm including some of these recommendations okay let's talk about my first recommendation which is CSS modules you can consider them like a very light layer on top of native vanilla CSS and CSS is making some improvements here to support features kind of like modules with layers but I think it's really interesting that CSS modules are supported in basically every single bundler and framework so for example xjs you can already support this today by writing module. CSS and under the hood the compilation chain is going to make the CSS module files get bundled together and also run through minification and compression as well too so definitely check out CSS modules if you want just the most basic solution for styling CSS and again in the context of the app router this also support streaming as well too on the CSS modules docs it has links to pretty much every single tool and framework that's supported and there's probably even more than this so very widely supported pretty good option the second option I want to talk about is tail1 CSS it's what I write my website with and most of the things that I create I really like it I know that it has both people who love it as well as people who don't really like it but the great thing about tail1 CSS in my opinion you can of course collocate your styles with your code but from a user experience perspective the great part is that it generates the classes used on demand when you're doing the compilation process so there's many many many different utility classes for example in this example here I'm not using all of them I'm only using a subset so I don't want to include all of that CSS so what tail one can do granted in this extremely simple example I'm just using the CDN this is not what you would do for production code but what you can do in your build process is say okay here's the examples or here's the class names that I'm using generate my c s file just based on those class names so the maximum file size if you stick to the Tailwind design system to the Tailwind framework would be every single Tailwind utility class and even that it's you know it's a non-trivial size but it is definitely smaller than the ever growing append only style sheets that you see in the wild so Tailwind can be a pretty good choice um just to show an example what this looks like on my blog I'm only using tailwind and I see in the head of my document that there's a style file sheet that links out to this compiled CSS code so I've got this hashed file name which means that I can cach it indefinitely with the immutable cache control header and if I open that up I see this you know jumble of code but basically Tailwind has included only the stylesheets that I'm using it's got compressed there's no white spaces here for example trying to get the F the smallest possible file size uh when this is downloaded and then cached in the browser again not everyone loves Tailwind I think it makes some pretty good trade-offs and one of the really nice benefits that I found is revisiting projects like a year two years 3 years later after I've been using tailin it's pretty much the same API so you know you got a text XL you're going to know what you're looking at many years later so there hasn't really been a lot of tool churn there which I do actually appreciate quite a bit okay the last solution I want to talk about is style X and you could also bucket this under the category of zero runtime CSS and JS Solutions there's a couple other that are similar to stylex I think Styx has some different trade-offs that we can get into but that's the general category here so really there's two main issues that a lot of CSS and JS libraries have right now the first is that they have a runtime so they're including extra runtime JS I think we've seen in the past two to three years pretty much all the libraries that made this Choice are kind of going back on it are they're deciding to rewrite or move away to have zero runtime JS so they still like the benefits of CSS and JS but they don't want the runtime JS so that's one and then the second is compatibility with streaming and compatibility with some of the latest um the latest react and ecosystem features as well too like server components so Styx since it's used by meta it's created by meta used for WhatsApp Facebook Instagram threads a bunch of things it of course obviously supports the latest react features and that architecture so that's really great um I think this option or vanilla extract or some of these other solutions that have zero runtime they're all pretty great and I don't personally write a lot of CSS and JS code this is actually the first time I've ever used scx so I had this example here that honestly is it's not terrible like it's kind of funny to me that a lot of the critique around Tailwind is the readability of the jsx and how it's like hard to read that I think what stylex is going for here is in the jsx you're kind of this is your your structure of your Dom so you've separated this part of the file for that and then this part of the file or you know put somewhere else I guess but I think they prefer to have it collocated this part of the file or these lines are specifically for your styling code versus in the Tailwind example they're kind of both here and I can see pros and cons to both of that I think that's kind of a personal preference basically but you know it's worth trying out to see if you like it I think a cool thing here too is I also have have these um tokens with this stylex file here so I have some design tokens background color title color text color this is what I was using CSS variables for in the other example and in the Tailwind example I was basically just using the built-in design system that Tailwind gives you which I would highly recommend sticking to if you can so it's interesting I think it's worth checking out um and I had fun building with it so stylex CSS and JS definitely changing in different in 2024 but worth looking into okay so that's how I'm writing CSS in 2024 it's never been easier to write great Styles without having a bunch of extra tooling but also the tooling is pretty helpful and it's supported cross framework cross bundler more than ever as well too so very excited about the state of CSS hopefully these thoughts were interesting and I'll link the blog post below too if you want to read the long form version of this or look at any of the examples that I mentioned peace

Channel: Lee Robinson

Views: 50,700

Keywords:

Id: erVWz4DmPAc

Length: 12min 59sec (779 seconds)

Published: Mon Jan 08 2024