选择性排版

我最近听 Chris Eppstein 做了一个演讲 (幻灯片) 关于创建更好的样式表以及如何使用 SASS 来实现。 其中有一些令人惊讶的部分，其中之一就是关于“选择性排版”。 想法是，您不应为像 p、ul、ol、h1、h2 等排版元素设置全局样式，而是将这些样式作为类应用，例如 .text。

想法是，网站上有很多地方您需要从干净的 slate 开始，而不必担心全局样式的影响。 典型的例子是列表，当将它们用于导航等事物时，您可能不希望它们与文章中的边距/填充/列表样式相同。

此外，您可能需要在需要时应用不同的排版样式集。 因此，您不需要使用以下全局样式

p  {    }
ul {    }
ol {    }
h1 {    }
h2 {    }
/* etc */

您会将其范围缩放到类（在此使用 SCSS）

.text-article {
  p  {    }
  ul {    }
  ol {    }
  h1 {    }
  h2 {    }
  /* etc */
}

.text-module {
  p  {    }
  ul {    }
  ol {    }
  h1 {    }
  h2 {    }
  /* etc */
}

在网站的博客文章区域，您可以获取文章排版，而在侧边栏模块中，您可以获取该模块的排版。

<section class="main-content">
  <article class="text-article">
    ...
  </article>
</section>
<aside>
  <div class="module text-module">
     Texty module
  </div>
  <div class="module">
     Module in which typography isn't needed
  </div>
</aside>

Anthony Short 也有同样的感觉.

当然，这是否有效取决于网站。 网站的类型以及它所处的发展阶段。 我认为这在具有更“模块化”架构且没有大量遗留内容的网站上效果更好。 我有兴趣在一个新的项目中尝试它。