CSS 图层教程：真正的 CSS 封装

就在拐角处，一个新功能正在兴起，它让前端开发人员兴奋不已。该功能就是 CSS 图层。有了层，我们终于能够完全封装我们的 CSS 以供导入。这意味着导入到您的项目中的模块、脚本或其他任何东西都可以拥有与您自己的完全分离的 CSS，从而解决了样式相互覆盖的古老问题。它还将让我们使用自定义导入语句添加到页面中的 CSS 更加灵活。

让我们深入了解 CSS 层，以及它们在您附近的浏览器中的工作方式。

支持

最新版本的 Firefox 和 Chrome 目前支持 CSS 层，Safari 很快将在其下一个版本中支持它。

完整，最新的支持可以在下面查看：

那么，图层如何工作？

在 CSS 文档中，图层胜过任何其他优先级。您可能熟悉 id # 选择器覆盖类的概念。选择器。图层比任何其他选择器都强 – 因此文档底部的图层将自动优先并覆盖其他地方的样式。

层遵循与 CSS 中其他块语句相同的原则语法。因此，我们可以像这样定义一个新层：

@layer myLayer {

}

大括号内的所有内容都与“myLayer”相关。可以想象，我们可以将任何类型的 CSS 放在一个层中。所以我可以做这样的事情：

@layer myLayer {
    p {
        color: red;
    }
    @media screen and (min-width: 100px) {
        a { color: blue; }
    }
}

当然，我们可以一个接一个地定义多个层，就像这样。您还可以定义没有名称的匿名层。请注意，在下一个示例中，#id.class将呈现蓝色，因为 myOtherLayer 排在最后，尽管 myLayer 具有更高的特异性。

@layer myLayer {
    div #id.class {
        color: red;
    }
}
@layer myOtherLayer {
    #id.class {
        color: blue;
    }
}
@layer oneMoreLayer {}
@layer {}

最后，可以将图层放入图层中，并且在同一图层中或在 CSS 文档的顶层具有相同名称的图层会自动合并：

css Copy
@layer myLayer {
    @layer mySubLayer {

    }
}

@layer myLayer {
    /* this is the same as the previous "myLayer" - CSS automatically considers them one layer */
}

预先设置图层顺序

除了能够用层完全封装代码的好处外，您还可以立即告诉浏览器层应该按什么顺序进入。与所有 CSS 一样，最后出现的最重要。因此，下面的示例对 中的样式给予了最高的重视myLayer，这意味着选定的 HTML 元素将呈现红色。

@layer oneMoreLayer, myOtherLayer, myLayer;
@layer myLayer {
    div #id.class {
        color: red;
    }
}
@layer myOtherLayer {
    #id.class {
        color: blue;
    }
}
@layer oneMoreLayer {}

这使得 CSS 最终变得更加强大 – 想象一下导入一个 CSS 库，它不再需要担心代码中的其他 CSS。它可以很容易地将自己作为一个单独的层插入到文档的末尾，它会自行起作用！

如何将 CSS 文件导入新图层

CSS 层还允许我们将整个样式表导入新层。下面的代码将 dropdown-styles.css 导入到午夜DropdownLayer 层中。

@import url('dropdown-styles.css') layer(midnightDropdownLayer);

结论 

CSS 层将改变我们编写代码的方式并为我们提供新功能，这将使项目的封装变得非常容易。最终，层等新功能将推动一套全新的后处理和前端网络技术，这将改变我们今天构建网站的方式。