Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
The CSS Mindset
1.8k Plays1 year ago
CSS is different from other languages, and while that can seem frustrating and leads to a lot of people complaining about it, there’s a good reason that it is the way it is. In this episode, I explore how and why it’s different, and how we can overcome the frustrations we run into with CSS by adopting the right mindset when authoring our stylesheets.
What I’ve been up to this week:
- A quick guide to CSS focus states
- I just wasted a day on this code, was it worth it?
- Is this the strangest CSS solution out there?
- Choosing between flexbox and grid (not from this week, but mentioned during the podcast)
Other awesome stuff around the web:
- The State of HTML survey
- Jen Simmon’s talk Everything You Know About Web Design Just Changed
- Jen Simmon’s talk Designing Intrinsic Layouts
Find me elsewhere on the web:
Recommended
Transcript
Introduction and CSS Struggles
00:00:00
Speaker
Hello my frontend friends and welcome to my podcast General Musings. My name is Kevin and this podcast is an audio version of my weekly Sunday newsletter. This week I'll be talking about why people often struggle and become frustrated with CSS and how a shift in their mindset can help them overcome that frustration.
00:00:19
Speaker
One of the primary
Why is CSS Difficult?
00:00:20
Speaker
reasons people struggle with CSS is that they approach it like other languages and then they get frustrated when it doesn't work the way they expect it to. And it sort of makes sense because when you first learn CSS it seems like an incredibly simple language at first.
00:00:33
Speaker
I mean, at the beginning, it's basically as simple as HTML, but just with more properties and values that I remember. You might declare a color to change the color of text, add a bit of padding or margins for some simple spacing, or if you want to get really fancy, you can add in a gradient background.
CSS Complexity: Properties and Responsiveness
00:00:48
Speaker
All we're doing is simple property value pairs and we change how the element looks.
00:00:52
Speaker
But for anyone who's written CSS for more than a couple of days, you've definitely run into the situation where things suddenly get a lot more complicated, even though all we're doing is still using simple property value pairs. This happens for two main reasons, or at least I think so, and it sort of causes the complexity of everything to explode. And the first one is that we no longer have single property value pairs, but we need combinations of them to achieve what we want. And the
The Importance of Responsiveness and User Control
00:01:19
Speaker
second thing is that everything needs to be responsive.
00:01:23
Speaker
Now going to that first point about the different combinations of property value pairs, that to me leads to one of the things that I see as a hidden complexity of CSS. For example, a simple display flex actually opens up over 1000 possible combinations of property value pairs, but that's a topic for another day.
00:01:41
Speaker
For today, I want to talk more about that point of responsiveness, because that's just the tip of the iceberg a little bit into that side of things. But it's the most obvious one that comes up when we're talking about needing the right mindset when we're writing CSS. Making things responsive is that one thing that everyone has struggled with, and it's the easiest thing to point out to help explain why CSS is so different from other languages. In HTML, we're just telling the browser what everything is.
00:02:07
Speaker
In JavaScript, even when things get complex, which they certainly can, we're basically saying, in Situation X, do this. In Situation Y, do this. And so on. In CSS, even if all we're doing is declaring a background colour, what we're really doing is telling the browser what colour we'd like that element to be in a best-case scenario.
00:02:28
Speaker
We don't know the color gamut of the user's screens, or if they have something in place to boost the vibrance of colors like you see on a lot of phones, or if they're using their system settings to enable something like high contrast mode. And that's just for picking a color. If you haven't seen it already, I'd strongly recommend that you give the video, Why Is CSS So Weird? by Miriam Suzanne, a watch.
00:02:48
Speaker
In that video, she looks a little bit at the history of the web and how that's impacted the way the HTML and CSS work and how they've purposely been created to give the end user control over the final output rather than us, the author.
Intrinsic Design and Trusting Browsers
00:03:00
Speaker
Let me say that again. The end user has control, not the author. Wrapping our minds around that is what I mean when I talk about the CSS mindset. We need to go into writing CSS not only acknowledging that idea but keeping it at the forefront as we write our code.
00:03:17
Speaker
As some quick examples, we don't know what the user's resolution is on their device. We don't know what their viewport size is. We don't know what the system's default font size is or what the browser's default zoom level is. We don't know what input device they're using. It could be a keyboard, a mouse, it could be a touch screen. Heck, we don't even know if they can see the website at all or if they're using a screen reader. Because of all this, there's no such thing as pixel perfect CSS or pixel perfect design because there are a million different variables at play.
00:03:44
Speaker
This is also made a little bit more complicated because when we're working on something we're usually given a design that we have in front of us that is a nice static layout. Maybe we have a desktop version of it and a phone version of it and if we're lucky we might even have a tablet version of the design as well so we feel compelled to write code that we see on the screen.
00:04:03
Speaker
We follow those absolutes that are in front of us because that's the easy bit. We know precisely what the design should look like at some very specific sizes. But as I'm often asked, what are we supposed to do about all the different sizes in between? We have to make some informed decisions based on the points in the design that we do have, and we need to find ways to make the layout work between those two points without the layout breaking.
00:04:26
Speaker
And this is where people get uncomfortable because we enter into the world of unknowns. To me, the real trick is to lean into the realm of intrinsic design, a term coined by Jen Simmons, where we lean into the idea of giving the browser as much information as we can and letting it figure out what to do for us.
00:04:43
Speaker
That's a bit of a scary world in a way, because it can feel like we're giving up control and handing it off to some behind-the-scenes algorithm. And it also means that if someone were to ask you what a layout would look like at a specific screen size, you can't say with 100% certainty. But guess what? That's completely fine.
Benefits of Browser Control in CSS
00:04:59
Speaker
If we use our tools in an intelligent way and we do a bit of testing, we don't have to worry about the middle ground because we know it'll work fine. Think about it a little bit like when you create a gradient with CSS. We give the browser two endpoints and we trust it to fill in the middle section for us.
00:05:14
Speaker
If we don't like exactly what it looks like, we can add an extra stop or two or three to avoid like a muddied out middle ground or to push the colors in a certain direction, but we'll never add something like 25 or 50 color stops, that would just be silly. We trust the browser to fill in those gaps for us, and generally it's gonna do a much better job with two color stops than if we tried to make it work with 100 of them ourselves. It's the same when it comes to giving the browser control over our layouts.
00:05:41
Speaker
We have a few levers that we can pull or push to help us get in the right direction, just like we can add extra color stops to a gradient, and in general we can have better results by letting it do the hard work for us. The best thing about this idea of intrinsic design is that we can approach it a lot like most things in CSS, where we don't have to suddenly learn a ton of new stuff all at once to properly embrace it.
00:06:02
Speaker
I'll talk more about some of the actual ways we can deal with intrinsic layouts in next week's episode, but for now I just want to focus on how it all starts with this idea of working with the browser instead of against it. We need to realize that even if we want it, we never have complete 100% control over what the end user will get.
Future Topics and Resources
00:06:19
Speaker
Once you understand and embrace that reality, it makes the idea of giving more and more control to the browser liberating instead of restrictive.
00:06:27
Speaker
Plus, it leads to easier to maintain code and a better user experience. So stop fighting with your CSS, stop trying to force things to work and start working with the browser instead. As I mentioned, I'll go into more detail on how we can do all of this next week with some more practical examples. But if you're looking for quick solutions that you can use, I have looked at this in a video previously where I looked at how you can pick between Flexbox and Grid.
00:06:50
Speaker
or how I decide between the two of them in any given situation, when I talk a lot about this idea of working with the browser and working with the tools that mean the least amount of work for us on our own end and the tools that just sort of get the job done and do what they need to do without us having to stress about it too much.
00:07:06
Speaker
So I'll link to that in the description.
State of HTML Survey Insights
00:07:08
Speaker
And of course, Jen Simmons has talked a lot about this idea as well. And I'm going to link to two of her talks, one of them about more how we got to this point and this general concept of intrinsic web design, as well as the second talk where she gives some more practical examples and we get to see it in action a little bit more as well.
00:07:23
Speaker
And speaking about other awesome stuff around the web, from the creators of the state of CSS and state of JS surveys comes a new one this year with the state of HTML survey. If you're unfamiliar with the state of surveys, they're an effort by Sasha Griff and a team of others, for example, Leaveru did most of the survey design for this one, to find out what features of any given language that people are first of all aware of and second of all actually using when they're building websites and web apps.
00:07:50
Speaker
It's an awesome effort, and the more people who take the survey, the more meaningful the results are, and it's also a great learning tool as well.
CSS Learning Journey and Comparisons
00:07:58
Speaker
While I tend to know most of the features mentioned in the CSS survey, after quickly skimming the first page of this HTML one, the first section of it being about forms, I already learned a few new form attributes and browser APIs that I was unaware of before, so I'm looking forward to going through the rest of the survey to see what other features I can learn about to add to things that I can start researching and then eventually making some content around.
00:08:19
Speaker
And speaking of content, as usual I have put out some videos this week as well.
00:08:24
Speaker
My Tuesday videos are now being dedicated to beginner-friendly content, so I took a look at the difference between the three different focus states that we have, which are focus, focus visible, and focus within. And then in my Thursday video, I tried something very different, where after spending an entire day working on a demo that I was going to use for a YouTube video, I found out Hyperplexed already had a video on the exact same effect, and I was going to scrap it at first, but then I thought about it a little bit.
00:08:50
Speaker
and decided to turn it into something a little bit different and more about what I learned going through the process because it took me a long time and I had a few failed attempts as I was trying to build out what I was going to use for the YouTube video. So I shared sort of my progression along the way and the things that went wrong and then obviously how my final version did work. But then I also compared my solution to the one by Hyperplexed as well as two other approaches that popped up later on by Timavani FIF and Jay and
00:09:16
Speaker
The fun thing with this is while we all had commonalities with how we approach things, there is something different in every single one of the approaches. And when I say different, it's not like, oh, we did this one little thing different or it's a one pixel here. We had like some fundamentally different things with how we achieve the same goal. And so I was really enjoyed.
00:09:34
Speaker
sort of breaking them all down and seeing what we did different and I learned some fun stuff along the way.
CSS Line Clamp Limitations
00:09:39
Speaker
So instead of being a traditional tutorial, I thought it'd be really fun to share sort of that journey that I went through as well as then comparing my solution to the other solutions that were out there.
00:09:47
Speaker
I also had a short that I put out where I looked at the line clamp because we don't have a line clamp in CSS or we do have line clamp where you can say like I only want to show three lines even if I have ten lines of text so this can be good if you have dynamic content on a card or something like that that's coming in. So we have line clamp is what we want for that and you can say line clamp three that is part of the CSS spec but right now none of the browsers actually support that. Though there is a WebKit line clamp that they all do support.
00:10:15
Speaker
Though it does take a few extra lines of CSS to actually get it to work, but it's all really weird stuff that you will never see used anywhere else. So it's just a fun little exploration of that, but it also works across all browsers. So that's
Conclusion and Resources
00:10:26
Speaker
handy until they eventually support the official version of it from the spec.
00:10:30
Speaker
And that's it for this week. If you'd prefer a written version of this instead of an audio version of it, the link to my newsletter is in the description as well as a link to all my socials and of course links to everything I've mentioned along the way as well. 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.