Skip to main content

Minor release 0.21.0. CSS Layers

· 2 min read
Dima Vyshniakov
Dima Vyshniakov
Koval UI creator & maintainer

I released a new minor version of Koval UI: 0.21.0. It contains CSS architectural update. From now on Koval supports CSS layer at-rules. This is a massive quality-of-life improvement for developers who want absolute control over their styling without having to fight the cascade.

Say Goodbye to Specificity Wars and !important​

If you’ve ever tried to override a component library's defaults, you probably know the frustration of specificity wars. You often end up chaining selectors or reluctantly throwing !important on your rules just to change a simple background color.

With native CSS layers, this is now a thing of the past. Starting in v0.21.0, Koval UI organizes its internal styles into two dedicated layers:

  • koval-reset: Low-level resets to ensure cross-browser consistency.
  • koval-components: The default structural and visual styles for Koval components.

Unlayered styles automatically have a higher priority than layered styles, regardless of selector specificity.

This means if you want to override a Koval UI component, you can just write standard CSS exactly as you normally would. Because your custom styles are unlayered, the browser automatically lets them win over the library's layered defaults.

/* Koval UI's layered CSS (happening behind the scenes) */
@layer koval-components {
  .koval-button {
    background-color: blue;
  }
}

/* Your custom unlayered CSS (wins automatically) */
.koval-button {
  background-color: red; /* Look, ma, no !important! */
}

Advanced Orchestration with Custom Layers​

For teams building complex applications or integrating Koval UI into larger enterprise design systems, you can now seamlessly weave Koval into your own layer architecture.

By defining a layer order at the very top of your main stylesheet, you can dictate exactly how your application's styles interact with the library. The rule of thumb here is simple: the layer declared last wins.

By combining CSS layers for priority management and CSS variables for your design tokens, styling your interface is now cleaner, faster, and infinitely more predictable.

Upgrade to 0.21.0 today and enjoy a much smoother styling experience! You can read the full breakdown in our developer documentation.

See full release notes.