Are they useful? I think not. It might be useful, but overall, it's better to read the specifications.

Following https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/

More thoughts about utility classes (only utilities and not a core use anymore), :has(),

What fascinated me most was watching the architecture evolve across releases.

Campfire: OKLCH colors, Custom properties for everything, character-based spacing, flat file oranization, View Transitions API
Writebook (2nd): COntainer queries for component-level responsiveness, @starting-style for entrance animations
Fizzy (3rd release): CSS Layers, color-mix() and complex :has() to replace JS.

37Signals share their product codes in Open Source. That's awesome because we can learn from it:

/* Fizzy's layer architecture */
@layer reset, base, components, modules, utilities;

@layer components {
  .btn { /* Always lower specificity than utilities */ }
}

@layer utilities {
  .hide { /* Always wins over components */ }
}

A CSS only spinner under 30 lines of CSS code. "Pure creativity".
A better <mark> that draws a hand-drawn circle around matched terms.
They also created dialog animations in CSS only.

Gotchas

Sharing columns with subgrid tends to be pretty intuitive, but things get a bit more quirky when sharing rows.

Unfortunately, with subgrid, it doesn't quite work like this. By default, our child grid will only span a single grid column/row. If we want it to occupy multiple rows, we need to reserve them explicitly.

To use a dynamic amount of rows, we can use a big number like 99, one that will definitely exceed the actual number of rows and the unused rows will stack up together at the bottom. We lose the ability to use the gap property though.

They are CSS "cascading" variables, and they can also be custom properties with @property.

* {
  letter-spacing: clamp(
    -0.05em,
    calc((1em - 1rem) / -10),
    0em
  );
}

Some creative ideas on small screens. The post lists examsle:

• Use horizontal scrolling
• Push elements off-canvas
• Build scrollable mini-spreadspread
• Orientation responsive layout

An example of semantic class names and a teaser on server of Kelp to have dynamic HTML through WebComponents.

Waayyy tooo coool checkboxes as switch

How CSS simplify scrollable images with

display: flex;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;

// On the images
scroll-snap-align: center;
 contain: size;
  place-self: stretch;
  object-fit: cover;

Tips and tricks for view transition

In my opinion, the best cases for implementing view transitions are as a way to draw attention to an element, convey movement, and help users remain in context.

Add it to all pages to apply a default cross fade transition.

@view-transition {
    navigation: auto;
}

Then mark similar content with the view-transition-name css property.

Custom view transitions can be made with ::view-transition-old, ::view-transition-new, ::view-transition-image-pair.
Full page transition can be done by marking :root.
These transitions should be set only when the media query prefers-reduced-motion is set to no-preference.

Use cases for inherit(). They can be good but I don't see a need currently

There are great animations of ease-in, ease-in-out, ease, spring and bounce. The latest two can not be animated with Bézier curves as other common animations.

To get spring and bounce effects, the linear() function can be used. The linear() function takes a set of numbers, with 0 representing the starting value and 1 representing the final value.

Easing wizard or the Linear() Easing Generator can help.

If JS fails to load, a keyframe remove the effect provided by JS in 2 seconds.

:root {
  --w: calc(100vw/1px); /* screen width  */
  --h: calc(100vh/1px); /* screen height */
  /*  The result is an integer without a unit! */
}

A version with better support:

:root {
  --w: calc(100vw/1px); /* screen width  */
  --h: calc(100vh/1px); /* screen height */
  /*  The result is an integer without a unit! */
}

::selection ans ::backdrop does not inherit from root. So :root does not guarantee the CSS variable. The html selector does not solve this.

There is currently no global context in CSS, but root is the best workaround currently.

This is going to catch a lot of people off-guard because I, like many others, expect CSS Custom properties defined on :root to just be available everywhere.

The following discussion is there https://github.com/w3c/csswg-drafts/issues/6641