Hasty Treat - Why Do People Hate CSS?

Oh, welcome to Syntax.

In this Monday, hasty treat, we're gonna be talking about why people hate CSS, Which is a funny thing because I love CSS, and it's always been one of my favorite parts of development.

But there are very real reasons why people hate CSS, many of which can be fixed, and we're gonna talk about them, and we're going to try to help you get past some of your issues with CSS if you got them. My name is Scott Talensky. I'm a developer from Denver, Colorado. And with me, as always, is Wes Bos. Hey, everybody. This episode is sponsored today by 2 Some companies, one of which is Prismic, and Prismic is the perfect place to host your data. It's a headless CMS of your dreams, so Check it out. This is also supported by LogRocket at logrocket.com.

Hey, Wes. Do you wanna talk about Prismic, and I'll talk about LogRocket?

I do.

Prismic is a headless CMS. They just raised $20,000,000 to scale your content creation with slices, so they're doubling down on this Slice this thing, which makes a lot of sense. So they're modeling their CMS.

If you are building a website in components, You got a header component or a person component or a footer component or a Twitter component, then you probably have data that is associated with that specific component, and that's what Slices is. Prismic does an awesome job at it. You just model out your editor.

You you log in. It's a totally hosted service. You log in and click click click, drag and drop. You can make your editor, and you give it to your Your marketing people or whoever's running the actual website, and then once the data's in there, you can pull that data into Node or React or Next or Gatsby or Nuxt or literally anything you can pull it into. They have some really good starters for different frameworks. So check it out. Prismic f. Dot

I o forward slash syntax. Thank you, Prismic, for sponsoring. Alright. And this episode is also sponsored by LogRocket, which is the perfect place to see your errors and exceptions happening as they happen in a scrubbable video replay.

It's very, very cool. It's the type of thing you really have to see to believe. Head on over to loggarcot.comforward/syntax, and you will just be really blown away by this type of tool. I'm a big fan of visual debugging and development tools. I'm a visual person. So for me to be able to see when a user clicked this thing, and the the modal came up and there was missing some text on it or something. And then I could go into the error log and see the errors, or I could see the network tab and see, oh, this This actual this network request failed for this user because it was expecting to have this bit of information which their user account didn't have for some sort of reason. And you can do all that without having to essentially masquerade as the user use their account and try the action yourself. You get to see it as they did it. It's a very, very cool system. So head on over to logrocket.comforward/syntax.

Sign up today, and you'll get 14 days for free. Check it out.

Alright. CSS.

CSS is is kind of one of those things where you often get people you know, they make jokes about it. There's that famous mug or t shirt where that CSS is is CSS is awesome and the awesome is outside of the box.

You know what? I get kind of annoyed with that stuff. I get why it's funny. I get why people think it's funny. But at the same time, I get annoyed because it's not really that bad, and it's Certainly not as bad as it was 10, 15 years ago, which CSS 10, 15 years ago, sure. You could say, how do I assign or something in CSS? Oh, you could have used, you know, Line height and whatever to do it, or you could use position absolute and do it. You could do all these different things. There were ways to do it, but It's not the meme that everybody thinks it is in 2021 because most of these things have very, very easy solutions.

So I think the big part about CSS is that, yes, CSS is used primarily to lay things out and style things, but laying out In default, in CSS for a long time was not super elegant. But I think some of that comes from a deep understanding of block versus inline versus inline block. So, Wes, do you wanna talk about what, like, a block and an inline element is and how those things relate?

Yeah.

I it's funny you you talk about the CSS is awesome one. And in my next sticker pack, I'll have one where it says CSS It is awesome, and it's, oh, major square or just a a rectangle.

Let me tell you. I didn't know about that, and I I love you for that because

That is, like, right right down the main street for me. I love it. It's so good. Yeah. Years ago, I got a sticker from somebody at a conference that was like that, and I was like, this is good. Like, some we actually fixed it. Like, you know, like, oh, yeah. Overflowing. Yeah. So we'll fix it then. Like, use CSS to fix it. It is awesome.

Yeah. Yeah. So, like, Inlining block, understanding the differences between those 2 can be really frustrating to a lot of people, and I I won't go into exactly what they are as we have entire episodes So it's on those 2 things, but just like the basics of the flow of CSS, it's a layout engine. It's not like anything else out there, especially, like, if you have a dev who has never done a layout engine, use the layout engine, or they're coming from some sort of other medium That the layered engine is totally different, it can be really frustrating. But, again, if you learn how these things work and learn the the fundamental concepts of Elements are either in line or block. That can really go a long way. Totally.

Another one is is Flexbox, and Flexbox is It came about in CSS of I don't even know when at this point because it seems like we've had it for a long time. But when Flexbox came out, it really, to me, Change the way forever that these memes will exist because this kind of invalidated all of the memes for me. If you use Flexbox, you can do just about anything.

Now there is some minor gripes with, you know, flex children shrinking and growing in ways that you might not expect, But those are maybe a one time Google. You fix it, you learn it, you move on. If you need to lay things out, you use Flexbox or you use Grid. And in CSS, these are the 2, I think, killer features that have completely made laying out things in CSS no longer hard Because we don't have to use floats, and floats caused a lot of problems. They pulled things out of the document flow. We needed to invent things like a clearfix to Clear the floats. No more. And in fact, I would say, you know, floats do have their purpose of floating an image or something inside of a a block, Like, a a paragraph text or something like that. But for the most part, you don't need floats anymore. Do not lay out with floats. If I ever got a PR That had a layout with floats in it, I'd probably faint. I don't even know what I would do. So flex blocks can you say that today? Flexbox in Flex blocks.

Yeah. That was good. That was very good. Flexbox and Grid are the ways to go. I've linked to the CSS tricks, a guide to flex box. It's the single best resource for understanding the properties of Flexbox, but this is really it. Laying out is not hard in CSS anymore. I'm also going to shamelessly plug my flexbox dot I o and CSS grid dot I o courses. They're totally free, and we'll learn you will learn,

CSS, Ingrid on those. I'm also gonna plug my, modern CSS layouts course, which is not free. But since we're plugging, I'm plugging in. Worth it. Buy it up. Next 1 we have here is just like, I can't get my thing to have the right style. This happens a lot is Where you might have a codebase that is a jumbled mess, and whoever built it doesn't understand Scoping or the cascade as we say it. Part of CSS is the cascading style sheets, meaning that CSS that is applied a more broad scope is applied to everything else that is sort of caught under that scope, and that can be very powerful.

But used incorrectly or not understanding how it works can be extremely frustrating because you can just end up with a mess where you don't know You're undoing things. You don't know what's being applied to it. So CSS doesn't have a good solution to that right now, and that's that's part of why people don't like it. So Figuring out a way to use scoping, so things like BEM, CSS and JS, CSS modules, Those things are extremely handy for writing good, clean CSS in a modern application.

Yeah. Totally.

And some other things is don't use the the foot guns of CSS as in to avoid specificity issues in CSS.

Don't style based on IDs. IDs are not good to style off of. They have, lower performance even if it's slightly. It's not a that's actually probably not a huge concern, But it's a it's another reason. The big reason is that IDs have higher precedence.

And if we start using IDs to override things In the specificity train of the whole thing, it it gets really messy. Not only that, but styles should typically be applied to 2 things that aren't just one offs. And, An ID should only be used in a one off scenario. An ID identifies a single item, not many things. Where classes Identify many things, allowing you to write way more reusable CSS.

That's a big one. So another one is to avoid using bang important f. Because if you use important, you will regret it in the future. I cannot state enough. Do not use important.

There are some very, very small use cases for important, like when you are trying to override something that is a third party library that you don't have access to the CSS to.

But many times, it's not worth it, and I just can't state enough. If if you start if you do the one important, it's a Gateway drug to more importance, and next thing you know, you're gonna be you're gonna be having a hard time running excellent code. Let's just say that. Yeah. Like, if you have to use important, there's probably

an issue somewhere else in your codebase, and it's worth your time to try and go and fix that.

I get it. Like, sometimes you just gotta do it. You gotta ship this thing, and it's gotta go live, and you just gotta use it. But, ideally, that's just a patch, And then you put another one of those on, another one of those on. And before you know it, the thing is a mess. So figure out, okay, why is it that I need to apply Important here is it because I added a whole bunch of font styles at a div level, and now this paragraph tag needs to be overwritten, or There's usually something else. There's a code smell going on there, and being able to sort of walk that back and figure out why is much better than using important.

So the next one is going to be the my thing isn't looking the way that I coded it. As in I wrote this code, and I can't figure out why it's not getting the correct CSS applied.

Now the biggest one is that you need to make sure that your CSS is linked up. Right? You're linking to the CSS.

But I think the biggest things you can do for this is getting good at the styles tab on the dev tools. Because if you see the styles tab in the dev tools, it lists Your CSS out in its order of specificity, and you can see exactly what style is being applied to your thing and what style is not being applied to your thing And what style is being overwritten on your thing. And that's a big deal because, again, the cascade is such a big part of CSS and understanding the specificity of all your properties, All of your, selectors is a not your properties, your selector specifically. But understanding the specificity of your selectors is so big that You can get a good visual of what is applied, what is being overwritten, and then you can augment your CSS to make it better so that it does override correctly. And And if your properties aren't showing up, then that's indicative of something like a wrong class name or a style sheet that's not linked.

Next one we have here is I don't know if I can delete CSS. So that's a A big gripe for people being like like, how do you even know you're writing this code in a totally different file that may or may not be applied to something that is on the page? How do I know if that thing exists? And to that, you have to use tools that are available to you. Purge CSS is a big probably the most popular one out there Where you give it your HTML or you give it your templates, and it will be able to parse out what are the class names and attributes and things like that on your Your templates, and then it will run through your CSS and figure out which parts of it are unused. So you can go through and delete that. That's Not necessarily a bad thing to do, especially with a website that's maybe been around for 5 or 6 years. You've had a couple developers go through it. What tends to happen is people just keep adding more and more and more. And before you know it, your CSS is massive Mhmm. And you're not sure what it is that That can be removed. Did you ever read this blog post from Nicole Sullivan in 2010?

This is an an older blog post here, But she wrote a blog post about, like, how we saved hundreds of lines of code, and they talk she talks a bit about, like, the The optimizations that they made at at Facebook and I think there was maybe a even a different one. And it was like, we saved, You know, 10,000 lines of CSS or something from just rewriting this. I I could be misremembering this, but you can save a ton of Kilobytes from your site from loading by not using CSS that's just been added upon and added upon and added upon and added upon. And sometimes It does take a really nice eye to take a step back and and rewrite the thing from scratch, if possible. Let's say, if possible, if you're working in a long time system and I I I had a client who was Had the site being worked on by, like, 8 different developers, and the site was junk code. It was so bad. And anytime you need to do anything, you made a new CSS file and you just Had 1 file per page. The CSS on that site were not complex at all. And I really wish that I would have said at one point, You know, I wasn't confident enough because it was an early job. But if it was me now today, instead of just further making that mess worse and further hacking on it and spending Spending so much time trying to get the CSS to apply correctly because I'm having to use important and all this stuff just to deal with the important that somebody else added, you know, 5 years ago. I wish I would have just thrown it all out, the CSS, and rewritten it from scratch, and you could've probably done it all in, you know, a 10% or even 5% of the amount of code that we were shipping, and it would have been way better to work in, and it probably would have only taken a day.

So, you know, some sometimes that is the solution is sometimes you're you're just you've applied too many layers onto this thing, and it's time to just scrape it all off. Totally agree. And even to stop that type of thing from happening,

CSS sometimes doesn't get taken as seriously as other technological Decisions.

So you you might choose your back end language and your back end framework and your database and your front end framework. And, if you're using classes or functions and you you decide all of those things before working on our project as to, like, this is what we're doing, But sometimes that doesn't happen with CSS. It just gets added when it needs to be added.

And treating CSS as, like, a 1st class citizen of building your thing and having a good approach from the get go will hopefully stop those types of things from happening.

Yeah. And I I thought of another one just now, while we're talking about this, is that, like, it's important to think of, like, Your entire project as a whole. Like, when you're looking at your CSS, before you start writing any CSS, if you have nothing but greenfield here, you have a new project you're just starting, And you wanna start writing some code. Oftentimes, a gateway into writing really bad CSS is to just start at the micro and just start coding. Right? Yeah. Let me just start coding. But I think in reality, some developers, we better serve by taking a step back and identifying patterns and identifying common sections And maybe even, like, here here's an idea. If you if you have design comps, print those design comps off, take a pen, and start scratching notes on it. Alright. This is this kind of thing. This is this kind of thing. I noticed that we're using the same kind of layout here and here. So what we're not gonna do is we're not gonna do an A page layout, and we're not gonna do a home page layout. We're gonna do a single layout, and then we can reuse those on both those pages, those types of deals. It's gonna stop you from Having multiple CSS I mean, the whole goal of CSS is to kind of write as little as possible to get things to look as good as they can in a way because if you're writing as I don't wanna say as little as possible and is a hard rule or something like that. But if you're if you're Focusing on writing less CSS, you only have 1 place to update this thing rather than you update it once, and then then you have to go to the about page to update it, and then you gotta go to the The product page updated even though it's all doing the same thing. Beautiful. Beautiful.

Anything else to add, or should we wrap it up? I don't. I'm I'm tired of the the CSS or dumb jokes.

You know, you can keep making them whatever that's on you, but, like You are dumb if you say those jokes. Let's just say it as it is, Scott. Yeah. Let's just Say that right there. If you made one of those jokes in the past, you're also, not with it today because we can't grow. Right? So no. I I think we'll move Forward here, and let and let's just say, you know, CSS is pretty great, and there's a lot of new tools that make CSS even better. Could there be things all the time that make CSS better? Sure. I would love maybe better fluid text. I would love I don't even know what I would love anymore because there's so many great things in CSS.

To be honest, if if you're struggling with understanding CSS or you're finding CSS to be hard, keep in mind, just focus on your fundamentals of learning it. It's Typically not a problem with CSS itself. People are very, very competent with it and can do some insane things with it without having to be crazy experts just by knowing the foundations.

So just make sure you study up on your foundations and know that if something's feeling hard for you, you're probably just you you need to learn more about it. It's not that CSS is bad. Well said. Thanks everybody for tuning in, and we will catch you on Wednesday.

Peace. Peace.

Head on s. Over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or or drop a review if you like this show.