如何使用 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 分層能夠幫助我們管理網頁結構和樣式，提高代碼的可讀性和可維護性，同時也可以提高網頁的渲染性能和用戶體驗。