使用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中文网其他相关文章！