当我发现“布局原语”时，一场 9.0 级的地震震撼了我的前端世界每个布局.dev 。然后，当我从以下网站了解到流体尺寸和间距标记时，余震袭来：乌托邦.fyi 。它完全改变了我的写作方式超文本标记语言和CSS。

编程是我最开心的时候**组成原语。**如果这些原语处于正确的抽象级别，那么编程就像魔法一样。

地震发生后，我好奇地专注于创造完美的原始CSS要在我的 HTML 中编写的类。在此过程中，我注意到样式表中出现了三类类。

  1.  美容课程
  2.  布局类
  3.  间距等级
 笔记

在个人发展之前，我认为最好的做法是确定 CSS 的范围和隔离，避免实用程序类，并将所有内容命名为语义化的名称。它给我留下了过于耦合的代码，难以保持一致性，而且几个月后也难以理解。我在 Google 上查询了“BEM CSS 的替代方案”，这让我找到了 Dave Rupert 的文章，这让我找到了安迪·贝尔的立方体CSS 。我从未回头。

 美容课程

审美阶层唯一关心的是元素的外观。 CUBE 中的“(B)锁”。它们特定于公司或项目的品牌。它们将被命名为： 。卡片, 。在旁边, 。引用, 。笔记, .吐司, 。对话, 。菜单， 和。标签并包含类似属性颜色： ,背景： ,边界： ， 和盒子阴影： 。它们不应该包含类似的内容填充： ,展示： ， 或者利润： 。这些属于接下来的两种类型。

 布局类

布局类仅专注于布局元素。不是外观（上图），也不是元素之间的间距（下图）。它们通常放置在父元素上，并具有类似的名称。中心, 。簇, 。击退, 。覆盖, 。堆, 。流动, 。散文, .scroller ， 和.切换器。这CSS其中的属性应该是这样的：展示： ,对齐项目： ,证明内容： ,柔性包裹： ,网格模板列： ， 和溢出： 。

 间隔等级

间距类仅关注已使用上述类之一布局的元素之间的空间。如果您从未冲浪过乌托邦.fyi ，尽可能快地运行到该链接以生成流畅的间距和大小标记。生成这些自定义属性后，请使用 Tailwind 或社会保障体系基于这些间距标记生成间距实用程序类（或者如果没有工具，则复制并粘贴一些）。

间隔类的名称应类似于.gap-s , .gap-m , .gap-l , .gutter-s , .gutter-m , .gutter-l , .stack-s , .stack-m ,堆栈-l并且只包含类似的属性差距： ,利润： ,填充： ，以及它们的变体。

 请勿混合内容

这些CSS关注点最好不要混入同一类。这就是我过去出错的地方。我以前写过CSS像这样：

1

<div class="card"> <h2>Summary</h2> <p>Here you'll find the summary of the complicated data.</p> <a href="/details">View Details</a> </div>

1

.card { background: white; border: 1px solid var(--border); padding: 1rem; margin-inline: auto; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); & h2 { color: var(--brand); } & p { color: var(--text-less); } }

虽然超文本标记语言看起来很干净，发现什么CSS正在做的事情并不是立即显而易见的。它与标记高度耦合，我肯定会在两个文件之间切换以进行更改。

让我们使用上述三种类型的原语重写它。将美学、布局和间距问题拆分到各自的类中，并在 HTML 中撰写杰作。

1

<div class="card-1 stack box gap-xs"> <h2 class="color-brand">Summary</h2> <p class="color-text-less"> Here you'll find the summary of the complicated data. </p> <a href="/details">View Details</a> </div>

1

/* Asthetic */ .card-1 { background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border: 1px solid var(--border); } .color-brand { color: var(--brand); } .color-text-less { color: var(--text-less); } /* Layout */ .stack { display: flex; flex-direction: column; gap: var(--space-s); } /* Spacing */ .box { padding: var(--space-s); } .gap-xs { /* Generated by tools (or not) */ gap: var(--space-xs); }

 为什么这样更好？

其中每一个CSS像所有优秀的软件组件一样，类专注于一件事。一旦编写完成，我就可以在 HTML 中一遍又一遍地重复使用它们。如果我不喜欢该元素的“.card-1”外观，我可以通过更改“.card-2”中的一个字符来将其替换为“.card-2”超文本标记语言班级。一旦编写了核心原语，我就不需要离开我的超文本标记语言几乎同样多的风格。它使开发变得非常有趣。这就是 Tailwind 腾飞的原因。

 顺风现象

对于那些认为“这正是我在 Tailwind 课程中已经做的事情”的人来说。嗯，这并不完全相同。 Tailwind 确实允许我们留在 HTML 中，但在我看来，它的实用程序是太原始了。海顿·皮克林有一个很棒的文章关于这一点。

例如，这里我使用 Tailwind 将 div 居中。

1

<div class="mx-auto max-w-5"> <h1>Too Much Implementation Detail</h1> </div>

这是一个“中心”布局类。

1

<div class="center"> <h1>Much Easier To Read</h1> </div>

Tailwind 实现了与“.center”布局类相同的功能，但它显示了所有实现细节。 “center”类更具描述性、简洁性并且更容易记住。

对于那些像我一样认为“恶心，实用程序类正在毁掉前端 Web 开发”的人，请记住**组合原语是这项工作的乐趣所在。**如果你掌握了原语，编程就像背上的太阳。