Layer

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.

Cascade Layers

Natura11y provides three foundational cascade layers. Shown in Figure 1 below, These three layers are declared in the _layer.scss SASS partial.


        /* Natura11y's CSS Layer Declaration */
        
        @layer base, component, utility;

Figure 1

The Base Layer

The base layer includes all generic selectors. The html, body, and 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.


        /* Example of the base layer */
        
        @layer base {

            html {
                ...
            }

            body {
                ...
            }

            p {
                ...
            }      
        
        };

Figure 2

The Component Layer

The component layer includes Natura11y components. The .card and .primary-nav selectors are just two examples. All components use the BEM naming convention.


        /* Example of the component layer */
        
        @layer component {

            .card {
                ...
            }      
        
        };

Figure 3

The Utility Layer

The utility layer includes Natura11y's utility classes (e.g. padding-3).


        /* Example of the component layer */
        
        @layer component {

            .padding-3 {
                ...
            }      
        
        };

Figure 4

Introduction

Cascade Layers

The Base Layer

The Component Layer

The Utility Layer