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;  }}

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;}

Learn more about the potential of this CSS feature in this huge and inspiring Codepen collection of around 25 demos.

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;}

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%;}

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 {    …  }}

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 {    …  }}

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;}

Source: Web.dev