CSS@layer 前端开发如何更好的避免样式冲突？级联层( 五 ) _CSS

文章插图
图片来源：w3.org
再看下图：包含layer概念的标准讨论已经到达CR阶段。

文章插图
图片来源：w3.org
W3C 鼓励从 CR阶段的标准开始可以作为日常使用。
五、总结最后，我们回到通过级联层如何解决“引入了一个第三方组件库导致样式覆盖“的问题上。
css代码如下：

/* 排序层 */@layer reset, lib;/* 通用样式 */@layer reset {#app .item {color: black;width: 100px;padding: 1em;}}/* 第三方库样式 *//*我们将第三方库的样式全部放到lib层，这里一般使用@import导入的方式，为了示例简单我们简化了操作*/@layer lib {#app .item {color: green;border: 5px solid green;font-size: 1.3em;width: 130px;}}/* 开发者样式 */.item {color: red;}

我们将第三方库的样式全部放到lib层，将需要重置的一些样式放到reset层，自己开发的样式不放入层中（当然你也可以放入到一层然后排序在最后）。由此我们实现了样式的分层解决了第三方组件库导致样式覆盖的问题，而且做到开发者样式简单不冗长。
效果如下：