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. "

Instead of specifying Block or Element specific Modifiers, you create generic semantic classes that apply those repeatable styles to any element that needs them.

When I started creating Kelp, I went down the BEM path. I quickly switched to semantic CSS, and the file size decreased dramatically as a result.

After programming for years, I find creating a class system is better than BEM.

TL;DR js solutions is often better for accessibility. At least information is conveyed.

Popover will be more useful than ever.

The tradeoff is currently the <details> tag with two limitations: the element does not announce a navigation menu is exposed; clicking outside or pressing Esc does nothing.

The author of Kelp use public and private cascade layer.

Public layers are: theme, extend, overrides and effects.

The unit lh can be helpful to adjust the distance of the underline from the text.

Centering text and containery

Load desktop styles only when needed and design for mobile first.

I can implement this strategy on my website to test it.

Different underlines for links: the regular underlined, the underline with an offset, the thin underline, the translucent underline or the dotted underline.

I thought of :focus-within and got it right. The author shares a JS snippet and a method with the new :has() selector.

How much do you know out of the basic CSS rules?

The stats are one thing.

The comments are another.

And Piccalili shares it https://piccalil.li/links/the-state-of-css-2025-results-are-in/

Modular CSS or a bundles? It follows Rethinking modular CSS and build-free design systems.

On first load, modular css files are worse.

Once the files are cached, subsequent renders take just 100ms to 200ms slower with modular files compared to one bundled file.

Given that the guiding ethos of Kelp is that the web is for everyone, it looks like I should probably be encouraging folks to use a bundled version as the main entry point.

How to handle CSS color with the new CSS color functions instead of SASS?

The best seems to be color().
There is also rgba(), hsla() and color-mix()

• color()

It’s evident that there is a growing array of new CSS capabilities that can handle many tasks we previously relied on Sass for.

Yes indeed. Also I agree: it's a per project decision to make.

How to build a mansory layout that works. 66 lines of JS.

CSS builds results in faster loading times.

Buildless CSS has also advantages.
But the @import nesting must be avoided.

The author focus is on https://kelpui.com/docs/tools/install/
Get what you want of the CSS library and it spits out the import

font-size-adjust: ex-height 0.5 instructs the browser to scale the font such that the letter "x" is exactly half of the box.

A use-case for font-size-adjust I find much more compelling is that you probably are going to use several fonts on a web-page. And you also might change fonts in the future. And they will have different intrinsic size because that’s how the things are. Part of the mess is avoidable by pinning the meaning of font size.

0.53 is the invariant ratio for Helvetica.

I totally agree.

1. When there is more than one text directionality
2. When the respective expression would be shorter than the non-logical equivalent.

The second point is healthy for every project.