使用表达性 CSS 的内容和显示模式

John Polacek 考察了一些示例，其中可以使用小型实用程序 CSS 类以他称之为“表达性 CSS”的方法设计页面的布局

我们不必围绕内容模式创建 CSS，而是可以根据显示模式来制作 CSS。 表达性 CSS 是一种使用易于编写和理解的实用程序类编写轻量级、可扩展 CSS 的方法。

我不确定 John 是否是第一个提出“内容引用”这个词的人，但我喜欢它。这就是 CSS 的一部分描述内容，如下所示

<p class="event__location">Washington D.C.</p>

然后，我们将使用该单个钩子来样式化 CSS 中的所有内容

.event__location {
  border-top: 2px solid #eee;
  font-size: 23px;
  padding: 10px;
}

但 John 建议将这些样式分解成各个模块，最终可能看起来像这样，其中这些相同的类可以在代码库的每个部分的不同模块上使用

<p class="grid-12 l-grid-6 l-border-right m-border-bottom s-border-bottom marg-2-bottom">Washington D.C.</p>

正如 John 所提到的，这并不一定是一种编写 CSS 的新方法，但看到另一个开发人员如何随着时间和经验改变他们的编码风格，确实很有趣。

直接链接 →