Unfamiliar CSS patterns that improve on the classics

Key Takeaways

hello my FR and friends sometimes I share some CSS solutions that get people upset at me basically it happens when I show a new way of doing something and people say something along the lines of why are you doing something that's less readable to solve a problem that we already have a solution to so today I'm going to look at some better solutions to Common patterns that we have uh or just sort of why I like sometimes something that people consider less readable and we're going to look at three different things along the way uh including one that people really don't like and got really mad at me for and I'm going to explain why I personally think the ones that are less readable are potentially better Solutions uh than the original Alternatives that we had and I I have a feeling I might have a little rant in me as as we go through some of these as well so so let's jump into the code and we'll see what I'm talking about here uh and the first one here is actually the first thing that people got kind of upset at me for which was when when I talked about how we can do this new type of wrapper which is you know doing or it's not even a new type of wrapper but it's just you know we have the wrapper the traditional way which is when you do a Max width on something margin inline Auto which you know maybe the margin zero Auto is even the more traditional way of doing it uh and then we have padding on the sides and that's this one at the top here and it sets a Max width so if the screen gets too big um I'm going to zoom back out a little bit here just right so like it's holding my content and when we hit a certain point it's stops growing uh and the padding on the sides is there so we have that space and it never touches the edge of the page cuz that would be terrible cool it works it's fantastic it's a very common pattern uh often you know called containers I've stopped calling them containers just because we have container queries now and you might want a container utility class or something to say this is a container for a container query um so I've gone to calling them rappers which is another name that still people are familiar with uh and what I what I proposed is doing it this way way instead which is kind of weird right it looks very different and so why would I choose this over this one when people are familiar with this it's one extra line of code uh and it does the same thing in this version of it we're saying that we're choosing a width that's either 1160 which is what our Max width was set here or 100% minus 4 REM and this is you know the 4 REM is kind of funky I I won't agree um just cuz here I have my padding of two and I'll explain it in a second uh but I actually think that this is a better solution and that's one of the reasons I'd want to actually use this version over this version and the reason for that is let's come and I created these little visualizations that we can do on this uh along the way so I've just added background colors to them because I want to compare the difference between the two and especially if we're at these smaller screen sizes they effectively look like they're doing the same thing right if I have these visualizations off they're identical they're keeping the the space of two REM on the two sides with sort of that fake padding or the padding on one and the fake fake padding setting I have on the other one um and we can see here when I put the visualization on this one actually has the padding cuz you can see it's there whereas this one doesn't it's it's empty space on the sides because it's being set with a Max width sort of on it but where things are different especially and where you start noticing differen is when we hit that Max width and notice how the one on the bottom is actually wider than the one on the top and that's because basically every project you're ever going to do is going to have this on it right uh this is the staple it's on everything these days uh it's very rare that you don't and because we're using box sizing border box on basically every project we're ever going to do that also means that when we're doing that that my Max width that you probably got from a figma file or something else along the way you're matching the design that you had you're taking the width from there but then you're actually getting a little bit narrower than it originally was cuz you're adding padding to the left and the right side of it and so it's not like this huge difference it's not going to be this big gamebreaker but it does mean now I have to think and yeah okay I could do a cal and I could add that into the width or whatever I need to do to make it match there's ways of doing it for sure but on this version I can just put the value in that I need and it's going to work and I know that it's this is like exactly what I need it to be so that's for me a little bit of a win in this one where things are wi here is this everybody knows what it is so it's easier to understand but to me the difference between this and this is a little bit like when Arrow functions came out in JavaScript Arrow functions were weird they looked really really different uh and they're a little bit different and they have their own little things but like did people not use Arrow functions just because they weren't familiar with them if you weren't familiar with what an arrow function was and you came across that in a code base you'd have no idea what's going on if you were just used to doing functions in a more traditional way what the hell is that right so the same thing here this is a different way of achieving something that's similar to this and the only reason it looks weird and it's unreadable is because you've never seen it before that's all all that's like really the only difference that's coming in and I personally probably wouldn't even write it like this in the code base I have this used in a lot of the code that I do and whenever I do it I have a Content Max width right 1160 and then I come here and I do VAR content Max width and so like I don't need to know what's really going on and then as far as like this number here you just come in here and you can set that up as a variable too and this is a variable that I always have trouble with because I've always called I've often called it padding inline or something like that uh and I'll do two RAM and then um I'll come and set that up here but it's not really padding and this is where one of the things when I shared this people like it's not the same thing cuz it's not padding it's your max width is 100% minus 4 so there's no padding on it like we can see there there's no padding on this one which is the good thing about it I don't want padding on there if I don't need to have padding on there I think that's another win for this pattern uh so maybe you know I've come up with different names for this but for today I'm going to leave it there if you have a better name suggested in the comments down below um but then all I have to do is come here and do and uh my VAR padding inline uh and then I have to do a divide by two and because uh order of operations should keep it proper but I'm going to do it like that where it's just to be explicit and like 100% now I've just went and created this really like sort of complicated line of CSS that when you first come across it you go I don't really get it but is it really a complicated line of CSS cuz if I wanted to use this new rapper and I came across this first of all it's going to be documented somewhere probably in the codebase going like you know this is to hold my content whatever you have hopefully have a good thing I'm going to see this and I'm going to know what it does and I'm going to know how I can change it so like from a readability perspective maybe it's a little bit more complicated if I want to get into this code and start reading it and understanding what's happening there but from a maintenance perspective itive is it harder I don't think so I think in a sense maybe it's easier cuz I'm saying exactly what I want these two things to be I don't have to worry about someone understanding like you know again this is pretty straightforward I guess as well but this is setting my Max wi this is setting my inline who cares what's going on here people are going to say oh it's harder to maintain because it's less readable no it isn't because you're not going to come in here and you're not going to change what this is doing this is just doing this one job it's doing it really well and the only things that matter these two lines right here the rest of it could be absolutely anything you could have 100 lines as long as this is what the person cares about when they use it and if they need to make a change to it then that's fine and it's perfectly maintainable and just because it looks different doesn't mean that it's bad right it's unfamiliar unfamiliar doesn't mean bad and another example here we're going to get into uh on this front is this sidebar switcher thing that I'm going to look at here and let's go so just really fast I've set this up so and i' I've put some sizing down here at the bottom and I'm going to get my face out of the way for this one so we can see everything that's going on so here I've set it up I have my main with sidebar and I've set up a break point so if I come and I I shrink this down this parent width when it hits that 750 pixels we're going to hit uh I should not highlight that one maybe I'll highlight these two um but yeah when this one here hits 750 roughly you can see that it breaks and it goes like that how I've done this there's no media queries involved there's nothing else involved this idea comes from um every layout by Hayden ring and Andy Bell I'll link to it down below and it's kind of hacky way of using flexbox it looks super weird right um what I'm doing here is not something You' normally come across and this is hard to understand 100% but it works and so what's the problem with it because if I want to use this in a website I'm going to have a main with sidebar the main area is going to be on the left the sidebar is on the right you could always have a modifier class or something that allow you to switch them or whatever you want um and and how you'd set that up but the main thing is it it works and all I care about is this breakpoint it doesn't matter how much complicated stuff is going on somewhere else because if I need to maintain this I want to change potentially my break point or potentially my Gap and there's probably nothing else that would ever have to get changed here if you needed something that's all of a sudden three columns you're making a new component anyway you're not coming in and modifying the main plus sidebar you're doing something different so how this is working if it's working well then who cares and you might be saying well Kevin this you could do with container queries now which 100% you could and you could probably argue here it is that this is more readable I do a display of flex and then I have when my width on the container is more than 750 uh I'm going to break and change the flex Direction and in this case I have set my wrapper up to be my container type inline size so that's going to be the thing and once again if you look at the parent width on this one when it hits that 750 we're going to get to the point right around there when it's going to break so it works exactly the same way so first of all my other one has perfect browser support as long as flexbox is supported that other one will work whereas this is container queries uh though container queries are now at over 90% support so maybe you have a good argument for going this way and people will come across this and it's maybe a little bit easier to understand what I actually think is this one's more maintainable cuz I have one class and everything is controlled here we can't use Uh custom properties inside of these types of things so like if ever I had I might want to use this somewhere else where I actually need to change this value I don't have to come in with a new container query I can just update you know main with sidebar narrow or wide or in a different thing or whatever it is or I use JavaScript or an inline style and I could just change my breakpoint so I actually think this is more usable even if it's harder to go into the code and read it I think it's more usable and more maintainable than this one is just because of this separation and just basically uh you know having to have this but there's also this other advantage to it which is when I come over to here uh this is a second version of it where what I've done is instead of the break point being based on the parents width the break point is now based on the Main's minimum size so it's completely based on this so if you look here the main M width or the main width on that one so that is going to break when that one hits 750 so it's happening right there it's not happening based on the parent size it's 100% based on the container inside which is something you cannot do with container queries uh and it's a little bit complicated on how we do it the math is kind of weird and we're using this Flex box thing we're pushing it to the limits a little bit but that's fine cuz again I'm not going to have to come in here and make any changes to this the only things I care about are these three values and the Gap is important in this one just because it comes into the math on when things are happening it would it wouldn't change much if you just had a set Gap but I sort of I Ed the Gap value in here to make sure we're closer to the the actual point of this being the right size and so it is kind of weird to do it and it takes a little bit of thinking to set it up but this version to me is the most useful one because or it depends I guess you might want something that's really depending on the container size and when that's happening but this is really cool that I can be focused on when this is going cuz that's sort of usually what you want in a layout anyway I want the layout to this part when it's getting too narrow and 750 is actually kind of big in this case but like at one point it's getting too narrow and when it's that thing is too narrow that's when I want it to change and that's when I want it to actually shift and the browser can figure that out for me based on a little bit of complex CSS it's fine if it's a little bit harder to read because I honestly think it's super easy to maintain it's going to be documented what this is doing how your HTML should be set up to use it and then it's just going to work every time and you just change a couple of different inputs and you have full control over what you want to do and actually as a little bit of a bonus bonus it's not going to be a huge thing but we're actually getting a new thing in CSS the only browser that doesn't currently support it is actually uh Chrome uh so which I'm in right now but we will eventually be able to stop doing things like this times 9999 the 100% minus these means it's either a positive number or at one point it will switch to being a negative number and the whole idea is it's either a really big number because if we get this as a positive value times this 9999 it's a huge number uh or it switches over and it becomes a negative number at one point and as soon as it hits a negative number it sort of breaks how things work and that's really what's driving this to work I'm not going to Deep dive it now I've talked about it in a a previous video and again I'll link to the every layout that describes it really well but yeah we're we're eventually going to be able to drop this cuz there is a new math function called sign that's coming which basically whatever the calculation comes it's either going to return a negative one or a positive one um which will help us out with these but browser support as I said isn't perfect for it yet but something to look forward to um I have one more that as I said that I want to get into which is one that I've talked about a lot um and Sh and again I get some complaints about it um but I just want to ask you and ask you to leave a comment down below if you have any patterns that you'd love or that you use that you think are really good that other people either get upset with for reasons you think they shouldn't or that just people don't appreciate enough or patterns that you think are really cool I want you to share them down below uh because I love stuff like this um and I also you know if you I'm sure the people who disagree with me so far have already let me know so make sure if you do agree with me to also let me know in the comments below so it's not just this one-sided wall of anger directed at me saying I'm wrong um but yeah uh okay so there's that one the next one we can stay on this page I'm just going to comment out um the the this thing at the bottom because we don't need this uh for this example uh but I going to keep these color highlighters on here cuz it's sort of going to illustrate um it's not 100% the perfect example for this but what I want to look at is the flow class which is something that looks like this uh with and this is called the lobotomized owl uh and this is something that people also don't like cuz they say it's not readable and I think it was Hayden Pickering actually who introduced this so um Hayden's having a bit of an influence on this video and what Flo is doing is we're adding a margin top to everything in this case of one ram and we're going to look at ways we can improve on this but the reason people don't like it again is cuz you come across this and it's unreadable cuz what the heck is that doing once again it's not unreadable it's that you're not familiar with it it's it's unfamiliar so you don't know exactly what it's doing um which is fine and there's you know people will say well there's other ways of accomplishing this and the reason we'd even want this is because it's very common to do this right margin of zero um just to Nuke all the margins and then we need to bring spacing back in and one way we can do that is with margins other people say well why don't you just do a a gap um you know use grid and use a gap or use flex and use a gap and we'll address that in a second as well but let's say I came on my main here and then I can do my class equals flow uh and that means we're going to get our spacing that's going to come back into this area so we've reintroduced that spacing that we'd originally taken away the advantage with it is uh if we don't do it with the flow let's just get rid of both of those you'll notice that there's extra space here at the bottom and we have the extra space here at the top which we don't want uh right there's The Annoying Thing with stuff in or with CSS is that the default text uh elements all have Mar top and bottom on them that we don't really want to deal with and what this is doing is it's removing we're removing all the margins and then we're adding it back to the top of every element except for the first element in something that has it and what people do say is well instead of doing that an alternative that we could do is to do flow and then do uh not uh first child first child and these are equivalent to one another they do you this selector and this selector are doing the the exact same thing they're selecting all of the children in here except for the first child and then we could add our margin top so why is this one better than that one cuz this one is definitely more readable the problem with this and I've used it cuz I went you know what maybe people are right let's do something that would be easier to understand what's going on is this introduces some specificity issues uh and that's just because you know the the not doesn't count towards specificity but this does and I've actually ran into issues with using this because of the specific that this comes in with because now we have two class selectors effectively um because pseudo selectors like this count as class select or they're the same level as a class selector now I could nuke that I could come in here and I could do a where uh not first child and that would actually remove that specificity again but now I just find we're we're re-entering into the world of you know is this easy to understand either where not first child I guess you could figure it out it's not the end of the world maybe you prefer that if you want to do that you could you could even I guess come in and just nuke the specificity from it completely by doing something like that uh especially because the star selector doesn't have any either I just find like we're getting into this realm of like this works it's fine it's really easy to document what it's doing so like if I come across this yeah this looks really weird but hopefully I'm not just randomly finding this somewhere I'm coming across something it's like I use my flow to reintroduce flow spacing with like a quick example of it or something and the reason we want margin top and not margin bottom cuz people always tell me to do the same thing but with margin bottom and then do like a not last child instead we don't want to do that and for one very specific reason is let's come in here with an H2 uh just I don't know lower five so we have a little bit of text in there and proper typography doesn't have equal spacing on the top and the bottom uh of elements you want more space here than you have here and just to exaggerate this a little bit let's say my H2 has a font size of uh I don't know three R and I might need need important on that oh no we don't okay so because we're using M here for my margin top this is getting a three REM of spacing on the top of it and it's only has this one here is a one R of spacing on the bottom of it or whatever based on my paragraph font size on the bottom of it so it's reintroducing flow spacing and this is what proper typography does you have more space above headings than you do below them because it's just this idea of proximity and design if you talk to any designer they're going to agree with me um and that's the reason we don't want to use and come in here with REM instead cuz REM would just get all equal spacing it's just not the proper flow from a design perspective and that's the same reason I wouldn't want to come in and just you know get rid of this uh let's do it like this and do a display of grid with a gap of one rem or something like that uh this does solve that problem there are times where I do this I might have a card where I just need equal spacing then this is completely fine but if it's articles or content that has different size of headings and you need need a proper flow to what's actually going in there you need a way to sort of reintroduce that original flow that the document had but in a little bit of a better way and you do that through margin top instead of margin bottom jumping back to having it like this it's not a complicated one to have you can even come in here and do it once again with a flow space or flow spacer whatever you want to call it you can even come in with like a default value so it's just going to work every time you use it but then if you do need to have somewhere that has a different size I could come on this Main and I could have a style is equal to and do flow space is uh. 25m or something and make my spacing uh why didn't that work oh flow space Earth there we go make that much smaller or much bigger whatever you need um through this through you know uh modifier classes whatever you want and it brings that in it's weird looking once you understand it it doesn't really matter too much at least that's my own opinion of it and like just just one last thing here also is like people are saying things like this might be a little bit unreadable or you know the other things we are looking at there with the sidebars maybe this is unreadable but then they're going to make like an even column system using display flex and then you know how often do you see where you have a a row is uh display flex and then you have to go and do like a row children and a flex one to get them all to be equal columns like this is something that's pretty much widely accepted is completely fine or maybe even it's just a do call and they get a flex one so they're all the same size uh why is something like this considered readable and fine when like can someone tell me what this is doing I understand what Flex one is doing most people just go well it's making equal columns that's not obvious if I were to come across this and I didn't know that that's to me just as unreadable as seeing uh you know how I'd set this original part up with some of this weird stuff here Flex one why is that making equal columns most most people probably don't even know how Flex one is actually working they just know that it gets their goal done so you know readability is completely subjective to what you understand and what you know about what you're coming across and there's the big difference between readability and maintenance and making something that you can maintain whether or not the code is complicated or not because especially with CSS the thing is doing one thing one thing only and as long as it can do that job you're not going to be going in and making a whole bunch of changes to that you're going to be tweaking the parameters that that thing is meant to control which is how those custom properties can come in and make things work well and actually speaking of Flex one I do bring it up for a reason cuz if you are curious about how it works I've actually talked about it in a previous video it's probably a lot more weird than you actually expect uh and if you're curious about that you can find that in the video that is right here and with that I would like to thank my enablers of awesome Andrew Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome