4 ms·

I've always wanted to write my own CSS guide, because (in my experience) people are rarely focused on the right thing when they're writing CSS. Developers (esp

by exogen 5y ago

I've always wanted to write my own CSS guide, because (in my experience) people are rarely focused on the right thing when they're writing CSS. Developers (especially junior) think that if it looks right, that it is right, and they're done. But CSS is not just specifying how something looks, you are also very much specifying visual behavior, not just appearance. Content is dynamic, layouts change at different breakpoints, new elements come and go, another dev comes in and adds something later... you need to account for all of these things. For example, a developer rotated an element using CSS transform because the library we were using only supported a horizontal layout and not a vertical one. Sure, everything looked right in isolation, but now this element doesn't play nicely with others, because transform only affects the visual position, not the offset position of the element, so all its siblings still think it's horizontal, and they're getting all jumbled together. Or, using absolute position to, say, anchor a close button to the top right of an element. Sure, the way you did it happened to put it visually in the right spot, but it's not actually in the right spot according to the layout engine because its offset parent is not the element you're trying to anchor it to, so if other content gets put in there eventually, it will be in the wrong spot. Or, they'll use `line-height` to add space around some copy, without thinking about how that text will now look when wrapped. So in my opinion, any CSS tutorial worth a damn needs to hammer home that (1) just because it looks right doesn't mean it is right, (2) you can't really ever style an element in isolation, you need to think about how it interacts with its parent and sibling elements, and (3) elements actually have two different positions, one that you see, and a potentially different one for layout. Knowing those things is key to understanding whether you've designed things "correctly" vs. something that just happens to look right in the moment. (I've only skimmed this course so far, so I'm not sure whether it satisfies what I want. But I'm hopeful!)

hmsimha 5y ago
> Or, using absolute position to, say, anchor a close button to the top right of an element. Sure, the way you did it happened to put it visually in the right spot, but it's not actually in the right spot according to the layout engine because its offset parent is not the element you're trying to anchor it to, so if other content gets put in there eventually, it will be in the wrong spot. I'm absolutely guilty of this one and would love to know the correct way to do it if you have a resource handy. I generally feel like working with CSS (or ideally Tailwind now) is an uphill battle. In my defense I would also give the container a padding which should (in theory) prevent any of its statically positioned children from overlapping. But as a full-stack developer I often feel like this is the domain of people who spend their entire career focusing on design, and generally when I'm working in this realm its because we don't have one of those people.
- exogen 5y ago
  Sorry, my description of that one was a bit vague. The error I had in mind wasn't using `position: absolute` to anchor the button, but rather in not thinking about the offset parent. As an example, if your goal is for the button to appear over the right-side inner box ("hero content") here: +-------------------------------------------+ |+----------+ +---------------------------+| || nav | | hero || || | | (x) || || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | | || |+----------+ +---------------------------+| +-------------------------------------------+ ...then you should make that button either a direct child of that hero content (and give that container `position: relative` to make it the offset parent), or if that's not semantically acceptable, then add a new container around the hero content which will match its size/position and serve as the button's offset parent. Otherwise, if you just let the outer container be the offset parent because it happens to place the button in the same spot in the moment, then later when more content gets added to that container, you'll end up with this: +-------------------------------------------+ |+----------+ +---------------------------+| || nav | | header || || | +----------------------(x)--+| || | +---------------------------+| || | | hero || || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | | || |+----------+ +---------------------------+| +-------------------------------------------+ ...where the button is no longer over the correct box, because it was never anchored to it correctly in the first place (instead, it was anchored to that outermost container).
  - hmsimha 5y ago

by exogen 5y ago

hmsimha 5y ago

> Or, using absolute position to, say, anchor a close button to the top right of an element. Sure, the way you did it happened to put it visually in the right spot, but it's not actually in the right spot according to the layout engine because its offset parent is not the element you're trying to anchor it to, so if other content gets put in there eventually, it will be in the wrong spot. I'm absolutely guilty of this one and would love to know the correct way to do it if you have a resource handy. I generally feel like working with CSS (or ideally Tailwind now) is an uphill battle. In my defense I would also give the container a padding which should (in theory) prevent any of its statically positioned children from overlapping. But as a full-stack developer I often feel like this is the domain of people who spend their entire career focusing on design, and generally when I'm working in this realm its because we don't have one of those people.

exogen 5y ago
Sorry, my description of that one was a bit vague. The error I had in mind wasn't using `position: absolute` to anchor the button, but rather in not thinking about the offset parent. As an example, if your goal is for the button to appear over the right-side inner box ("hero content") here: +-------------------------------------------+ |+----------+ +---------------------------+| || nav | | hero || || | | (x) || || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | | || |+----------+ +---------------------------+| +-------------------------------------------+ ...then you should make that button either a direct child of that hero content (and give that container `position: relative` to make it the offset parent), or if that's not semantically acceptable, then add a new container around the hero content which will match its size/position and serve as the button's offset parent. Otherwise, if you just let the outer container be the offset parent because it happens to place the button in the same spot in the moment, then later when more content gets added to that container, you'll end up with this: +-------------------------------------------+ |+----------+ +---------------------------+| || nav | | header || || | +----------------------(x)--+| || | +---------------------------+| || | | hero || || | | || || | | || || | | || || | | || || | | || || | | || || | | || || | | || |+----------+ +---------------------------+| +-------------------------------------------+ ...where the button is no longer over the correct box, because it was never anchored to it correctly in the first place (instead, it was anchored to that outermost container).
- hmsimha 5y ago