Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Why is CSS so frustrating for so many people?
1.1k Plays1 year ago
The survey: https://kevinpowell.co/painpoints
A lot of people get frustrated by CSS, but there are so many different aspects of it that seem to drive people crazy, and I’d love to know what they are for you!
Other awesome stuff around the web:
- Chris Coyier on light-dark() (and other cool CSS functions)
- Bramus’ article on @scope
- Una taking a look at horizontal rules in select elements
What I’ve been up to this week:
- One of the most common CSS issues people run into
- True parallax with CSS-only is now possible
- 7 simple ways to center with CSS
Find me elsewhere on the web:
Recommended
Transcript
Introduction & Podcast Overview
00:00:00
Speaker
Hello my front-end friends and welcome to my podcast General Musings. My name is Kevin and this podcast is the audio version of my weekly Sunday newsletter where I talk about whatever is front of mind for me in any given week but usually at least somehow tangentially related to front-end development in some way or another.
00:00:19
Speaker
Not sure I said 10, potentially right the first time or that time, but that's okay. We'll keep on going. I guess it's my new specificity. Tough word for me to say there, but yeah, we'll keep on going. And this week I want to talk a little bit about CSS pain points, but before we get into that topic, I do want to let you know that this podcast is also available on YouTube, or if you're watching this on YouTube, that it's also available in podcast form.
00:00:43
Speaker
If you would prefer one or the other, the links to all of them are in the description or if you just do a Google search for General Musings, Kevin Powell. The top five links I think are the YouTube channel and then the podcast across various different platforms.
Exploring CSS Pain Points
00:00:58
Speaker
As far as the
00:00:58
Speaker
week goes as I mentioned we're going to be talking about CSS pain points and this podcast is actually going to be a little bit different from the newsletter. I'm going to go off script a little bit just because the newsletter this week was a really short one and I don't want this to be like two minutes long so I'll sort of expand on a few of the things that I was talking about in the newsletter just to make it I don't get a little bit more insight and things that I think didn't really work in the written form.
00:01:22
Speaker
Now, the reason that I wanted to talk about CSS pain points is, as you probably know, my mission statement is to help people fall in love with CSS. And the reason I've been able to make that my mission is because so many people get frustrated with CSS and I want to teach other people the way or not. I want to show people that it can be a lot of fun, right? Not necessarily like teach. This is the way to do it, but just show that it is something that can actually be quite enjoyable once we start really understanding how it works.
00:01:48
Speaker
The thing is, I've come to realize that there's no single way to do that. Just like I sort of mentioned, teaching something doesn't, you know, just saying this is how to do it isn't necessarily the right approach. But one of the reasons that it isn't something that's super easy to address or super easy just to get everyone on board with is because there are so many different pain points. I recently asked on my main YouTube channel what the main pain points people have with CSS are. What's like the one thing that drives you nuts about it?
00:02:15
Speaker
And there was over 300 and something replies. I don't remember exactly what it was. And when I started seeing that there was a lot of different answers, I wanted to sort of track it a little bit. So I actually made a spreadsheet and I started going through and manually categorizing what everyone's response was. I did give up on this after about 120 of them. I was just like, I'm going a little bit crazy. I'm trying to stay organized with this.
00:02:38
Speaker
But yeah, I was really expecting a lot more commonalities to come up and there was definitely some, but I thought there'd be like two main pain points and then just, you know, a random scattering of other stuff. But it turned out that there was like six or seven that kept coming up a lot more than the other ones. And one of the reasons that I actually stopped manually tracking it the way I was doing it is because I sort of had it set up with check boxes to go through all the main pain points. And then after like 12 replies and be like, Oh, look, I have to add another one and now another one and now another one.
00:03:08
Speaker
But as you might have guessed, there are a few things that we sort of stood out, I guess more than the others, with two of those being layouts and responsiveness, which were definitely like talked about separately. And in layout, I include people complaining about either flexbox or grid as well, just because those are our layout tools that we have at our disposal. So it made sense to group those.
00:03:28
Speaker
Some other ones that I guess go hand in hand with each other as well were project management, naming things, and just working on large or legacy projects. There was a lot, a surprising amount of people actually that were like working on someone else's code base that's old and it wasn't well done. It had a lot of replies in there, so I guess a lot of people working on legacy projects are being brought into an existing project and just
00:03:52
Speaker
staring at a giant CSS file wanting to cry. But none of that was really too surprising, I guess. One of the things that did really surprise me from the results that I saw was how many people were complaining about overflows and scroll bars. Especially because the scroll bar stuff was definitely related to overflows. I didn't see anybody mention styling scroll bars. It was more about controlling scroll bars, so dealing with overflow and stuff.
00:04:16
Speaker
which I didn't realize was such a big pain point for people. And now that I'm saying this out loud, I'm wondering if it has to do with when people are using 100 viewport width on something and then inadvertently getting some horizontal scrolling where they weren't expecting it or just at widths 100% that I often rail against and say, you don't need to do that, it's going to work anyway. So yeah, I'm curious if that would be the cause to
CSS Debugging & Browser Support
00:04:40
Speaker
some of those problems. But I have a feeling it was a little bit more
00:04:42
Speaker
in depth just based on the way that people were bringing it up. And another one actually that had a lot more replies than I thought it would was debugging as well. I actually think the CSS debugging is pretty good these days compared to at least when I started. But I do know it's very different from other languages, right? We don't have errors in the same way. If you make a mistake, the CSS still works. That one line doesn't. But there's a good reason for that. But we're not going to go into that. But there was a lot of mentions of debugging.
00:05:09
Speaker
And I don't know if it's so much about like the linting tools, if it's more about the dev tools, if it's more about, I don't know, I didn't get in-depth replies on all of these, so I am curious to learn more. But definitely debugging was something that surprised me with how many people did mention it. There was a surprising amount of hate also with people just complaining about Tailwind and Bootstrap. I was not expecting that with just general CSS pain points, but it did come up though. There was love definitely for Tailwind that got brought in there as well with a lot of people like, I don't have to worry about it because I use Tailwind.
00:05:39
Speaker
I don't necessarily agree with that because I think any problems you can run into while authoring CSS can come up while authoring CSS with Tailwind, except maybe you run into less naming conflicts and that project organization side of things perhaps is a little bit easier. But a lot of the other stuff is still there, right? For example, another thing that came up a lot was stacking contexts.
00:05:58
Speaker
so Taiwan doesn't really solve that. So yeah, stacking context scope as well came up, which CSS is working towards having some form of scope. So maybe people will be happy about that one. And another one that a lot of people did mention was browser support. And as someone who works through the days of like Internet Explorer 6, I always laugh a little bit when I see people complaining about browser support, though now I think it's more about
00:06:21
Speaker
new features, you know, has this come out and then you can't use it for nine months. Right now we have container queries, but you still can't use it yet just because it doesn't have good enough browser support. So I don't know if browser support is so much the inconsistency across browsers or just that once a new feature is there, we have to wait quite a while before we're actually able to use it or not.
00:06:39
Speaker
And there was also one category that always makes me wonder, I'm never quite sure what people mean when they mention it, which is positioning. Because I used to always assume when people said positioning, they meant using the position property with position absolute, fixed, sticky, whatever it is, relative.
00:06:56
Speaker
But then at one point it sort of dawned on me after having some conversations with people about like asking them more about what their Frustrations with positioning were that I realized that it was actually layouts. They were having problems with it was positioning things on the page where they wanted it to go not necessarily using the positioning properties and maybe that's a little bit of a downside of CSS having a positioning property or a position property and you know causes some
00:07:21
Speaker
potential conflict there or not
Understanding CSS Positioning
00:07:24
Speaker
conflict. I don't know what the right word is, but just confusion, perhaps. So definitely for me was something. And then I actually, this is like a few years ago, but I ran a poll on Twitter asking people if they're talking about positioning, do they mean
00:07:37
Speaker
on the page or do they mean the position properties and it was like 70 or 80% of people said just positioning things on the page so they're really talking about what I would consider layout and you know positioning things on the page that totally makes sense so I get why people are saying that but for me it made me realize like oh I've been thinking the complete wrong thing here of something that people have a lot of trouble with
00:07:58
Speaker
Luckily, it's not the positioning properties because hopefully we're not using, especially position absolute is usually the one that causes the most headaches, which we generally don't want to be using too much. And once you understand, I think the basics of how to wrangle that you're not too bad, but yeah, overall, yeah, positioning did come up again. And I tried to sort of tease out when I was reading the person's reply, if they meant like positioning layout wise or position with the position properties, because there definitely was a little bit of both in there. But yeah, something that I always have to be careful with.
00:08:28
Speaker
when I'm trying to figure out what people are struggling with is making sure we're speaking the same language, right? It's always the fun thing when you're having conversations on technical things or just conversations in general. You two people might be thinking they're talking about the same thing and they're actually talking about completely different things or vice versa. I've seen situations where people are talking about completely different things but think they're talking about the same thing and that's always fun as well.
00:08:52
Speaker
And yeah, I think that does go back to this idea of like how do I help people get through all these pain points and especially making sure that we're all talking the same language when we're talking about the different struggles people are having.
CSS Pain Points Survey Launch
00:09:03
Speaker
Because if I don't even understand the struggle they're having, it makes it very hard for me to actually solve it or from misunderstanding the struggle that they're having. So all of this to say that I decided to save myself a lot of time and make it easier to share results and get meaningful results.
00:09:17
Speaker
I've decided to run a very short poll or survey to try and get a little bit more information in a way that I can make better use of the data that comes out of it and share the data and hopefully make some useful content around the data that we get from it. And so if you do want to do it, it's a short four question survey that you can find at kevinpowell.co forward slash pain points.
00:09:41
Speaker
Um, so there'll be a link to that in the description as well, but it's kevinpowell.co forward slash pain points. No hyphens pain points is like one, one word and it will show up. And as I mentioned, it has four questions in it because I didn't want to just ask about what your singular one pain point is because you can only pick one. You have to pick the one that's like the one that drives you the nuts most or the thing that you struggle with the most. And you might have several things, but I want you to pick one.
00:10:06
Speaker
But I also ask about whether you enjoy writing CSS or you don't, as well as how much experience you have writing CSS. Just because I'm also curious there where there might be some correlation, like would people that are newer be struggling more with one topic and people that are more experienced be struggling with another topic or is it just everybody has the same struggles? I honestly don't know and I'd like to find out. So if you don't mind just spending a couple of minutes of your time, I would really appreciate if you could do that survey.
00:10:34
Speaker
but moving on from that we'll go into the other awesome stuff from around the web section of the podcast now where I actually have a few different things lately I've just been sharing one thing just because I've been busy I haven't been finding tons of resources or I always forget to I come across cool stuff and then forget to save it which I'm gonna try and work on and get better at but
00:10:53
Speaker
Yeah, a few different things this week. One of them I'm going to link to because I mentioned a scope as we were going through this.
CSS Features & Future Support
00:10:59
Speaker
So a link to an article by Bramus talking about how scope works in CSS. So, you know, if it's something that is a pain point for you and you want to learn about what's coming because browser support is definitely not fantastic for this yet, but it is something that's in the works. I think it's going to be pretty cool. And it's kind of
00:11:15
Speaker
a little bit, not maybe what you'd expect it to be in a way. So definitely check out that article. By Bramis, it's well done. It's well explained and definitely worth checking out. And then another one, which is a cool little thing that I saw Una Kravitz tweet about. So I found an article that she wrote as well about how we can now add horizontal rules to select elements. And this one's a nice one because it's a really cool feature where you just sort of like visually separate your select elements a little bit more. So you have like groupings within a select.
00:11:42
Speaker
And it works really well. And the nice thing with it is if the browser doesn't support it, it just looks like the regular select menu would. So it's just a nice little progressive enhancement that you can use to sort of make things look a little bit better. And both of Una's and Brahmas's articles are both from the Chrome for developers blog, which I'll just mention really quick is a fantastic resource.
00:12:03
Speaker
A question I actually get asked a lot, how do I keep up with CSS? And between Adam Una and Bremis posting on that site on a regular basis about a lot of the new features and explaining how these new features work, it's a really fantastic way to keep up with the state of CSS and all this new stuff that's coming.
00:12:19
Speaker
There's one more that I'm going to talk about though, which is a light and dark function that we're getting. And this is a Chris Coyer article on his own blog where he actually goes into a few other new functions that are on the way as well that all have various levels of browser support. And actually, surprisingly, this light dark color function only is supported by Firefox right now, which is surprising because these days Firefox has been
00:12:43
Speaker
a little bit behind on features so it's fun to see that it's pushing at least on certain things and not falling completely behind on stuff and is even leading the way on other things. And the cool thing with the light-dark function is you might have seen me use or you might have used the color scheme light-dark in your CSS so the property is color scheme and then you can do a light-dark
00:13:04
Speaker
And that just sets the user agent styles either to a light theme or a dark theme. Either you can do light dark and then it uses the system preferences or you can just say light or just say dark and then it will set it to a light or dark theme for your user agent styles.
00:13:21
Speaker
using the light dark function you can actually supply it to different colors and it's going to use those depending if the user is in a light or dark color scheme and this is really cool because we don't have to rely on a media query to be able to do it necessarily you can say if the theme is light it's going to be this color if it's dark it's going to be this color
00:13:39
Speaker
And for me, that just sounds amazing and a lot less maintenance overall. And apparently this is sort of the first step along the way into having full on color schemes that we can define. And it's another step along the way within the sort of evolution of CSS that will be coming later. But this light dark will be that first step and then eventually we'll just have like full color schemes that we can define and stuff, which sounds really, really cool. Yeah, a few different things that you can check out on sort of new CSS stuff that's on the way.
00:14:07
Speaker
And continuing, I guess, a little bit with this theme of CSS pain points and CSS struggles and all of those types of things and turning onto the stuff I've been up to this
CSS Layout Challenges
00:14:16
Speaker
week. My first video this week was addressing one of the most common CSS issues that I see people run into, which is when they have a parent with a min height on it and then a child with a height that's in a percentage and the percentage on the child isn't working and just why it doesn't work and just heights in general as percentages. They always
00:14:35
Speaker
They tend to be more problematic than not a lot of the time just because you need a defined height somewhere for it to really work. But yeah, anyway, we dive into it in that video. Another one that I look at, which is another pain point that people often have, which is my short this week where I look at seven different ways to center using CSS. And it's a short, so it's all within 60 seconds because there's so many very easy ways to center in CSS. I thought that would be a fun little deep dive.
00:15:00
Speaker
or not deep dive but a fun little dive into centering and just how easy it is now because people I think most people when they say it now are joking but I figured it would be a good little thing to look at and it gives me a video to post every time I see someone on social media saying centering is hard I can just reply with that video now
00:15:17
Speaker
And the other one that I put out was more in realm with the links I shared where it's more about where CSS is going and some new stuff that's coming where I look at how we can do true parallax with CSS only now thanks to scroll timeline and the scroll function that we can use with that.
00:15:33
Speaker
Browser support for this is currently only in Chrome but there is a polyfill for it so you can get it working in all browsers or you can just let it be a progressive enhancement because it won't break anything in browsers where it's not supported but if the browser does support it then you'd get the parallaxed fact and it gives you tons of control. I look at how you can control the different speeds of all the different elements so they're going in individual rates all based on scrolling without one line of JavaScript. It's really really cool and a lot of fun.
00:15:59
Speaker
So yeah, that's it for this week. If you do want to do that survey, remember it's at kevinpowell.co forward slash pain points.
Conclusion & Survey Reminder
00:16:05
Speaker
And if you'd prefer the written version of this podcast or you'd prefer to watch the YouTube version or listen to the podcast version or whatever it is, links to anything I've mentioned along the way, everything is in the description. Thank you so much for listening. And until next time, don't forget to make your corner of the internet just a little bit more awesome.