A common mistake when creating overflowing containers with CSS is to use overflow: scroll or it's x/y variants. This will result in scrollbars always showing, even if the content doesn't overflow. This results in "phantom scrollbars" that are useless and only take up space and distract your users.

The transition and animation shorthand properties are great to reduce the verbosity when declaring several CSS properties at the same time. However, the combination of both enforced and unenforced order for certain properties make these properties a bit challenging.

When creating a set of equal size columns in CSS for an unknown number of items, you might first reach for flexbox to solve the problem. However, there are actually quite a lot of gotchas when using flexbox, but CSS grid makes this super simple.

How many times have you set the same value for top, bottom, left, and right to fill an absolutely positioned element to fit it's parent element? Thankfully there is an easier way!

I've you've ever implemented dark mode on a website, you probably have experienced that painful moment when you realize that your lovely dark themed site has an ugly white scrollbar. Thankfully, this is fixed very simply using color-scheme.

Tailwind is a fantastic CSS framework that makes it so simple to write CSS code. However, sometimes you need to break outside the boundaries of the set of default classes and do something a little custom.

Managing z-indexing can be a real pain at times. Dealing with many different elements, all of which have to specify different z-index values to ensure the correct stacking context. Thankfully, the CSS isolation property can help remove some of the hassle.