在现代前端开发中，CSS 是控制网页外观和布局的核心工具。随着项目的复杂化和样式规则的增加，CSS 层叠（cascade）变得更加重要。为了更好地管理和控制样式规则的应用，CSS 引入了层叠层（cascade layers）的概念。

CSS”叠叠乐“——WEB开发系列16_嵌套

层叠层

CSS 层叠层（cascade layers）是CSS层叠算法的新机制，允许开发者更精确地控制样式规则的优先级。这些层为不同来源的样式声明提供了分离的上下文，使我们能够在处理多个样式表时，更好地管理它们的优先权。

与传统的优先权规则（如特异性和来源顺序）不同，层叠层为样式规则的应用引入了新的维度。通过层叠层，开发者可以定义哪些层优先于其他层，从而更好地控制样式的层叠顺序。

示例：

/* Global styles */
@layer reset {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

/* Base styles */
@layer base {
    body {
        font-family: Arial, sans-serif;
    }
}

/* Component styles */
@layer components {
    .btn {
        padding: 10px 20px;
        background-color: blue;
        color: white;
        border-radius: 5px;
    }
}

/* Override styles */
@layer overrides {
    .btn {
        background-color: red; /* This will take precedence */
    }
}

在以上代码中，四个层分别定义了不同的样式规则。overrides 层中的 .btn 样式将优先于 components 层中的相同样式声明。

层叠层的优先权顺序

层叠层的优先权顺序是基于层的声明顺序来决定的。默认情况下，后声明的层具有更高的优先权。因此，在多个层中定义相同选择器时，最后一个层中的样式将生效。

示例：

@layer reset, base, components, overrides; /* 设置层的顺序 */

/* Component styles */
@layer components {
    .header {
        background-color: yellow;
    }
}

/* Override styles */
@layer overrides {
    .header {
        background-color: green; /* 由于 overrides 层在 components 层之后声明，此样式生效 */
    }
}

在以上代码中，虽然 .header 在两个层中都被定义了背景颜色，但由于 overrides 层具有更高的优先权，最终 .header 的背景颜色将是绿色。

层叠层可以解决的问题

在开发大型项目时，通常会遇到样式冲突和管理难题。例如，当多个开发者参与项目时，维护不同的样式表可能会导致不可预测的样式覆盖问题。层叠层能够帮助解决以下问题：

  1. 样式冲突：通过将不同来源的样式放置在不同的层中，可以有效减少样式冲突。
  2. 样式管理：层叠层使得样式优先权变得更加清晰和可控。
  3. 模块化：通过将样式分层，可以更轻松地管理不同模块的样式规则。

示例：

/* Reset styles */
@layer reset {
    * {
        margin: 0;
        padding: 0;
    }
}

/* Theme styles */
@layer theme {
    body {
        color: #333;
        background-color: #f4f4f4;
    }
}

/* Custom user styles */
@layer custom {
    body {
        background-color: #000;
        color: #fff; /* 覆盖 theme 层中的样式 */
    }
}

在这个例子中，custom 层中的样式可以覆盖 theme 层中的样式，从而实现用户定制样式的功能。

嵌套层叠层可以解决的问题

除了基本的层叠层，CSS 还支持嵌套层叠层。嵌套层叠层允许开发者将层叠层组织成层次结构，从而进一步细化样式规则的应用顺序。这在处理复杂的样式系统时尤其有用，例如在组件库中不同的主题或样式变体之间切换时。

示例：

@layer framework {
    @layer reset, components;

    @layer reset {
        * {
            margin: 0;
            padding: 0;
        }
    }

    @layer components {
        .btn {
            padding: 8px 16px;
            background-color: blue;
        }
    }
}

@layer theme {
    @layer light, dark;

    @layer light {
        body {
            background-color: #fff;
            color: #000;
        }
    }

    @layer dark {
        body {
            background-color: #000;
            color: #fff;
        }
    }
}

在这个示例中，我们创建了两个顶层 framework 和 theme，并在它们内部嵌套了子层。这样可以有效地管理样式的优先级，并根据需求灵活切换不同的样式设置。

创建层叠层

在CSS中创建层叠层非常简单。你可以使用 @layer 规则为样式声明指定一个具名层，也可以在样式规则中直接使用匿名层。

示例：

@layer reset {
    /* 这是一个具名层，名为 reset */
    h1 {
        font-size: 2rem;
    }
}

@layer {
    /* 这是一个匿名层 */
    p {
        font-size: 1rem;
    }
}

具名层和匿名层都可以用于控制样式的层叠顺序，但具名层更适合在大型项目中使用，因为它们可以更清晰地表达不同样式块的用途和优先级。

使用 @layer 声明具名层

@layer 规则用于声明具名层，并可以在不同的样式表或样式块中引用这些层。通过指定具名层，你可以更好地组织和管理样式规则。

示例：

@layer typography {
    body {
        font-family: 'Helvetica Neue', sans-serif;
    }
}

@layer layout {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

在这个示例中，我们创建了两个具名层 typography 和 layout，用于分别管理字体和布局相关的样式。

使用 @layer 块声明具名层和匿名层

@layer 块可以包含具名层和匿名层，允许你在一个块内定义多个层，从而更好地组织样式规则。

示例：

@layer {
    @layer reset, base, components;

    @layer reset {
        * {
            margin: 0;
            padding: 0;
        }
    }

    @layer base {
        body {
            font-family: Arial, sans-serif;
        }
    }

    @layer components {
        .btn {
            padding: 10px 20px;
            background-color: blue;
            color: white;
        }
    }
}

在这个示例中，用 @layer 块定义了三个具名层，并在每个层中定义了不同的样式规则。

使用 @import 将样式表导入具名层和匿名层

你还可以使用 @import 规则将外部样式表导入到特定的层中，从而实现样式的模块化和复用。

示例：

@layer utilities {
    @import url('utilities.css');
}

@layer overrides {
    @import url('overrides.css');
}

在这个示例中，将两个外部样式表分别导入到了 utilities 和 overrides 层，从而使得这些样式表中的规则按指定的层叠顺序应用。

嵌套层的概述与优点

嵌套层（nested layers）允许开发者在层中定义子层，从而进一步细化样式的层叠顺序。嵌套层的主要优点包括：

  1. 更好的组织结构：通过嵌套层，可以更清晰地表达不同样式块之间的关系。
  2. 灵活的样式管理：嵌套层可以根据需求调整优先级，从而实现更灵活的样式管理。

创建嵌套层叠层

创建嵌套层叠层非常简单，只需在一个层中定义其他层即可。

示例：

@layer theme {
    @layer light, dark;

    @layer light {
        body {
            background-color: #fff;
            color: #000;
        }
    }

    @layer dark {
        body {
            background-color: #000;
            color: #fff;
        }
    }
}

在这个示例中，在 theme 层中定义了 light 和 dark 子层，从而可以根据不同的主题切换样式。

常规层叠层与嵌套层叠层的优先权顺序

常规层叠层的优先权顺序是基于层的声明顺序来决定的，即后声明的层优先级更高。而嵌套层叠层的优先权顺序则是基于其父层的顺序，在父层内部，子层之间的顺序依然起决定作用。

示例：

@layer framework {
    @layer reset, components;

    @layer reset {
        * {
            margin: 0;
        }
    }

    @layer components {
        .btn {
            padding: 8px 16px;
            background-color: blue;
        }
    }
}

@layer theme {
    @layer light, dark;

    @layer light {
        body {
            background-color: #fff;
        }
    }

    @layer dark {
        body {
            background-color: #000;
        }
    }
}

在这个示例中，theme 层中的子层优先权顺序依赖于 theme 层的声明位置，而 framework 层中的子层优先级则取决于它们在 framework 层中的顺序。