The CSS Mindset

Key Takeaways

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 one of the primary 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 I mean at the beginning it's basically as simple as HTML but just with more properties and values that to remember you might declare a color to change a 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 all we're doing is simple property value Pairs and we change how the element looks 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 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 second thing is that everything needs to be responsive 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 is a hidden complexity of CSS for example a simple display Flex actually opens up over 1,000 possible combinations of property value pirs but that's a topic for another day 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 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 color what we're really doing is telling the browser what color we'd like that element to be in a best case scenario we don't know the color gamut of the user 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 Y is CSS so weird by Miriam suzan a watch 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 office 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 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 touchscreen 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 this has 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 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 and 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 and this is where people get uncomfortable because we enter into the world of unkn 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 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 thes 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 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 if we don't like exactly what it looks like we can add an extra stop or two or three to avoid like a mudded 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 going to 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 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 of new stuff all at once to properly embrace it 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 once you understand and embrace that reality it makes the idea of giving more and more control to the browser liberating instead of restrictive 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 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 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 so I'll link to that in the description 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 a second talk where she gives some more practical examples and we get to see it in Action a little bit more as well and speaking about other awesome stuff around the web from the creators of the state of CSS and state of 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 Leia veru 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 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 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 and speaking of content as usual I have put out some videos this week as well my Tuesday videos are now being dedicated to beginner friendly content so I took a look at the difference between the three 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 hyperplex 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 and decided to turn it into something a little bit different and more about what I learned going through the process cuz it took me a long time and I had a few failed attempts as I was trying to 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 hyperplex as well as two other approaches that popped up later on by tamam fif and J and the fun thing with this is 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 sort of breaking them all down and seeing what we did different and I learned some fun stuff along the way 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 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 10 lines of text so this could 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 3 that is part of the CSS spec but right now none of the browsers actually support that uh though there is a webkit line clamp that they all do support 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 handy until they eventually support the official version of it from the spec 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