How to Teach CSS | Josh Comeau | CSS Day 2024

Josh KO is up next uh you may know Josh from online um he's a software developer and educator a former engineer at KH Academy digital ocean and unsplash and he's a Web Master uh wearing excellent pants so uh thank you Josh welcome on stage welcome Josh on stage [Applause] well hi everybody oh this is so much fun um a very big thank you to the organizers uh this is one of the like you know I've been to a lot of conferences and you notice the little details and they are flawless here so I think we

should start by just giving a big round of applause to everyone involved uh it's been really good I also uh had the delightful experience of being able to uh get a peak into Sarah's accessibility course and it was it's absolutely incredible so I highly recommend you take advantage of that discount code all right so I'd like to start with a scenario that I think many of us have seen before something that has beveled all of us at some point in our career here's the setup we have an image which is sitting in a container the

image doesn't really have much going on uh some basic properties sitting in a section the only CSS I've written is an outline so that I want to be able to see the box and I'll make this a bit bigger or no that should be well let's try this you'll notice there are a few uh little pixels down here what do they doing I typically like there's Usual Suspects for this kind of thing right like we typically assume it's the Box model stuff like maybe it's some border some margin some padding but in this case we

can sort of investigate it there's no margin there's no border there's no padding the image is the size that I have wanted it to be um and the container the section also has no margin no border no padding and what we notice this is the most baffling part of all let me see if I can do this that's not the keyboard shortcut this is yeah juggling multiple things we see that it is a very sneaky 25 6.33 pixels so where are these 6.33 pixels coming from I started writing CSS in the early 2000s so it's

been a while and for most of my time as a developer my mindset with CSS was that like I liked it I knew enough of it to get by but I wasn't really curious I wasn't like when I would hit things like this my mindset was to power through it as quickly as possible so that I could finish developing whatever I was working on so I would Google uh weird CSS Gap under image you would find a stack Overflow thread you would scroll through ignoring all the words and just looking for Snippets like things that

you can copy and paste and cross your fingers and hope that like magically this problem goes away these days uh maybe wouldn't use Google for that but you might use used the new robot tools that we have and so just for fun I asked chat GPT I gave it the scenario and sure enough it gave us some CSS to try so let's try it it wants me to on the container add line height zero and check it out like somehow weirdly bafflingly the problem goes away and so you know had this happened to me in

2007 I would have said great uh let's go do more interesting things there's a couple of problems with this mindset though the first is that it requires you to have a really good memory like I now have to memorize that when I run into this very particular issue the solution is this totally arbitrary seeming uh line height zero so and I don't have a good memory so what's going to happen is in three weeks or three months I'm going to run into this problem again and have to go through the whole process of understanding it

again or remembering the solution but the bigger issue is that when you have this mentality for all of CSS it stunts your growth like you wind up uh with a really shallow understanding of CSS because you never actually understand anything you just memorize a bunch of little get out of jail free Snippets um and that really sort of harms you as a web developer so it was maybe 2017 2018 that I decided I was sick of feeling this way I was sick of feeling like my afternoon could be derailed at any moment by like CSS

just throwing me a curveball and I decided that from that moment on when I hit a situation like this I was going to settle into it like it was a nice warm bath and really just try to understand it get a sense of what the problem is and why the solution works and in this situation like check this out the thing that really helped me understand it is what happens when there is text in this container we see something kind of interesting which is that the text let me zoom out a little bit get this

centered the text is sitting on the same imagin line that our characters are sitting on right in typography we have this thing called a baseline uh the image is just sitting like just another word in the sentence on this Baseline and we sort of forget like if I get rid of the image and I just have the text this looks perfectly normal and we don't even see the fact that yeah there is apparently 6.33 pixels of space between the bottom of the letters and the bottom of the line and so like I discovered that and

clicked and I thought Ah that's that's why this is happening and that's why line height zero Works uh it works because and actually it it can cause a lot of Havoc too because what we're saying is that each line of text should have zero pixels of height which you know that's not really what we want fortunately it's not going to like like it takes the images size more seriously than the character size so the the container doesn't collapse but you know this isn't really the best solution to this problem um another option you'll see online

is to select the image and to add vertical align and this is a property that the default value is Baseline which is that imaginary line that the text runs on but we can change it to bottom and this has the advantage of not completely obliterating any other text that exists in that container but it still sort of feels to me like we're treating the symptom rather than the disease like the problem to me is that it's treating this image like it's part of the sentence rather than part of the layout so the way that I

would solve this today would be to set display block and of course this is going to force it onto a new line really though like the problem that we're trying to solve is when there isn't any text so we'll see if that works and it does or maybe you know move this to the parent and set display Flex also a valid solution so in 2017 2018 I started uh developing this muscle and set settling into these problems and it was kind of amazing like all of these things that I had had to memorize over a

decade of experimenting with CSS they suddenly made a lot more sense and I started seeing connections between things that had seemed uh totally disconnected it really was like like I went from feeling like CSS was this inconsistent experience to something that felt really elegant uh and that I really enjoyed using and as part of that like as I started getting better at it I started building a reputation for myself and at work I became known as the CSS person the person you would go to uh if the CSS was misbehaving for you I'm sure this

is I'm not the only one who here has been the CSS person at work and every hand goes up um it makes sense right we're here at a CSS Conference of course we like CSS um and it's a pretty cool position to be in because you know your developer friends will have been banging their head on some problem and they come to you and like when this would happen to me sometimes I would be just as dumped and we could you know it's an opportunity for us to learn together uh but most of the time

I would see what was going on and be able to solve their problem and it's a wonderful thing when someone has a problem they've been struggling with and in like 20 seconds you can be like oh add this CSS and the problem goes away but it's even nicer to spend like 10 or 15 minutes and work like walk them through why this problem is happening and why the solution works and I found that in these short conversations you could really change someone's understanding of CSS you could really fill in a lot of the gaps in

their own mental model and so in 2020 or so uh I decided to focus on this I left my job and I created a CSS course that I call CSS for JavaScript developers very uncreative title but it was uh named this way because I had sorry what good SEO exactly good SEO um it was uh so many like of my peers who I was working as a full stack JavaScript developer uh that had sort of the same uh challenges with CSS like they they understood JavaScript really well and they understood HTML well enough and then

like CSS was their Achilles heel um so I created this course to date I think something like 18,000 people have taken it and I've answered hundreds and hundreds of questions about CSS and that's kind of what I want to talk about here today um I suspect many most of you in this room know CSS better than I do so I'm not really trying to teach you CSS but I want to show you sort of the the most effective ways that I've learned to explain what are really sort of fundamental concepts with CSS like CSS is

having a moment right now right there's so much new exciting stuff we've been hearing about them today like anchor positioning and scroll animations and I worry a little bit that for so many JavaScript developers Ruby developers PHP developers um they're stacking on these new Jenga bricks onto a tower that's missing a bunch of blocks uh so I want us I want to try and cover some of those more fundamental things the first thing I want to talk about the the one of the biggest perspective shifts that I've had that has really sort of helped me

with CSS I used to see it as this giant bag of properties and so as you're building a layout you pluck out the properties that you need like I need width over here and justify content um and that's fine but I find it much more helpful to see CSS it's almost like a collection of mini languages so you have like Flex box and grid and table and normal flow and all these things are sort of independent but connected like stars in A constellation and I'll give you a perfect example of why I think this is

a more helpful mental model the scenario here is that I have this div class item and it has width 2000 pixels and then I have some cosmetic Styles because I realized the scroll bar here is really tiny so you probably can't tell uh just how wide this element is and if I take this item and I don't change it at all right I'm not changing I feel like this is a magic trick uh I'm not changing it at all but I'm just going to move it into a parent that sets display Flex well all of

a sudden it behaves very differently now it is sort of growing and shrinking based on the container and if you just focus on the properties this is one of those things that feels like a quirk it feels like an inconsistency because I haven't changed the CSS at all it's the same thing on the same element but all of a sudden this property is doing something totally different whereas if you see CSS as a collection of layout modes well then what's happening here is that we're taking the same input we're taking the same properties but we're

handing it to a different system a different star so this first one it's rendered in sort of uh a default formatting context there's nothing uh nothing special about it and so it's going to use flow layout right the default layout mode and in flow layout with is sort of on a block element like this at least sort of a hard constraint like if you ask it to be 2,000 pixels wide you're going to get something that is 2,000 pixels wide consequences be damned like even if it has to burst through the side of the viewport

like the Kool-Aid guy you're going to get a really really wide element I don't know why I I tried that joke recently and it didn't work but I thought it would be good um the other element right this other element we're writing the exact same properties but we're handing it to flexbox and flexbox uh has a different perspective on things in flexbox it's not going to just take this value and apply it it's going to work that into a larger system in flexbox this is sort of a suggestion or like a utopian ideal right in

the ideal world if we have enough space they it would be lovely to have a 2,000 pixel wide element but that's going to be filtered through the rest of the algorithm and you're going to like maybe get a different output I think that's all I wanted to say about that so let's look at some of these layout modes let's look at them a little bit more in depth starting with the default and I know like people don't typically call it flow layout but I find it helpful to have like flexbox layout and grid layout and

flow layout so that's what I'm going to do and the way I describe this is that it's the word processing algorithm it works quite a bit like Microsoft Word or Google Sheets and so I think it's helpful to explain this layout mode using an actual word processor in flow layout your page is made up of blocks so you have this heading you have a paragraph if you had a table or at list those would also be blocks and uh in English at least blocks stack vertically so each block is stacked one on top of the

other it's important to see this as uh like you have a fixed amount of horizontal space your page is only so wide and yeah like your page is only so tall as well but you can have as many pages as you want so you have infinite vertical space but not a lot of hor or yeah infinite vertical limited horizontal and so we have these blocks you stack them vertically in each block you can have like sub selections of text or other elements so like you'll notice I have some bold text over here maybe we have

some red text or a link and the Curious Thing the surprising thing is that images are considered in line and I think we've all had this experience too like working on school projects if I grab this image and maybe I want to float it off to the side you drag it over and it does this which like is just not helpful um but where have we seen this behavior before of the image sitting as if it was just another word in the sentence right CSS uh was introduced at a time when the worldwide web was

a collection of hyperlink documents right that was the main thing we were doing was people were publishing documents that linked to other documents and so it made sense I mean initially CSS wasn't even really designed for layout but to the extent that it was this was the layout that was It was kind of integrating into and I think this is helpful and actually it's kind of cool there are floats so you can even you can really see where CSS sort of got its roots um but yeah just for fun let's sort of play with a

similar thing in actual HTML I have three blocks I have a heading into two paragraph s and uh the second paragraph has some bold text so let's select it and I think one of the things that really confuses people about inline elements is that like a bunch of stuff just doesn't seem to work like if I set height 100 pixels well it doesn't do anything and I guess let's add an outline so that we can see what's actually going on uh whether it's 100 or a much bigger number or a much smaller number it doesn't

seem to have any effect and the way I explain this is that inline elements they're like pacifist they're non-confrontational they don't want to make a fuss like they just want to sit where they belong they want to go with the flow um they don't want to cause any problems they don't want to shift things around at least in the block Direction uh padding is kind of interesting if I set like let's say 32 pixels of padding it does something the box I know this may be a little bit hard to see the Box gets bigger

but keep your eye on this other paragraph right no matter what I do to this padding that paragraph doesn't really move so the Box gets bigger but it's not really affecting the layout now inflow layout we have blocks and we have inline elements but there's a third value and this third value like for a long time really sort of confused me and I don't know if this is relatable there are certain things in my life that I just have to keep learning them like I learn them and I think I get it and then a

few months pass and I realize I don't uh time signatures are kind of like this like I played the piano and for a long time the difference between 34 and 68 I just couldn't like they're both fractions and they reduced to the same thing so what's going on um my partner studied economics and every now and then I'll see like a financial term in the news like quantitative tightening and I'll ask him to explain it and he will and I'll be like Oh okay that's okay good you know I'll have some reaction to the news

uh and then I'll see it again next week and have no idea what the hell it means and don't ask me to explain this because I'm still working on it um but yeah inline block was one of these things for me where you know you read these definitions and they're very like I I don't mean to pick on this definition it's a very accurate and well-written definition but if you don't have the depth of understanding The Words just wash over you right uh it doesn't really help unless you already understand what a blockbox is or

how things are flowing around surrounding like all of these things require a lot of understanding so the way I explain it now is that an inline block element is placed on the page like an inline element but unlike an an inline element it has a vote when it comes to block layout so let's poke at this let's play around with it a little bit I have a span and span elements are inline by default but I've given it inline block and right away like it doesn't seem to do anything right it is still being placed

in the paragraph the same way an inline element otherwise would um if I change it to block well then we see it has a big impact like it forces itself onto its own new line because block elements are kind of greedy like that they don't want to share any inline space um so it doesn't seem to do anything compared to inline but all of a sudden I have access to things like padding or things like height and they actually do and I should be a Good Samaritan in use Rems for this um it actually does

affect the block layout we see that other paragraph moves down now this does sort of B the question if inline is like or if inline block is like inline but without any of the disadvantages why would we ever use display inline well it turns out that display inline has a superpow of its own it's something that as far as I can tell doesn't exist in any other CSS context like it doesn't work in flexbox or grid and not only is it unique it's super common like every website uses this feature does anyone know what I'm

talking about yes I heard it line wrapping so I shouldn't have underestimated This Crowd um we see that if we have an inline block element it's always going to form a rectangle the same way that a block element always forms a rectangle right in this case it behaves just like a block element which means that we get a bunch of like Dead Space over here and over here if I set it to be display in line then all of a sudden this blocky rectangle gets sort of chopped up into smaller rectangles the way I like

to explain this is just like a sushi roll where it starts as like one big cylinder and you chop it up and you can like artisanally arrange it onto multiple lines it's pretty cool so that's the thing right and this is something that's important because a lot of developers myself I'm guilty of this too uh we like building these fancy link effects where you have like pseudo elements uh that don't really work with inline elements so you make your link inline block but then you get into this problem like we had initially um and it

encourages you to use really short link text to avoid this problem which avoids the problem but introduces a new one which is that your links are no longer helpful uh which is a much worse problem but uh so it's good to know that this is uh there is a reason for display inline let's talk about flexbox let's move on to another layout mode the way that I explain flexbox is that it's another layout mode so it's another one of these Stars within the constellation of CSS and it's primarily concerned with Distributing items in a single

Direction so whether you have like a bunch of stuff that you want to sit side by side in a row or one on top of the other in a column that's the purpose of flexbox it's a one-dimensional layout algorithm primarily there is wrapping so you can get away with doing some things in 2D but for the most part I built a tool to help us play with this and the thing that I think is really cool about about flexbox is that everything almost I think Gap is the exception but almost everything is pegged to this

idea of the primary access so justify content align items uh all the other flexbox properties that they're not based in the world of horizontal and vertical they're based in the world of primary axis and cross axis and if I change the flex Direction it's like the whole system just rotates and a property that was working horizontally will now work vertically a lot of developers struggle with this idea of justify content and align items and I think that like like I was guilty of this too you memorize them so you remember the term justify content you

remember the term align items and whenever you have some flexbox stuff to do you try one and if it doesn't work you'd use the other one um I can tell that this is somewhat relatable at least at some point in our career now there is a bit of memorization that I had to do here which is that justify refers to the primary axis so the moment you see justify it's always going to be pegged to the primary axis when you see a line it's going to be pegged to the Cross axis but then the question

is like why is it content and items why aren't they both content or both items and this actually there's a very good reason for it um it's because of the fundamental difference between the primary axis and the cross axis I can draw a straight line that intersects all of the elements in the flex container and again with flex wrapping this changes a little bit but for now let's pretend that doesn't exist and uh I can't do that in the cross axis so like there's no vertical line I can draw that ever intersects more than than

a single item that's interesting right like that surely has some implications like if I have this second item the word two over here I can decide what to do with that independently like if I want I could align it at the start I could align it at the end I could keep it stretching like it is now and it doesn't affect its neighbors like it can do whatever it wants in this direction along the cross axis but I can't do that in the primary axis like I can't say take this element and move it to

the start because there's something there like it's sandwiched between these two other elements and so when we think about the primary axis we're not thinking about individual items that can each do whatever they want we're thinking about it as content it's a little bit like and I'll get rid of our cat for now um in word processing when we talk about text align like when I align the content I'm not thinking about individual words like I'm not thinking okay if I want to Center aine this word has to move over this way and this word

has to move over the other way no you're thinking about it as content as like a group of stuff that's all going to be aligned in one system which is why we have these cool values like space between and space around in the other direction though we're not thinking about content we're thinking about individual items that can each sort of do whatever they want so that's why that distinction exists let's talk about uh and this is kind of fun a bunch of things about this scenario uh like I mentioned right I have the CSS course

so many things in here have been tripped over by students in my course um and it seems pretty straightforward we have a flex row with a label and an input I'm aligning items to the Baseline so that the label and the input their text lines up but check out what happens when I shrink it well that's kind of weird the label breaks onto multiple lines and if I keep going and this is a little bit hard to see but the input overflows so there's two Mysteries here that I want us to unpack together the first

is why does the label kind of prematurely split up like this like why not keep it as a single line of text until you really can't fit anything else like until it really feels like it's more of a crunch right the way that I would have solved this and the way that so many of my students solve this is by finding the magic number that works as a minimum width so let's try minwidth I don't know 80 pixels see if that works nope that's not enough 90 no 100 ah okay good uh now it's a

little bit too much so if we add outline solid we can sort of poke around with this until we find the exact perfect value uh and of course this is not how we want to do this right um for one reason the moment the label changes well now we have all this dead space that we have no way to get rid of but there's a better way to do this which is to use the actual Flex algorithm and set Flex shrink to zero that essentially tells it and I'll put back our other word uh that

this thing is sort of not allowed to shrink Flex shrink is a ratio of how much one sibling should shrink relative to the others and we're saying no uh this one should not be flexible it should take whatever size uh it has been given and stick with that now what about this input why is it sort of uh bursting through the side even though like you know it it seems like there should be more of an ability for it to shrink like I've given it the flex one which is another one of these like you

know you learn that this specific declaration uh does a bunch of things or that you know you just sort of try it and hope that it does what you want um but it doesn't do what we want because this input is overflowing and you know if I set Flex shrink to a really big number you would expect okay well now it's going to do exactly what I want uh but no it doesn't the thing to understand here is that in flexbox there's two sort of numbers that are really important to understanding the final value that

we get the first one we already saw and I'll get rid of some of this stuff so we can see it again get rid of that too which is the hypothetical size this is what they call it in the specification which I think is absolutely great the hypothetical size is the size that this thing would be again if there was nothing else acting on it so you know if I said it to be a th000 pixels well we don't quite have that much real estate to so it's not going to be a th000 pixels but

that's one of the inputs the other is the minimum content size and we sort of say this already with the uh input over here or the label rather if I once again give it an outline come on typing um initially and if I get rid of this we see that it has this nice comfortable spacing if I keep shrinking it wraps onto a new line and then it'll keep shrinking until we reach this point and at this point it really has nowhere else to go CU there's no more line wrapping opportunity so it can't shrink

anymore and if it were to shrink it would wind up overflowing and then it would show up behind the input right that's that's not what we want and so this is the minimum content size for this element in this circumstance and the surprising thing is that inputs also have a minimum content size and it's not based on like the length of the value um I don't actually know what it's based on I think it varies depending on the operating system but in this scenario at least this is the minimum content size and so and I

guess I'll put this back now the uh the magic incantation that developers learn to solve this problem is minwidth zero and again this is like that thing you memorize that you paste in if you're having some weird behavior and cross your fingers and hope that it works um and it does I mean I don't know that this is an ideal user experience uh so you know maybe we'll fix that by adding Flex wrap and now I think we have something that we can feel oh and let's put flex one yeah I think this is pretty

good right this is pretty or no this isn't what I want I guess let's set maybe 80 pixels as a minimum yeah that seems good and again I should be using Rems so maybe like five REM let's try that yeah this seems like a pretty good way to do it but like I think this example is so great because it shows a handful of things that seem arbitrary like Flex shring zero minwidth whatever it is um but when you take the time to understand the flex algorithm you can really be very intentional and very granular

with the sort of thing that you want to do and I think examples like this are a great way to show that because everyone has struggled getting this thing to do what we want and sort of finding the hacks to make it work and if you can give the explanation to these properties all of a sudden it feels a lot more intuitive let's talk about positioned layout and this one's a little bit harder to explain because you know like with flow layout we can say okay uh it's the Microsoft Word layout algorithm it's based on

word processing with flexbox it's uh the one-dimensional layout algorithm where we have a group of things and we want to arrange them either in a row or a column positioned layout is a little bit different because it's almost like there's like sub layout modes within it the thing that they have in common is that you take the element which is going to be in its like otherwise calculated layout sometimes we call this inflow which I think is fine but also like that term predates flexbox and grid so now it should be like inlow or Flex

or grid which I just think like calculated layout makes that a little bit easier to understand um so we take it out of that default calculated layout and we anchor it to something else and the something else is going to depend on which subvariant we're talking about so in relative positioning uh we're going to take the element and I'm going to slap position relative on it and it doesn't do anything uh it doesn't do anything because relative position is relative to its calculated layout so first the other sort of layout calculations happen we put display

Flex on the parent this input uh has Flex one which means that it's going to grow to be as big as the container will allow um but then it allows me to do some other stuff like I can say top 32 and now the input slides down so first it inherits whatever layout would otherwise apply uh and then it sort of elevates it to this other layout mode that allows us to shift things around or do other Transformations on it now uh this isn't terribly useful on its own like it's true I do need position

relative in order for the top property to work but there's other ways to accomplish the same goal like I can use transform if I do this we get the same effect so really I think relative position is most useful in tandem with other position elements let's talk about absolute positioning which in my mind is like the magazine layout algorithm like if you ever want like a collage kind of effect where you want things to be sort of stuck wherever they need to go uh this to me is the layout mode for that and uh the

cute scenario I have here is we have this pink circle which I've given a class of teenager and let's suppose that our teenager has been rebellious and we've ordered our teenager to go to its room um and the teenager though has like a bit of an ace up its sleeve um and if it's absolutely positioned check it out it can break free of its room uh and go hang out at the address bar it's my little joke um so this to me I think is uh the level of understanding that a lot of developers who

haven't sort of uh gone through the process of really understanding CSS they assume that absolute positioning is going to be relative to the viewport right like if I say top zero it's going to be stuck and I should mention this is an iframe so like this here is sort of the scope of the document um and that's true and again right if we think of CSS as a grab bag of properties uh that is true in some contexts but not others and that's what makes CSS sometimes feel kind of arbitrary um because as you may

know if the parent then says no no no rebellious teenager I'm going to slap position relative on here well then all of a sudden our teenager is back in its room and the way that I explain this is I say okay when when the browser is figuring out where to put the absolutely positioned element it's going to look to its direct parent and it's going to check to see if that element also uses positioned layout if it doesn't it ignores it right that element will not contain this child and it goes to its parent which

I think in this case would be the body tag and you know up and up then to the HTML tag if it makes it all the way to the top without finding a suitable container then it uses the initial containing block which is a rectangle the same size and shape of the viewport but any element in that chain any ancestor can become the container for that element by using any valid position property other than static uh so relative will do the trick so will absolute all of those values will uh make this element act as

the container for this child now fixed positioning is uh one of the more easy ones to understand but I still have a cute way to explain it uh imagine you're on a train and you're watching this beautiful landscape scroll by and then imagine that a fly comes and land on the window now I was too lazy to get clip heart so we're going to use our imaginations and pretend that black circle is a fly um and what we notice is that like it is no longer part of the landscape so as I scroll that fly

isn't going anywhere because it's on the window that we're looking out of the Train on right uh when we browse the web it's similar we have a viewport which is our little window into the document and as we scroll the page it's like the landscape scrolling by and anything that uses fixed positioning is like stuck to the glass of our viewport like it's no longer part of the document that is scrolling by Z index who doesn't love it um one of the things that I've noticed with Z index is that a lot of developers overuse

it like you wind up using it even when you don't need to um and a good example of that is this I also had a lot of fun drawing on cat photos um so and this is another one of these like common traps for developers I have a heading with Z index 10 I have an image with Z index one I forced them to overlap with some negative margin and unfortunately the image is covering up the text now most developers understand that the higher the Z index the closer to the viewer it's supposed to be

so when I say Z index 10 it should sit in front of the image now this is something I understood for quite a while so it's not something that was part of my like 2017 era rebirth uh so if I go back in time and I try to imagine how I would have explained this in like 2012 I would have said something like this let me get into character uh okay the Z index property has a dependency on the position property so if I want to use Z index I have to use position and if

I set position relative then this sort of activates this property there's a sort of dependency between them and then it'll do what we want now back to my current day self um that's not wrong but it's incomplete uh well first thing actually we don't even need Z index in this position like if I get rid of all that Zen index well now it works because anything that uses positioned layout will automatically be promoted to sit in front of elements that don't so position relative on its own is sufficient to solve this problem um but even

then Z index has nothing to do well it has something to do with the position property but only indirectly really the way to explain this is that different layout modes Implement different properties so when I write z index 10 the browser takes this property as an argument and it hands it to the flow layout function right it calls flow layout with these with this declaration as an argument and flow layout says I have no idea what to do with this right it's the same thing as if I said like food spaghetti Spug uh you know

like I don't know what to do with that that doesn't mean anything to me what we want to do is make sure that we're using layout mode that implements the property and positioned layout will do that right that's that's why all of a sudden we're handing the same CSS to a different layout mode and says oh I know what to do with this but it's not the only one that does and this actually blew my mind when I first discovered it um if I select the parent so the main tag and I'm going to give

it display grid and then I'm going to get rid of this uh well we're back to where we started uh but now I can use Ed index it works uh because the grid layout mode implements set index so is flex box like I said display flex and then Flex Direction column just so that the elements continue to overlap that also works and it works the exact same way like if the image has a bigger value then it will sit in front and I can sort of uh change which one shows up in front so it's

really about using the properties with layout modes that Implement them all right this uh unlike the previous one was something that continued to baffle me until a few years ago which is I this header it has position relative Z index 2 so I'm using Z index but I'm using it with the correct layout mode like a layout mode that implements it I have this tool tip which uses position absolute and a much larger Z index value but for some reason the tool tip and I know this might be a little bit hard to see um

it is sitting firmly behind the heading or the header well that's weird right it's a bigger number maybe it's not big enough let's keep going maybe now hm the problem with this is that Z index values are not compared globally so like if we were to sort of paint the Dom with the actual value that it's using header has a z index of two but then this main element has position relative Z index one which means that this main element is also uh sort of participating in this context and it means that anything inside this

main tag is going to sit as a group either above or below anything in this group right using position relative and a z index is one of the many ways to create a stacking context which effectively flattens everything inside and so when I add the Z index value and let's reduce this a little bit uh to this tool tip it's not like I'm setting this to be this big value it's more like I'm setting it to be this 1.999 it's a little bit like semantic versioning is how I explain this for JavaScript developers um it

doesn't matter how big the minor version is uh one anything is always going to be less than two so the Z index on this value is allowing me to change whether this tool tip let me give ourselves a little more space uh whether it shows up above or below this paragraph but it's not doing anything to help with the header so how do we fix this well really the solution would be to use like the popover API because this is a really terrible way to implement a tool tip uh but we're ignoring that for the

purpos of this demo again we often use Z index more then we have to if I get rid of that it works and this is another thing that trips people up um you assume that like okay if this element and this element are siblings uh then this element is either going to be in front or behind but really it's not about the Dom structure it's not about like two siblings in the Dom are going to be compared it's about stacking contexts and so if I don't make a stacking context on the main then I remove

that initial number and now it actually is comparing this value and this one so this is like I feel like I've done a a whirlwind highlight of some of the more uh effective little bits of things that I've been able to cover uh I want to talk a little bit about why I started doing this because I mentioned right like I had this transformation with CSS myself um and that's true but I had wanted to create courses for quite a while in 2020 I hurt my nerve I was uh frustratingly I was in Physiotherapy and

an exercise that I got caused me to become injured which really feels unfair right um and so to make a very long story short uh there was a period of time where this was my desk set up oh what happened to my aha there it is um I had no keyboard and I had no mouse because my arms would burn when I would try to use them and so for quite a while and it's hard to see if I zoom in really close here I had an eye tracker on the front of my iMac that

worked as a mouse and a key or a microphone that acted like a keyboard and with these two things I was able to code and write blog posts and build my course platform um but it was definitely an eye- opening experience no pun intended there um what it made me realize and I apologize this is a little bit morbid um all of us have like and again image loading it'll show up eventually all of us have like a box floating above our head with a number in it and that's the number of keystrokes we have

left to make in our life so every time you press a key that number goes down by one and you know hopefully it's in the millions but it's a finite resource and I should be using that resource on things that are meaningful to me and so that was sort of the push that I needed let me try there we are yes this is what we're supposed to show up um yeah yeah this person's in trouble over here so you know uh you should treat this as the resource that it is and do things that are

meaningful to you uh in my case that was creating courses it can be anything though like hopefully this just serves as a good reminder that like we don't have an infinite amount of time or an infinite amount of typing ability um so yeah that's what I wanted to talk about thanks so much Josh thank you welcome to my [Laughter] office um feel free to throw in some questions here uh you you were explaining everything I think um that's what I try to do is preemptively answer questions yeah great um well I had one um do

you uh do you ever use uh internal and external the two values of display what do you mean by internal external Oh you mean like when you say like inline space block rather than right yeah or like inline Flex uh no I should that would be a good idea uh it doesn't usually occur to me too and I guess I almost never need to use an inline element that also creates a flex formatting context like that's just not like a use case that I run into that often but well and you can also use inline

Das Flex they both work I just think of it as as a way of explaining another way of explaining the same thing you were talking about right good idea you've got the the an inline block is inline on the outside the inside oh I'm stealing that great by the way anything I covered was intended to be stolen so please if you ever encounter somebody who could benefit from one of these analogies the point is that people will use them and I will hopefully with your consent do the same thing that explanation absolutely I'm sure I

stole it from somewhere so that's how we do right um would you say that it's useful or necessary for designers who have not yet yet touched code uh to have some understanding of the various CSS Concepts like Flex box like layout modes right positioning Etc this person's trying to get me in trouble because I feel like that's a difficult question to answer um should them no they shouldn't H or should they have to do that no right like it's a discreet job um it's beneficial for them to understand sort of the basics of CSS especially

because that'll help them understand what is or is not possible um but it's also sort of our job right like if we get a design that does something either impossible or very complex we're the ones that are supposed to know that and sort of help the designer understand in the same way that I think it's really beneficial for developers to learn a little bit about design um so I think there's benefits to crossover like certainly I've inadvertently had to learn quite a bit about design because I build things that need interfaces um but yeah I

think that it's it's beneficial either way but there shouldn't be an expectation that the person uh learn something that is outside of their sort of craft yeah I think that goes back also to something that was said yesterday um I don't remember who but uh about working on teams we work on teams right um we can work together actually it is like I know a lot of developers really try to avoid meetings like to try and have as much Focus time as possible but I always try to get myself invited to design meetings because I

found like if I'm in the room I can catch something really early in the process and be like oh actually that's really hard because of X technical constraint and it's before the designers have had a chance to like bond with that idea and become more sort of resilient to changing it um so before they've spent the next three weeks doing like High Fidelity mockups of this thing like we can just chime in and say like hey could we maybe do this other thing that is similar but a lot less work on our side um so

I always try to encourage people to be more involved in that like developers to be more involved in the design process for exactly that reason excellent yeah yeah great thank you again Josh [Applause] you