css things

Make sure to check browser compatibility for any of these. If you need support for much older browsers, you’ll need to write fallbacks.

Use inline-size and block-size over width and height

They’re logical properties that adapt to the writing mode and text direction of your content. In LTR (left to right) languages like English, inline-size maps to width, and block size to height. But in a vertical writing mode (like traditional Japanese) or right-to-left (RTL) languages the mapping automatically adjusts to maintain the correct layout and you don’t need to rewrite your CSS when supporting different writing modes. There’s also logical versions of margin (margin-block, margin-block-start, margin-block-end, margin-inline, margin-inline-start, margin-inline-end) and padding (padding-block, padding-block-start, padding-block-end, padding-inline, padding-inline-start, padding-inline-end). Its not going to help most people, but using these properties represents a better way of thinking. Its good to be in a mindset where you’re considering languages other than English without necessarily doing so consciously.

Use clamp() to linearly scale font size

Tools like https://clamp.font-size.app can help with this.

Container queries

I’m not going to explain these in too much detail here, but you should use container queries instead of media queries in a lot of cases. Here’s a couple resources below that can help you out, after you’ve looked at the official MDN docs.

Container Queries Introduction by Josh W Comeau

CSS Container Queries by CSS Tricks

to-rem() SCSS function

If you’re using SCSS, you can use this function to convert from pixels to rem units.

@function to-rem($px) {
  @return math.div($px, 16) * 1rem;
}

.text {
  font-size: to-rem(16)
}

Modern CSS offers a rem() function that does this, but its still in the process of being widely adopted.

Inset

The inset property is pretty helpful as a shorthand that combines top, right, bottom, and left. I use it often when I need an ::after or ::before pseudo-element to take the whole space of its container (sometimes you need to decouple an element and its background for certain effects).

.div::after {
  content: "";
  position: absolute;
  inset: 0
}