CascadeKit - Zero-runtime CSS architecture

CascadeKit is a zero-runtime CSS architecture for component-based web apps such as React. It uses native CSS cascade layers (@layer), design tokens, co-located component styles, layout utility classes, a mixin system for responsive spacing and layout, and @scope-based per-instance overrides. The result is predictable cascade control with no specificity wars, no generated hash class names, and no runtime cost - a practical alternative to CSS-in-JS and utility-first frameworks.

Core ideas: six ordered cascade layers (base, utils, components, pages, component-overrides, user-overrides) where higher layers always win; styling via CSS classes (never inline styles) with CSS variables for dynamic values; co-located, tree-shakeable component CSS; values derived from design tokens; and a readable ComponentName--element naming convention.

  • Why CascadeKit: the problem with CSS-in-JS, utility-first, CSS Modules, and global CSS
  • How it works: setup, layer order, and bootstrapping
  • Component model: folder structure and the root-class pattern
  • Cascade layers explained
  • Mixin system: responsive spacing and layout without inline styles
  • Layout utility classes
  • Theming via data-theme attributes
  • Scoped styles with native @scope
  • Base UI integration for accessible primitives
  • AI tools: MCP server and prompt guide

Machine-readable docs: llms.txt and llms-full.txt.