CSS @layer：深入理解与实战应用

CSS层（Layer）特性允许开发者将样式规则组织到不同的逻辑组中，以提高CSS源码的可维护性。

以下是一个简单的实例，展示如何使用CSS层特性：

/* 引入CSS层 */
@layer utilities, components, pages;
 
/* 在各层中定义样式规则 */
@layer utilities {
  .hidden {
    display: none;
  }
}
 
@layer components {
  .button {
    padding: 8px 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}
 
@layer pages {
  .homepage {
    background-color: #f0f0f0;
  }
}
 
/* 应用层 */
@layer utilities, components, pages, "custom styles";
 
/* 这里可以包含一些自定义样式 */
@layer "custom styles" {
  .logo {
    width: 300px;
  }
}

在这个例子中，我们定义了三个层级：utilities、components和pages。然后在每个层级中定义了一些样式规则。最后，通过@layer utilities, components, pages, "custom styles"声明这些层的应用顺序，其中"custom styles"是一个自定义层，包含一些额外的样式规则。

通过使用CSS层，开发者可以更清晰地划分样式规则的优先级和功能性，从而提高代码的可读性和可维护性。