6 CSS snippets every front-end developer should know in 2023

I believe every front-end developer should know how to use container queries, create a scroll snap experience, avoid position: absolute with grid, swiftly hammer out a circle, use cascade layers, and reach more with less via logical properties. Here's a quick overview of each of those expectations.

1. A container query

The top requested CSS feature for 10 years straight, is now stable across browsers and available for you to use for width queries in 2023.

.panel {
  container: layers-panel / inline-size;
}
 
.card {
  padding: 1rem;
}
 
@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

.panel {
  container: layers-panel / inline-size;
}
 
.card {
  padding: 1rem;
}
 
@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

2. Scroll snap

Well orchestrated scroll experiences set your experience apart from the rest, and scroll snap is the perfect way to match system scroll UX while providing meaningful stopping points.

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
 
.snap-target {
  scroll-snap-align: center;
}
 
.snap-force-stop {
  scroll-snap-stop: always;
}

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
 
.snap-target {
  scroll-snap-align: center;
}
 
.snap-force-stop {
  scroll-snap-stop: always;
}

3. Grid pile

Avoid position absolute with a single cell CSS grid. Once they're piled on top of each other, use justify and align properties to position them.

.pile {
  display: grid;
  place-content: center;
}
 
.pile > * {
  grid-area: 1/1;
}

.pile {
  display: grid;
  place-content: center;
}
 
.pile > * {
  grid-area: 1/1;
}

4. Quick circle

There are lots of ways to make circles in CSS, but this is definitely the most minimal.

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

5. Control variants with `@layer`

Cascade layers can help insert variants discovered or created later, into the right place in the cascade with the original set of variants.

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

Then, in some entirely different file, loaded at some other random time, append a new variant to the button layer as if it was there with the rest of them this whole time.

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

6. Memorize less and reach more with logical properties

Memorize this one new box model and never have to worry about changing left and right padding or margin for international writing modes and document directions again. Adjust your styles from physical properties to logical ones like padding-inline, margin-inline, inset-inline, and now the browser will do the adjusting work.

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}
 
article > p {
  text-align: start;
  margin-block: 2ch;
}
 
.something::before {
  inset-inline: auto 0;
}

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}
 
article > p {
  text-align: start;
  margin-block: 2ch;
}
 
.something::before {
  inset-inline: auto 0;
}

Hero image is from Luke Chesser and article by Adam Argyle from web.dev