Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Is it time to scrap CSS and start over?
630 Plays3 days ago
Why is CSS so weird? https://www.youtube.com/watch?v=aHUtMbJw8iA HTML & CSS Tip of the Week: https://html-css-tip-of-the-week.netlify.app/ The Ben Schwarz post on Bluesky I mentioned: https://bsky.app/profile/benschwarz.bsky.social/post/3lulxryudjs2t
My primary YouTube channel where I teach frontend development, with a strong focus on CSS: https://youtube.com/@kevinpowell
✉ The written version of my newsletter: https://www.kevinpowell.co/newsletter 💬 Come hang out with other dev's in my Discord Community: https://discord.gg/nTYCvrK
Help support my channel 👨🎓 Get a course: https://www.kevinpowell.co/courses 💖 Support me on Patreon: https://www.patreon.com/kevinpowell
Recommended
Transcript
Return of the Podcast and Focus on Front-end Development
00:00:00
Speaker
Hello, my friend and friend, and welcome to my podcast, General Musings. My name is Kevin, and here at this podcast, I talk about whatever is front of mind in any given week, ah usually in some way that's related to front end development. And this week, we will definitely be talking about something related to front end development.
00:00:15
Speaker
But before we get to that, I just want to say welcome back. It's returned from my ah self-imposed summer vacation where I was out of town for a while doing family stuff. And then I was back here doing family stuff and trying to ramp back up into to everything I was doing.
00:00:31
Speaker
And slowly but surely we're getting back into the flow of everything, which includes starting this podcast once again. And I've i've missed doing it. And i'm I'm glad that we're back
Guesting on Shop Talk Show
00:00:42
Speaker
here. I was actually recording...
00:00:43
Speaker
ah Yesterday on the Shop Talk Show podcast, super exciting there. Finally got onto that, which is super cool. And I was like, oh, podcast podcast mode is returning a little bit there.
00:00:55
Speaker
ah Though that one's, it's always good being a guest somewhere else because you just show up and talk and then they take care of everything. Whereas now I do have a little bit of work to be done to actually get this out into the wild.
00:01:06
Speaker
ah One thing noticing, since I've got back, my white balance on my camera is way off. And I know you might not be watching this on YouTube, um but I'm trying to, my camera should, there we go. That looks a little better. Hopefully it stays there.
00:01:20
Speaker
ah Sorry for, if you're if you're listening, just know that i'm I've been appearing very red. You might've noticed that that in some of my videos as well. No, it's gone off now again. I need to figure that out. okay um is We're musing right now, right? there There are general ramblings that I tend to have here. We will be going on topic with something.
00:01:39
Speaker
Except um before we do that, as I said, welcome back to to my self-imposed ah summer vacation. And what i As I ramp back up, I just a few things on that front.
Resuming HTML and CSS Tips
00:01:51
Speaker
If you've been following me, one thing that you might've followed was my HTML and CSS tip of the week, which was another casualty of the of my summer vacation. And so that one will will be coming back as well. It's not back yet. If you don't know of it, I'll link it in the description. There is an RSS feed for it, or you can get email updates.
00:02:09
Speaker
where it's like small little tips once a week. And I'm i'm looking, i have some ideas on that one to make sure it doesn't fall by the wayside like that again. They're small, they're easy to put together, um but it's just another piece of content that I've been doing and I want to keep it going because it's fun and people seem to enjoy it. And that's the most important thing.
00:02:27
Speaker
And actually got a DM this morning and I wasn't planning to open it now, but I just thought of it as I said that that really made my
Fan Motivation and Content Creation
00:02:34
Speaker
day. um I hope they don't mind me sharing. I'm not going to say their name, but it was a saying, Kevin, I just wanted to say one the reasons I like CSS and have a career in front end development.
00:02:42
Speaker
I've been subscribed to your channel since you had about 50K subscribers. Thanks for making the videos. You're awesome. And then we sort of talked a little bit from there, but. uh the that that was the gist of the the message and it just that makes me like that makes why i do all of this worthwhile right like html css tip of the week is just a part of that and if even one of those posts helps someone out then everything i'm doing is definitely worth it and that's a big part of what had got me going at the beginning when i was doing things because i was a teacher in the classroom
00:03:16
Speaker
And when the videos had passed like 25 views per video, which did take a little while, i will say. ah But once my videos passed that point, then they were something that was like, wow, this is having a bigger reach than I can have in the classroom, which is kind of crazy ah in a different sense, because there are one off video versus like teaching in the classrooms a little bit different, obviously.
00:03:40
Speaker
um But yeah, that's that's sort of why I do this why I continue trying to get more stuff sometimes. And maybe that's not always the best, or I know that's not always the best ah thing to be doing. But um but yeah, tangents aside, ah you might have seen from the title of this and been wondering when we're going to get to the topic, or maybe you just have this on autoplay and you don't know what
Understanding CSS: Addressing Misconceptions
00:04:03
Speaker
I'm talking about. But ah Ben Schwarz posted on Blue Sky this week and he wrote, I don't like CSS is coded speech for i never learned CSS.
00:04:15
Speaker
And that had me thinking a little bit. First of all, i appreciate it Ben saying that in those words because it's one of those things that I've long thought but never been able to articulate properly. And it's always cool when someone says something in like, what, 10 words that you're I guess I never like sat down to really think about it, but I've always known that a lot of the frustrations people have with CSS is just because they don't understand it well enough. like That's what leads to most frustrations is the thing isn't working the way they think it should work doesn't mean that it's not working the way it's intended to work.
00:04:49
Speaker
Very big difference there. And the reason i't i don't even know what the title of this podcast is. I said that I do know it's going to be something like, do we need to start CSS over again?
00:05:02
Speaker
And the reason um i went with a title like that is because of the pushback you sometimes get and CSS.
00:05:12
Speaker
And i agree with Ben. I think anybody who doesn't like CSS doesn't know it well enough I don't... and that Actually, this will go back a little bit to the the the DM that I mentioned that I got to saying how I helped that person like CSS and enjoy CSS. And I've had a lot of messages like that over the years, whether it's on YouTube comments, emails, DMs of people saying...
00:05:39
Speaker
I hated CSS. It was the part of my day I disliked the most. And now it's the part that I actually look forward to or just I now I'm not hating it anymore and things like that. And that's why, ah you know, I always had the some sort of slogan over the years, especially when I realized I was more of a CSS person than anything else.
00:05:59
Speaker
about you know helping you fall in love with CSS. And if I can't get you to fall in love with it, then I'm hopefully going to help you be a little bit less frustrated by it. I haven't said that one in a while, I stumbled a little there, but um that's sort of my my goal, right?
00:06:13
Speaker
And I think that leans into what Ben's saying is that the way to do that is to help people learn CSS better. But every time I've gotten into deeper conversations about this type of thing, most people will agree with you.
00:06:28
Speaker
But there's always these people that are entrenched in that it they will never like CSS because it's a broken language and that it was badly designed from the onset.
00:06:41
Speaker
And having to live with those design decisions that were made at the beginning and just leaning into that more as we add more features and do more stuff just makes it worse, if anything.
00:06:53
Speaker
And people get very, very entrenched in this view. I've had some interesting discussions with various people about this. that are never going to change their mind. um I like arguing with them.
00:07:06
Speaker
I say, are you, I don't really argue. ah you know, um I'm like the, the very stereotypical Canadian in that I don't, even if I'm like very frustrated with someone, I tend not to like, I'm going to be polite anyway. So we're not arguing, but we're, we're having a discussion. They might be arguing. I'm being very politely counter pointing them. um But but the the reason I'm bringing that up is just that yeah, with these people that are so entrenched, I will say, um most of the people that get that entrenched in something are also the type of person who thinks they're the smartest person in any room they walk into and have a certain personality type in general. And i hope I'm not speaking to you directly. ah
00:07:49
Speaker
ah But I do think that like, if you are that entrenched in an idea, you definitely need to wonder why other people don't have the same struggles that you're having. ah with it because I don't struggle with it and lots of other people don't struggle with it. So if you know, if if it's not working for you, but it's working for other people, that's not just with CSS, right? That's with anything in life is sometimes ah you have to look in the mirror.
00:08:12
Speaker
But the the main point I'm trying to make, I guess, is that with these people that are really entrenched in the idea that CSS is broken from the the core principles that the language is built on is incorrect.
Critiques and Misunderstandings of CSS
00:08:27
Speaker
It's not the way it should work.
00:08:30
Speaker
is that I think they don't understand what CSS is trying to accomplish or what it needs to be able to accomplish. And so they come in with this concept of it's broken and they're never gonna enjoy it because it doesn't work the way they think it should work.
00:08:43
Speaker
But it again, not thinking the way, if you think it doesn't work properly or sometimes it could be something that it's just, you learn it then go, okay, that's counterintuitive, that's dumb. But the more I've learned about CSS,
00:08:57
Speaker
the more of the counterintuitiveness of it goes away. Because there are some things that definitely it doesn't... You go, well, this should work this other way. That would make more sense. But then you understand... And I can't think of an example. I wish I had one on hand here. But then once you understand...
00:09:12
Speaker
a bit more of the fundamentals that build up to that point you go oh i get it now and i think that's what's enabled me to be a better teacher of css is understanding those fundamental parts of it because then i can make those other pieces and make sense to people as well right when you get to those things that normally might feel a little bit weird they go but it does this because of x y and z and then you go and then you can connect it to all those other pieces and you go oh yeah i get it Right.
00:09:39
Speaker
um But there's the other aspect of CSS where like, in a sense, a lot of the people who also don't like CSS don't like it because it doesn't work. You can't write it in the way you would write another language because it has a global scope and you want to have a global scope to it.
00:09:56
Speaker
And they'll point to that as a problem. Languages that we write code for, because clearly they're going to say CSS isn't a programming language. I'm not going to argue too much on that. I really don't care.
00:10:08
Speaker
But the, it it well, it is, but I'm not going to, I don't, that's not a hill I'll die on. But um the that argument of like, that's broken because nothing should work that way is not enough.
00:10:24
Speaker
The other languages have a reason not to work that way and CSS has a reason to work the way it does.
CSS Solutions: Bootstrap and Tailwind
00:10:28
Speaker
Another thing that people will point to often is that there's clearly fundamental issues with CSS because look at all of the varying solutions we've come up with to try and solve problems that arise when authoring CSS, right? so There's back in the day we had like Bootstrap. I guess we still have Bootstrap now, but in that era when Bootstrap is gaining like where like becoming this huge thing, there was a lot of other ones. Foundation was another one that comes to mind that I actually quite like. i like Foundation I liked at the time.
00:11:03
Speaker
ah There was others. I remember Skeleton one, which is like a really lightweight, more just for like the column system and a few other things. We had this like rise of those types of things. And at the same time, there was all the different naming conventions, right? We had smacks, we had object oriented CSS. Of course, there's BEM that seemed to be the one that won, quote unquote, yeah became most popular, I will say. um The other ones are still around.
00:11:26
Speaker
We have cube CSS today. There's cool CSS. If you've never heard of that a little bit more niche, that's by my buddy, Mike Apricio, which I'll put a link to in the description if you want to check it out. But yeah, there's like all these different naming conventions that are coming. But if CSS wasn't quote unquote broken, why would we need all of these different? Like, why would people, what, what problem are these solving that that problem shouldn't exist in the first place?
00:11:52
Speaker
Potentially. um
Global Scope and Code Efficiency in CSS
00:11:54
Speaker
Right? So then now, of course, we have, or then there was the rise of CSS and JS, which dealt with the scope of CSS going back to the global scope and fixing, quote unquote, fixing the problem of the global scope.
00:12:06
Speaker
And then not for anyone who's dealt with bad use of scope, you'll know that that can actually introduce a lot more problems from a maintenance perspective and everything else, and well, mostly maintenance, but just like repeated code and and sort of over-scopifying things, I'll say, ah when you go too hard on scope, that it's not necessarily a good thing. it can be I think i used scope styles with Astro all the time. I love it.
00:12:33
Speaker
But I still have a master style sheet that most stuff is coming from. um But then, yeah, you just don't classes on things as much if you have scope stuff. So there's there's a trade-off. I think that it can be part of a system um And I understand that sometimes the global scope can be a little bit frustrating to work with, but I don't think it's if we didn't have it, let's just say if we didn't have the global nature of CSS and like how a selector is by default global.
00:13:01
Speaker
the amount of code you would write would be 10 times what you're currently writing and maintaining those projects would be a nightmare. the The global scope of it saves us an insane amount of time. So anyone who argues that we should it shouldn't be there hasn't thought about what the implications are if it wasn't, I would say. And because of the problems and the the things that we're trying to solve with CSS, it's an asset. It's not a problem or something that actually gets in the way.
00:13:32
Speaker
On top of that, or then all those other things like naming conventions and other stuff, I think in programming in general, naming is hard. And then because you are dealing most often with the global nature of CSS, naming also gets a little harder because you have to spend a lot more time watching it for naming conflicts, which is, I think, the main issue that comes up where all of these naming conventions come in to try and find ways of sort of separating concerns a little bit in terms of like, what is this class doing? Is it a you know is it layout related? Is it had typography? Whatever. you know You have all these like different types of things you can do with CSS. You have the layout, you have other visual things, you have decorative things, you have the typography. there's There's all these individual things that are all controlled by one part. And then so understanding the different concepts there, is this part of an individual component type thing that you're building?
00:14:26
Speaker
Or is it something that you might be using over and over again? Or is it something that's more general or more specific? and like So yeah, we do need to have some sort of way of dealing with that.
00:14:36
Speaker
And the reason I think we have so many different naming conventions is because lots of people like working in different ways and have different ideas on the best way to solve that. And you might use one of them and it works, but then it doesn't quite work, so then you come up with your own, right? And I think that's the main reason we have so many different options there.
00:14:54
Speaker
And I don't see that as a bug or an issue. I just see it as choices, I guess, um that you just have to understand like, okay, what are the problems that it's trying to solve and how is it attempting to do that? And a lot of them take different types of approaches to doing it, which is completely fine. um Would it be cool if we had a more unified one?
00:15:13
Speaker
I find that usually what happens is one of them rises to the top and it doesn't become the sole solution, but it became, BEM became the most popular one. ah That then now Tailwind obviously is solving a problem that's out there.
00:15:26
Speaker
That Tailwind's a little bit different in that it's not so much a naming convention, it's just a different way to author your CSS that in a sense is a replacement for scope styles. um Because I think, or not scope styles, but like CSS and JS, I should say.
00:15:40
Speaker
Because, yeah, it's I think most people using Tailwind are also using React, and React is an interesting framework in that it doesn't have like a CSS solution built into it the same way all the other ones seem to.
00:15:54
Speaker
ah So Tailwind sort of fills in that void there. Or first we had those CSS and JS things like style components and everything, and then Tailwind. And you know the some people take one or the other, and there's different approaches you can use to to doing that. But if it's solving a problem, that's fantastic.
00:16:11
Speaker
And if you might've noticed, Tailwind is becoming more and more like CSS as it's developing, yeah which is interesting.
00:16:21
Speaker
So i'm I'm curious to see where that goes. But even then, as CSS becomes more complex, what problem?
Adapting to CSS Complexity with Tools
00:16:28
Speaker
yeah It becomes harder for these things to integrate all of the solutions that are there, right? So like, I don't know, like, what was the one I was just talking about this, I think on Chop Talk Show.
00:16:41
Speaker
that I don't remember. I'm trying to remember what it is. abert Okay, let's just use some of the new stuff. I can't remember any of it, but a lot of the new things like carousels, that wasn't what we were talking about, the carousels, ah even like the detail summary has like a new pseudo class. The carousel stuff has all these new pseudo classes or pseudo elements.
00:16:59
Speaker
um there's There's so many new little bits that are coming out that you need to use to be able to use some of the modern CSS stuff. that I don't know necessarily, and I'm sure it's smart people working on these things. They might come up with solutions, but I find they just become more like difficult to use a little bit. And like at one point, just writing the CSS becomes a little bit easier.
00:17:20
Speaker
Maybe that's just me because I like writing CSS though, but... umm I'm sort of tangenting at this point and losing the thread of what I was talking about. So just to to come back in to the people who say that CSS is broken, obviously. i mean, if you're listening to this, I think that you agree with me that it's not, I'm assuming, or you're hoping to You know, you're, you're following, you're in a journey of falling in love with it or or liking it a little bit more, being a little bit less frustrated by it, whatever it is.
00:17:48
Speaker
Uh, but the, the main thing is I think that anyone who gets really entrenched in that is not using it enough so you're just casually doing it i mean i'm sure anybody here that doesn't focus on css has run into frustrations with other things you're writing lots of javascript sometimes you just get frustrated with it it doesn't mean you don't like javascript maybe you don't but it doesn't mean you don't like javascript which just means you got stuck on something that you eventually are able to solve and then hopefully learn something from or it was a stupid mistake that you hopefully don't make again
00:18:21
Speaker
um But like no matter what you're doing, like I get frustrated with some things that I'm working on with CSS, but I'm not frustrated at the language. I don't think the language is broken. and just think that you know I made a mistake or I'm not understanding a certain aspect of it, which is why the thing I'm doing isn't working.
00:18:35
Speaker
Or sometimes there's a stupid limitation that you just like you have to find a weird way around, which definitely happens. ah But again, there's reasons for those limitations sometimes. And other times it's just we haven't, the browser hasn't, or the browser vendors haven't figured out a way to make that possible.
00:18:53
Speaker
Because for a long time, that's sort of like with container queries where we were told literally it was impossible to do something like that until they figured out a way of doing it. So it's not that these solutions won't come along, but there's like a lot of technical things behind the scenes that we don't think of when we're writing CSS of why certain things might not work the way that, oh, why doesn't it just do this, right?
00:19:16
Speaker
um But at a fundamental level, I think all of the ways that CSS works from the cascade to the global nature of it and everything else there makes a lot of sense in terms of the fact that when it was created, you know if you go back to when it was made, the web didn't look like it does now.
CSS's Role in Modern Design Challenges
00:19:34
Speaker
And despite that, it works perfectly for everything we need to do. It was Miriam Suzanne who said in her, why is CSS so weird video that I'm gonna misquote here, but basically how like with CSS, we're not designing for a fixed canvas. We're literally designing for like infinite possibilities basically, right? We don't know any of the variables that are at play. There's just all of these things that we can't take into account.
00:20:02
Speaker
And the way CSS works, works perfectly for having to deal with the fluid situations that our websites and web apps have to work in. And i think it's kind of amazing in a sense that the language works as well as it does to solve the problems that it's meant to considering how it started off and what the goals were then compared to what the goals are of creating the web today.
00:20:25
Speaker
So yeah, I think it's a pretty good language. ah Are there flaws in it? Probably, definitely. ah There's things that maybe could have been tweaked or done a little bit differently on like individual parts as things got better.
00:20:38
Speaker
ah But that's the same as any language. I don't think any of them will say that everything is perfect. Like nobody thinks JavaScript is perfect, but we can improve upon it. And over time, improvements are made.
00:20:49
Speaker
And with CSS, improvements are being made. We're getting a lot of new features, but we're also getting... not necessarily We can't change the way old things work just because CSS needs to be infinitely backwards compatible, which is kind of cool in a sense.
00:21:03
Speaker
um But also, like you know we're getting new features added into like block. right So on a display block element, you can do an align content of center now, and it will vertically align the thing.
00:21:15
Speaker
that was added because why not where ape the browser is able to do that calculation now? So, hey, why not add that to block? didn't exist before, but there's no reason we can't add that. We have the height of stretch now or it like stretch is value in block as well.
00:21:30
Speaker
So instead of 100% which can cause overflows. We can just say stretch now and it will just fill up the space the same way with auto works, which is cool. Now you do need a defined width on a parent for this to work still. It's not a stretch in any situation, but still ah awesome that we have that now. it's It's something that we needed and they're like, oh, we can add that in now.
00:21:50
Speaker
Why not? And so they did. And we have it. And so like, there are certain things that are getting easier, including the old stuff. And there's all the new features coming along to solve new problems and and other existing, you know, new solutions to like hard things that we could solve before that are becoming a lot easier too.
00:22:08
Speaker
we can animate and transition to height auto and and auto values or intrinsic values now too like all these things that were just you couldn't do forever that are becoming possible plus all the new stuff that's coming it's all very exciting and so yes obviously i think when you started this you knew that i wasn't going to say css needs to be thrown in the trash and start it over again um but i think it's an important thing to realize that CSS has to be different from other languages because it's solving very different problems from other languages. And maybe that could have been the entire thing.
00:22:40
Speaker
I should have opened with that maybe and then talked about what those different challenges and other things are. But ah here we are. I've rambled on for a little while and I hope you enjoyed this one. Welcome back. Or if you're a new listener, welcome for the very first time.
00:22:51
Speaker
ah Thank you very much for listening. And until next time, don't forget to make your corner of the internet just a little bit more awesome.