css - 为每个 CSS 样式导入预先编写的规则或编写自己的规则 (OOCSS) 哪个更好？

Question

我正在阅读 Nicole Sullivan关于 Object-Oriented CSS 的理论.简而言之，基本思想是，与其每次设计网站样式时都从头开始，不如使用一些已经编写好的基本构建 block 作为类，然后扩展它们以满足我们的需要. (“扩展”包括向 HTML 添加更多特定/覆盖类，因为 CSS 类不可能相互继承规则......希望在 CSS4 中？:) OOCSS 原则的灵感来自于你不需要重写 Java Math class每次你需要找到双数的正弦时。代码已经(有人)写好了，为什么不用呢？

虽然我认为这是一个抽象形式的好建议，但我无法从适用的 Angular 理解它。 [阅读下面我的具体问题，但我一直在寻找阅读 Material ，所以请随时停下来，用更多指向 OOCSS 资源的链接发表评论，例如的好处和批评等]

这是我的样式表:

.heading {...} /* for all heading styles */
  .alpha   {...} /* specific changes for h1 */
  .beta    {...} /* specific changes for h2 */
  .gamma   {...} /* specific changes for h3 */
  .delta   {...} /* specific changes for h4 */
  .epsilon {...} /* specific changes for h5 */
  .zeta    {...} /* specific changes for h6 */

现在第一个选择器适用于任何标题，具有共同属性，例如 font-family、letter-spacing 等。然后是每个“子类”(实际上不是一个子类)具有特定的差异，例如 color、font-style、font-weight 等。这些“子类”被编写的事实after 样式表中的 .heading 表示如果它们中的任何一个包含具有不相等值的相等属性，则 .heading 中的属性将被覆盖在“子类”中。为了得到我的标题 1，我会写:

<h1 class="heading alpha">Contact Me</h1>

事实上，我可以使用 class="heading alpha" 为任何元素设置样式，例如 span，但这确实是一个 h1 元素。

[当然，我希望能够说

.heading {...}
  .alpha {
      extends: .heading;
      ...
  }
==============================
<h1 class="alpha">Contact</h1>

但我们还没有到那个地步。]

我的问题是，如果 heading alpha 通常是左对齐的，我该怎么做才能使这个实例居中？ Nicole 会说我应该导入她的样式表并使用她的 .txtC {text-align:center;}规则，所以我的代码将变成:

<h1 class="heading alpha txtC">Contact Me</h1>

但我认为基本上与CSS规则和类一一对应有点过分。如果我使用这种方法，那么我就不需要编写任何我自己的样式表，而只需在我的 HTML 代码中添加一堆小类(“乐高积木”)，使其变得庞大且不可读。想象一下:

    <p class="ital size-medium sans-ser txtJ med-height dark-blue">This is a 
    size 12pt, italic, Arial, left-right justified, 1.2em line height, dark 
    blue paragraph.</p>

写一个类 specialParagraph 不是更有意义吗 (or paragraph-special or whatever)然后在 CSS 中分配所有这些规则？不需要乐高积木？就我而言，我不能将 .alpha {text-align: center;} 添加到我的联系页面的顶部吗？或者甚至是在线？

Answer 1

OOCSS 方法的要点不是主要从其他库中借用 CSS 片段，而是仅在您做以前没有人做过的事情时才编写新规则。显然，这是不可能的，而且可能不会比自己动手更好。

OOCSS 的重点是尽可能地抽象您的样式。它们越具体，它们的可重用性就越差，当您这样做时，您最终会编写更多的 CSS。

用编程术语来说，不是先创建一个汽车类，然后再创建一个共享各种通用方法的卡车类，而是先创建一个车辆类，然后再从中扩展汽车和卡车。

CSS 中的等价物是使用类作为混入。例如，如果您使用了很多 <ul>元素，并且您发现您经常将边距和填充设置为 0 并将列表样式设置为无，您可能应该写一个 .reset为你做这些的类并将该类应用到你的<ul>而不是为所有导航和列表项一遍又一遍地编写相同的三个规则。

另一点是你需要从视觉的 Angular 考虑你的抽象，例如，如果你发现你网站的大部分部分都在带有边框的框中，你可以创建一个基本类，如:

.bordered-box {
    border-style:solid;
    border-width:1px;
    margin-bottom:20px;
    padding:20px;
}

然后您将创建其他类以混合未在 .bordered-box 上定义的样式例如颜色、宽度等。

将您的 css 类视为您将用于构建网站的工具箱，而不是仅仅将其视为您可以添加到元素以使其以某种方式看起来的属性列表。

关于 HTML 的观点如下:class="ital size-medium sans-ser txtJ med-height dark-blue" ，重要的是要区分创建定义可视对象的 CSS 类和只定义 CSS 属性的 CSS 类。后者是荒谬的。如果您打算这样做，您也可以只使用内联样式。