Natura11y's css makes use of the
@layer css at rule. A recent addition to CSS, cascade layers solve specificity issues, making customization and development more predictable.
Natura11y provides three foundational cascade layers. Shown in Figure 1 below, These three layers are declared in the
_layer.scss SASS partial.
The Base Layer
base layer includes all generic selectors. The
p tags, for example. CSS resets are present in the
base layer. Natura11y does not use a global CSS reset. Rather, where appropriate, includes targerted CSS resets associated with its SASS partial.
The Component Layer
component layer includes Natura11y components. The
.primary-nav selectors are just two examples. All components use the BEM naming convention.
The Utility Layer
utility layer includes Natura11y's utility classes (e.g.