CSS styling has no perfect solutions but tradeoffs between the different approaches. Choose the one that fits best to the project

Usages:

1. Circular menus or item lists
2. Wavy layouts (DNA strands, wave)

Fancy animations

A Hz unit in CSS ?

Use them as much as possible.
Exceptions are physical placement (anchor, ...)

Another CSS reset

Drunk theme

After 25 years, the zoom property will get a spec.

Zoom affects the box model compared to tranform: scale()

To show scrollbars only when they’re needed (while keeping space for the scrollbar if it’s added later) use the scrollbar-gutter CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter

Note it's baseline 2024, so it's useful to hide it behind the @supports media query.

Piccalilli shares links!

A janky scroll animation on focus can be solved with overflow: clip

-apple-visual-effect: -apple-system-glass-material;

Whoever it was at Apple that decided to make this a CSS property is a genius because it makes it incredibly easy to provide different rules based on Liquid Glass support.

But it's not documented! So we can assume Apple use the property somewhere in a WebView in order to make the web app looks like native.

Similar to tailwind, but somehow better?

em unit compound when value are greater or lower than 1.
Except that, they are awesome :)

How CSS handles things already.

#todo what does CSS handle?

interpolate-size is a way to animate height: auto or width. It is only supported in Chrome for now.

A quick example:

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  details {
    transition: height 0.5s ease;
    height: 2.5rem;

    &[open] {
      height: auto;
      overflow: clip;
    }
  }
}

A more generic one:

:root {
  interpolate-size: allow-keywords;
}

details {
  --calculated-details-padding: var(--details-padding, 1em);

  transition: height var(--details-transition-speed, 150ms) linear;
  height: calc(1lh + (var(--calculated-details-padding) * 2));
  padding: var(--calculated-details-padding);
  background: var(--details-bg, white);
  color: var(--details-color, currentColor);
}

details[open] {
  height: auto;
  overflow: clip;
}

If the maximum font size is less than or equal to 2.5 times the minimum font size, then the text will always pass WCAG SC 1.4.4, at least on all modern browsers.

The author also cites https://utopia.fyi/type/calculator/

How to load font the most efficient way in 2025 for nearly every cases.

To keep the code maintainable, keep the css specificity as low as possible.

BEM falls short: class names can get really long; reusability might not be prioritized; and things must be named.

Another case is to use utility classes (atomic css) to avoid css specificity.

A new approach is with cascade layers.

Anyways, Cascade Layers (@layers) groups styles and declares what order the groups should be, regardless of the specificity scores of those rules.

Each has a sweet spot:

• BEM for clear design system that needs to be consistent; team with different philosophies; styles are less likely to leak between components.
• utility classes: build fast, like prototypes or MVPs and component based JS framework
• cascade layers: legacy codebases where you need full specificity control; integrate third party libraries or styles from other sources; working on a large, complex application or projects with long-term maintenance

How they can work together?
The cascade layers can be seen as an orchestrator: one layer for components (BEM); one layer for utilities (utility classes)

While the CSS specificity is low, everything else is kept simple.

Only up the specificity lightly, and note it; the minimum is another class, :where() or the HTML tag.

A single class ".override" can also be used; but "If you’re ever overriding an override, that’s a good place to stop and re-consider. "