如何使用 CSS 分层来优化页面结构

一、为什么要使用 CSS 分层

CSS 分层是将网页分成多个层次，每个层次控制特定的 UI 元素，使得页面更加模块化和易于维护。通过使用 CSS 分层，可以实现以下效果：

1、减少样式冲突和交叉影响：将样式规则按照层次分配，不同的层次控制不同的 UI 元素，可以避免样式规则的交叉影响和冲突。

2、增强代码可读性和可维护性：将样式规则按照层次分配，代码结构更加清晰和易于阅读，降低了维护难度。

3、提高渲染性能和用户体验：将页面分成多个层次，可以在页面内实现局部刷新，从而提升用户体验。

二、如何使用 CSS 分层

1、使用 BEM 命名规范

.block{}
.block__element{}
.block--modifier{}

BEM 命名规范是一种常用的 CSS 分层策略，它将 UI 组件分成块（block）、元素（element）、和修饰符（modifier）三个层次。

BEM 命名规范的优点：

（1）命名空间的修改和继承更加方便，比如添加或删除模块或元素，只需要在 HTML 中修改相应的 class 名称，就可以控制样式规则的变化。

（2）样式规则更加清晰明了，易于维护。

（3）在使用 CSS 预处理器时，BEM 命名规范更易于实践。

2、使用层叠样式表和继承

.parent{
    color: #000;
    background-color: #fff;
}
.child{
    color: inherit;
    background-color: #ccc;
}

在 CSS 中，可以使用层叠样式表和继承来实现 CSS 分层。例如，可以在父元素上定义一些基本样式属性，然后在子元素上使用属性继承来继承这些基本样式属性，从而实现 CSS 分层。

层叠样式表和继承的优点：

（1）代码复用程度更高，可以减少代码量。

（2）便于管理和维护。

3、使用 CSS Modules

.banner{
    composes: container from './styles.module.css';
    background-image: url('img/banner.png');
}

CSS Modules 是一种将 CSS 分层到模块级别的解决方案。每个模块都有自己的 CSS 命名空间，可以避免全局样式污染。

CSS Modules 的优点：

（1）避免全局污染，保证 CSS 的局部作用域。

（2）便于代码维护和重构。

三、CSS 分层示例代码

1、BEM 命名规范

  <div class="button button--primary">
    <span class="button__text">Click me!</span>
  </div>

2、层叠样式表和继承

  <div class="parent">
    <p class="child">这是一个示例</p>
  </div>

3、CSS Modules

  .container{
    max-width: 960px;
    margin: 0 auto;
  }
  .banner{
    composes: container from './styles.module.css';
    background-image: url('img/banner.png');
  }

四、总结

使用 CSS 分层能够帮助我们管理网页结构和样式，提高代码的可读性和可维护性，同时也可以提高网页的渲染性能和用户体验。