tl;dr: the issue isn’t the @import rule itself, but that files under 1kb often end up the same size or even bigger when gzipped, so you get no compression benefits.

The experience shows that atomic css files is not optimal.

If the files I was importing were larger, it might make sense. As tiny, modular files? Not so much!
The complete library concatenated and gzipped is less than a single HTTP request. It’s just over 25-percent of the transfer size of sending modular gzipped files instead.

There are many methods that break performance and accessibility such as dynamic css classes and div and span soup.

Topics adressed from the outline:

1. It’s not just bad HTML – it’s meaningless markup
2. Semantic rot wrecks performance
   1. Big DOMs are slow to render
   2. Complex trees cause layout thrashing
   3. Redundant CSS increases recalculation cost
   4. Autogenerated classes break caching and targeting
   5. Animations and the compositing catastrophe (with properties triggering the layout engine)
   6. Autogenerated classes break caching and targeting
3. Semantic tags can provide layout hints
4. (AI) Agents are the new users and they care about structure
5. Structure is resilience, isn't optional

Likewise, content-visibility: auto is one of the most underrated tools in the modern CSS arsenal. It lets the browser skip rendering elements
that aren’t visible on-screen – effectively “virtualising” them. That’s huge for long pages, feeds, or infinite scroll components.

and I didn't know about the contain CSS property.

contain: layout; tells the browser it doesn’t need to recalculate layout outside the element.
will-change: transform; hints that a compositing layer is needed.
isolation: isolate; and contain: paint; can help prevent visual spillover and force GPU layers.

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: fade 0.3s ease both;
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

To animate a thumbnail between two pages, the <img src=""> tag can be set to view-transition-name: product-image;

This is a microcosm of a much bigger theme: browsers are evolving to reward simplicity and resilience. They’re building for the kind of web we should have been embracing all along. And SPAs are increasingly the odd ones out.

SPAs were a clever solution to a temporary limitation. But that limitation no longer exists.

and I agree, SPAs are overkill for 95%-99% of the websites.

For reasons we'll get into later, Tailwind decided to burst on to the scene and become the default styling solution for all modern web development despite taking each and every one of these problems, exacerbating them, and applying them to places that didn't have them before

Good things for Tailwind:

This is a good thing, an unironic win for Tailwind. More than anything else, this is what a large codebase with multiple frontend devs needs: a rigid set of global constants that everyone is strongly incentivized to use.

Ok but why o_O

Still interesting, but I already have few use cases for container queries. Maybe because I am too dependent of design that uses screen sizes.

All I see so far is this will need more computation or battery drain for this.

The library is available at https://github.com/Specy/liquid-glass

A transition to open or close a modal

(via https://warriordudimanche.net/article2114/6825e02dcfcba)

Only transfer the useful part of a font. It subsets static Unicode-ranges, so only a part of the font will be downloaded.

WebTUI is a CSS library that brings the beauty of Terminal User Interfaces (TUIs) to the browser

Funny!

There is a new lh for "line-height" unit in css.

Browser support is 92% though

* + * as known as the howl selector: targets all elements that have the previous same selector.

This selector is great because it has no specificity.

An alternative is *:not(:first-child)

Use appearance: base; on legen style could unlock a lot of styling issues for <legend>

1. Too small target areas
2. Not using gap with Flexbox
3. Unforgiving target areas for dropdowns
4. No delay before closing drodowns
5. Not animating anchor links

text-wrap: pretty avoids short last lines, bad rag, poor hyphenation and typographic river.

pretty can be applied to anything on the page.
balance should be used for anything where you want all the lines to be the same length