7min chapter

Frontend First cover image

Adam Wathan on Tailwind CSS

Frontend First

CHAPTER

CSS and JS vs Traditional CSS Approach

A discussion on the differences between using a CSS and JS approach versus a traditional CSS approach, including the benefits of the CSS function and speculation on the future of CSS.

00:00
Speaker 1
Whereas if you're doing like a CSS and JS approach, the only one way to use a class ever is to do the CSS function. So now you whitelist everything basically. Well, you don't even have to think about it because the CSS, the only CSS that ever exists is the CSS it gets used. It's not generated. Yeah. I see. Yeah. I see. So it's not that you're right. You're not picking out the CSS classes that you need based on the function call. It's just generating the classes that you need. Yeah. And I think some of these tools are smart enough to make sure that like trying to be efficient about the fact that, okay, well, these two divs have four of the same CSS properties defined. We generated two unique classes for them or something, but maybe it makes sense for us to generate a third class to apply two different classes to each one of these now so that the CSS delivered is smaller. It's just like all of the interesting optimization so that like it happened there. Yeah. So I probably still just would use 10 one because it already exists. But I think it's interesting that like you could solve that same problem in like a little bit of a different way. And I'd be, I think you're going to start seeing things like that start to happen where you have these like more opinionated constraint systems that are like on top of these like low levels, CSS and JS generation tools. Do you see a future where no one's writing CSS like CSS is? I don't think so because like I don't see a future where people aren't writing server render HTML. If that's a people are always going to do that. Right. I think. So there always be a place for regular CSS. Do you have like if you could snap your fingers what we want to see in terms of workflows with some of these areas like we've talked about what would it look like to have kind of like a sketch in the browser where you know when you start using something like tailwind and you're like I can go my whole application with 10 steps on a padding scale and five colors. What if I could have a sketch and instead of me having an infinite color palette I could just have those five colors. Yeah. When I drag the font size it just clicks in between the five steps and now I can just build my design very quickly and sketch and really dragging that scale is like toggling those functional classes but I'm not worrying about maintaining any of that. Yeah. It's actually I know of a couple people that are making interesting progress in a space of like design tools that are kind of focused on designing in code but giving you like an interface to do it and having a workbook and constraint design system. So the one that I've been following most closely is modules. MODULZ. See. America. And the thing that I think are interesting about these tools is that there's a mal like sketch in the sense you don't have like a rectangle tool where you drag a rectangle it's like you have a div. Oh. You know what I mean? So you're still building like you have a layer list but it feels more like the chrome dev tools like you would put in a flow kind of things like you add a div and it would snap in the flow so it just yeah I'm kind of like dropping a box and it knows that it's HTML and it's expecting you as like the designer to understand the medium that you're designing for but then you have like that same sort of sketch style sidebar on the right where your color palette okay you pick a color from the color palette you pick a font size from the font scale you can add margin and it is margin it's not just like space between things like it is in sketch right it's margin or it's padding right because it's rendered as HTML like that's what the design tool is. That's so cool. Yeah it's pretty cool if you were doing that I think there's another one called I think it's called compositor which is sort of similar. Adam just talking on his work on that one. Other Adam which looks cool. So yeah it's I'm interested to see what people do with these kind of like design tools that expect that embrace the fact that your output is going to be HTML because there's so many design tools that try like you need sketch you can like right click copy CSS or something you know you're never going to use it's like no and there's tools that try to generate HTML for you like a wizzy wigg editor or something and it's a noble effort but it's never going to be as good as if the design tool just like embraces the fact that yes you are actually designing HTML right now and you just need to know that that's where you're designing it the metaphors are all the same like finally you can put a border on the top and not right all sides at once. Right. Like no one is using lines to do things and it's websites like you are in sketch and stuff so yeah I don't know should be interesting like there's no like visual use the mouse to draw stuff like maybe you can use it to like drag stuff around and click stuff into like different layers only really vertically though you know what I mean because that's how HTML is generated but you're going to be done by like insert like this element insert this element now kind of style all up and it can actually create like react components for you or whatever I did actually stay in sync unlike when you design stuff in sketch and you have like a design team that's like constantly battling to make sure that like what's actually on the website is like manually being synchronized with what people are doing their design tools and stuff like that. Do you feel like art is any of that stuff really painful for you or more just passively interested in it? Like does that feel like a pain point for you that if that existed you'd be like really excited about using it? I don't know I think I'm pretty quick at designing the browser as it is but I bet these tools would still be faster than that and could produce like the exact same outcome like there's something interesting to me about thinking okay I built this landing page the other day like what would that have been like if I had like an editor for building the landing page that actually produced the actual landing page I'm like sketch where a lot of time I feel like if I'm doing high fidelity work and design tool it's just part of the back of my brain that's like this is disposable like it's a waste of time because it's not as deliverable you know what I mean right I'm still gonna have to do all this work again but yeah right but then there's this thing where there's sometimes you go down that road and you realize the design doesn't work and you change it sketching up I'm glad you spent time coding that because it is faster sketch or can be yeah certain things can be so what's your workflow with with sketch I mean your stuff online is all really top notch from a design perspective so what's kind of your workflow like if you were a starting project what would

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.
App store bannerPlay store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode