Under‑the‑Radar CSS Tricks You Should Try

Organize Cascade Chaos with @layer

CSS Layers let you scope the cascade—author styles, component libraries, and third‑party widgets no longer have to fight for specificity.

@layer reset, theme, components;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; }
}

@layer theme {
  :root { --brand: #0066ee; }
}

@layer components {
  .button { background: var(--brand); color: white; }
}

Codepen

Select Parents with :has()

The long‑awaited relational selector lets you style an element if it contains something—effectively giving us a parent selector.

.card:has(input[type="checkbox"]:checked) {
  border: 2px solid limegreen;
  box-shadow: 0 0 0 3px color-mix(in srgb, limegreen 40%, transparent);
}

Codepen

One‑Line Form Theming with accent-color

Bored of default checkboxes and progress bars? This single property tints a host of form controls without custom markup.

:root { accent-color: rebeccapurple; }

Works on <input type="checkbox|radio|range">, <progress>, and <meter>.

Codepen

Container Queries

Media queries look at the viewport; container queries look at any element’s own size. Combine container-type: inline-size with @container to build truly modular components.

.card {
  container-type: inline-size; /* establish a query container */
}

@container (width > 40rem) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

No more .wide modifier hacks when the sidebar collapses.

Codepen

Snap Scroll Any Axis

scroll-snap-type, scroll-snap-align, and friends give you native carousels and step‑through storytelling without JS.

.gallery {
  scroll-snap-type: x mandatory;
  display: flex;
  overflow-x: auto;
}
.slide {
  scroll-snap-align: center; /* or start / end */
  flex: 0 0 100%;
}

Add scroll-padding to fine‑tune where the snap lands. Be mindful of prefers‑reduced‑motion for accessibility.

Codepen

Calculated Color with color-mix()

Stop hard‑coding tints: blend any two colors directly in CSS.

.button {
  background: color-mix(in srgb, var(--brand) 75%, white);
}

Pair it with custom properties to build dark‑mode palettes (mix with black instead of white in @media (prefers-color-scheme: dark)).

Codepen