Layer • Natura11y

There is a newer version of Naturally.

Shallow focus photo of blue and green peacock

Layer

Introduction

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