使用BEM和公用事業課程構建可擴展的CSS體系結構

管理廣泛的CSS項目提出了重大挑戰。隨著時間的流逝，已經出現了各種方法來簡化大型CSS開發。共同的目標仍然是：效率（最小化設計時間，最大化編碼時間）和一致性（確保整個團隊的統一編碼實踐）。

在一年半的時間裡，我為CodyFrame，一個組件庫和前端框架做出了貢獻，擁有220個組件。這些不是孤立的模塊；它們是可重複使用的模式，通常集成以構建複雜的佈局。該項目的複雜性需要可擴展的CSS體系結構，結合了全球CSS，BEM和公用事業類。

讓我們探索這種方法。

CSS Globals：快速概述

全局CSS文件室規則適用於所有組件（例如間距，排版，顏色）。代幣保持設計一致性並降低組件CSS尺寸。

這是一個排版的全球示例：

 /*版式|全球的 */
：根 {
  / *身體字體尺寸 */
  -Text-base-size：1em;

  / *類型比例 */
  -Text-Scale-Ratio：1.2;
  -text-xs：calc（（ - 文本基本size / var（ -  text-cale-cale-ratio）） / var（ -  text-cale-cale-ratio））;
  -Text-sm：calc（var（-text-xs） * var（ -  text-cale-ratio））;
  -text-md：calc（var（ -  text-sm） * var（ -  text-cale-cale-ratio） * var（ -  text-cale-cale-ratio））;
  -Text-lg：calc（var（-text-md） * var（ -  text-cale-cale-ratio））;
  -text-xl：calc（var（-text-lg） * var（ -  text-cale-ratio））;
  -text-xxl：calc（var（-text-xl） * var（ -  text-cale-ratio））;
}

@Media（最小寬度：64REM）{ / *適用於所有文本元素的響應決定 * /
  ：根 {
    -Text-base-size：1.25em;
    -Text-Scale-Ratio：1.25;
  }
}

h1，.text-xxl {font-size：var（ -  text-xxl，2.074em）; }
h2，.text-xl {font-size：var（ -  text-xl，1.728em）; }
h3，.text-lg {font-size：var（-text-lg，1.44em）; }
h4，.text-md {font-size：var（-text-md，1.2em）; }
.Text-base {font-size：var（ -  text-base-Size）; }
小，.text-sm {font-size：var（ -  text-sm，0.833em）; }
.text-xs {font-size：var（ -  text-xs，0.694em）; }

BEM：簡潔的解釋

BEM（塊，元素，修飾符）是可重複使用的組件的命名約定。

例子：

<a href="https://www.php.cn/link/5982407c8b651cdf1ecdc48937c14cbe"></a>
<nav>
  <ul>
    <li><a href="https://www.php.cn/link/5982407c8b651cdf1ecdc48937c14cbe">首頁</a></li>
    <li><a href="https://www.php.cn/link/5982407c8b651cdf1ecdc48937c14cbe">關於</a></li>
    <li><a href="https://www.php.cn/link/5982407c8b651cdf1ecdc48937c14cbe">接觸</a></li>
  </ul>
</nav>

• 塊：可重複使用的組件。
• 元素：一個塊的孩子（例如， .block__element ）。
• 修飾符：塊/元素的變體（例如， .block--modifier ， .block__element--modifier ）。

公用事業課程：必需品

實用程序類執行單個功能。例如：

 .padding-sm {填充：0.75em; }
.padding-md {填充：1.25em; }
.padding-lg {填充：2em; }

可以使用實用程序類構建整個組件：

<h1 id="標題">標題</h1>
<p>lorem ipsum ...</p>

公用事業類可以利用全球CSS變量：

 /*間距|全球的 */
：根 {
   - 空間單位：1EM;
  --Space-Xs：calc（0.5 * var（ - 空間單位））;
   - 空間-SM：calc（0.75 * var（-space-unit））;
   - 空間-MD：calc（1.25 * var（-space-unit））;
   - 空間-lg：calc（2 * var（ - 空間單位））;
   -  space-xl：calc（3.25 * var（ -  space-unit））;
}

/ *影響所有間距變量的響應性規則 */
@Media（最小寬度：64REM）{
  ：根 {
     - 空間單位：1.25em; / *此響應決定會影響所有利潤和填充 */
  }
}

/ *保證金和填充液類 - 應用間距變量 */
.margin-xs {margin：var（-space-xs）; }
.margin-sm {margin：var（-space-sm）; }
.margin-md {margin：var（-space-md）; }
.margin-lg {margin：var（-space-lg）; }
.margin-xl {margin：var（-space-xl）; }

.padding-xs {padding：var（-space-xs）; }
.padding-sm {padding：var（-space-sm）; }
.padding-md {padding：var（-space-md）; }
.padding-lg {padding：var（-space-lg）; }
.padding-xl {padding：var（-space-xl）; }

一個實際的例子：卡片庫

讓我們創建一個Card Gallery，首先僅使用BEM，然後結合全球和公用事業課程以突出其好處。最終結果將證明這種聯合方法的力量。

（本文的其餘部分繼續以詳細的示例進行比較，比較僅BEM，BEM Globals和BEM Globals公用事業類方法，並以文件結構建議結束。）

以上是使用BEM和公用事業課程構建可擴展的CSS體系結構的詳細內容。更多資訊請關注PHP中文網其他相關文章！