margin: auto is not only for horizontal centering.
This can easily cause confusing bugs.
width work somewhat differently in CSS.
height looks "down" the tree
width looks "up" the tree.
Block elements stack on top of each other. Inline elements are placed side by side.
It's frustrating when a CSS declaration is technically valid (not crossed out in the browser's DevTools) but has no effect for some reason. Firefox DevTools can often tell you why and also how to potentially fix those issues! (Update: Chrome 108+ can too.)
will-change property makes the browser render an element with the GPU,
which can reduce jankiness and also allows utilizing sub-pixel rendering.
But use the property sparingly.
flow-root value is clearer (no hacks!)
and has great browser support.
Polish your animations by animating based on actions or events, like mouse-enter and mouse-leave, instead of animating based on states, like default and hover state.
These two similar principles state that the behavior of code should be obvious on inspection and that code should be located where it's relevant.
Published on in CSS
Last updated on
This combination causes weird behavior and data loss
because of a bug in Chrome,
so it's best not to use