Layer
Introduction
Natura11y uses the @layer CSS at-rule to organize framework styles by purpose.
Cascade Layers
Natura11y includes three cascade layers: base, component, and utility. These layers are declared first so every partial follows the same cascade order.
/* Natura11y's CSS Layer Declaration */
@layer base, component, utility;The Base Layer
The base layer contains element selectors and targeted resets. Figure 2 shows a shortened example from the framework’s base styles.
/* Base Layer Styles */
@layer base {
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: var(--html-scroll-behavior); }
body { min-width: var(--body-min-width); max-width: var(--body-max-width); }
}The Component Layer
The component layer contains class-based component styles. Figure 3 shows a shortened button example.
/* Component Layer Styles */
@layer component {
.button { display: inline-flex; justify-content: center; align-items: center;
border-radius: var(--button-border-radius); }
}The Utility Layer
The utility layer contains reusable classes that can be added to any element. Figure 4 shows shortened display and border-radius examples.
/* Utility Layer Styles */
@layer utility {
.display-flex { display: flex; }
.border-radius-2 { border-radius: var(--border-radius-2); }
}
