Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Why does CSS keep getting more complex?
710 Plays5 months ago
In this episode I delve into the evolving landscape of CSS, discussing why we have so many ways of doing "simple" things, like declaring colors. I emphasize the importance of a solid foundation in core languages, the necessity of continuous learning, and the value of practical experience in mastering front-end development. Despite the increasing complexity, I believe these advancements ultimately offer better solutions and flexibility.
Recommended
Transcript
Introduction and Topic Overview
00:00:00
Speaker
Hello, my friend and friends. My name is Kevin, and welcome to my podcast, General Musings.
CSS Centering Techniques Complexity
00:00:05
Speaker
And today I want to be talking to you about, are there too many ways to do things in CSS? And this often comes up when looking at, you know, even if it's something like centering, which used to be that common problem that we'd have where it's hard to vertically and horizontally center something, mostly the vertically centering.
The Overabundance of CSS Length Units
00:00:24
Speaker
thing And now there seems to be, I don't know, 10 different ways that we can easily do it. And so how do you know which one is right in the right situation? And then we have, I think it's 54 different length units now. How do you pick from 54 units? Why do we have that many units? Why are they making more units? Because there are
Handling Color Spaces in CSS
00:00:41
Speaker
more on the way.
00:00:41
Speaker
And the reason it's front of mind for me right now is because I put out a video recently looking at how you can change the color space that CSS is using to interpolate colors for gradients. By default, it uses sRGB, and it creates muddy middle grounds often between colors. And you can easily actually say that, no, I want my linear gradient to be in OK LCH. And then no matter what colors you're using, they could be hex codes. They could be named colors. They could be HSL, whatever it is.
Evolution and New Complexities in CSS
00:01:10
Speaker
the interpolation of the colors and the the way it will figure out the the middle ground and all the math-y stuff it has to do to create the other colors in the gradient, it will use OK LCH or OK Lab or whatever you want. And somebody commented on that video going, there are so many different ways to handle colors now in CSS. How do you know what to do?
00:01:32
Speaker
That's a really good question and it's a hard one to answer because like so many things it depends which always sucks as an answer but it seems to be in the CSS world something that's becoming the more and more common answer as the language evolves and as the language becomes more mature what's happening because of that is we used to have like one answer to something it would be like this is the best way to do it it's not perfect but it sort of gets the job done and here's the weird quirks that come with it and the workarounds you have to do in these different situations but that was the one way of doing it
00:02:06
Speaker
And now, a lot of these new features that we're getting in CSS are filling in those gaps that solution had, those imperfections, I should say, in those solutions. And I think the units is the best one to look at for that, where it's like, why do we have so many units? And it's, well, in this situation, REM is going to be best. In this other situation, M will be better because of
Frameworks and Simplifying Front-end Development
00:02:27
Speaker
this, this, and this. And then, well, now we have an X unit. And that might seem kind of weird, but it could be really useful if you have an icon that you need to match the X height of something. which is the lower height of the lowercase letters. Or then we have the cap height if you need to match the uppercase letter. Again, it could be really useful for an icon. Or you have a line height unit now and you have a root line height. And those could be useful for other things like getting just nice visual flow and I'm sure there's other really good use cases for them.
00:02:53
Speaker
And so as CSS is evolving as a language, it is becoming more complicated and it's filling in a lot of these sort of more niche use cases. But I think what's really important to remember and to know through all of this is we can do a lot without all of these niche things, right? And that can be hard because you might be trying to focus on just like what are the parts I need to know and then you watch a video of mine and you find a tutorial and you see seven things you've never seen it before between new units and maybe subgrade comes up or a container query or there's all these other things that are popping up that you haven't seen before.
Foundation in Core Languages vs. New CSS Features
00:03:27
Speaker
So it can definitely be hard to know like what should I be focusing on right now, which is often why we simplify questions, right? Are we trying to simplify things? Why people will rely on something like Tailwind that sort of takes some of those decisions away from us to a certain extent. Like if you're setting the margins on something, you're not worried about what the unit is. You're just saying I want MB4 and it's going to work and you're not stressing about the unit that's on there.
00:03:50
Speaker
We just want to like throw some code on there and get the layout working and it sort of solves that problem and it reduces some of the thinking we have to do. But the problem now is you have to decide what thing you're going to use that's going to try and simplify these problems for you and sometimes that is very complicated questions in their own.
Mastering CSS: Practice and Experience
00:04:07
Speaker
So yeah, I think the whole space of front-end development is becoming something that's more complicated in good ways because we have more solutions that we can use now than we ever did before and there's easier ways to do lots of stuff but then it's also harder in a sense because we have to figure out what all of those ways are and as usual I do think the best answer is just trying to have a really strong foundation
00:04:29
Speaker
and the more you understand the core languages and the way things work and the relationship between things and all of that it goes a really long way because then when you're trying to add these new things on top of it as long as you have that strong base and as long as you have that strong foundation it usually makes it a lot easier to understand the purpose of this new thing. That you haven't seen before how it integrates with everything you've done before and yeah You just have an easier time in in adding new things to your repertoire and a lot of that is just experience and writing lots of code I've been teaching CSS for over a decade now so you know I have an advantage there and people always ask me how do you get really good at it and
00:05:06
Speaker
a really big part of it is by writing a lot of it, right? And that's the same for anything you do in life. You just have to do a lot. And the more you use the things that you're doing in life, the better at them you're going to get, whether it's writing code, whether it's working on a hobby project of yours, whether it's exercise, anything we're doing, the more you do, the better you get. So yeah, well, front-end development is getting more complicated. I think it is for the best, though. It just means that that learning curve, I don't think it's necessarily more difficult. especially with the CSS and vanilla JavaScript anyway, because you can sort of start at the same base we always did. I don't think learning curve is more difficult, but I do think the learning curve is a lot longer now because you're just continually, there's just always something new and more niche and more nuanced to things that just didn't exist in the past. So there's more that you're always adding to your repertoire.
00:05:56
Speaker
Which, yeah, it can be daunting when you're first learning. So if you're in that situation,
Encouragement and Conclusion
00:06:00
Speaker
don't feel bad. It's normal that it feels like there might be a lot. And it can be hard to know what to focus on, but just try and solve the problems that are in front of you. And if you don't know what your problems are, like find a project to build and try and build it, you'll run into problems, you try and solve those problems, and you'll be finding solutions along the way. You might get something that works that you're not super happy with how it worked, or you find out six months later there was a better way of doing it, but that's what we're all doing all the time, right? That doesn't matter if you have three months of experience or 10 years of experience. That's just how it is. But yeah, I'm sort of getting into rambley mode right now, so that in my head is signaling that I probably should end this episode right here. So thank you very much for listening. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.