为每个CSS样式导入预先编写的规则，还是编写自己的规则（OOCSS）更好？

我读了一点关于他的理论。简而言之，基本思想是，与其每次设计网站都从头开始，不如使用一些已经编写好的基本构建块作为类，然后扩展它们以满足我们的需要。（“扩展”包括向HTML中添加更多特定/覆盖类，因为CSS类不可能相互继承规则……希望在CSS4中是这样：）OOCSS原则的灵感来自这样一个事实，即您不需要每次都重新编写代码来找到双数的正弦值。代码已经（由某人）编写，为什么不使用它呢

虽然我认为这是一个很好的抽象形式的建议，但我很难从一个适用的角度来理解它。[请阅读下面我的具体问题，但我一直在寻找阅读材料，因此请随时停下来，并通过指向OOCSS资源的更多链接进行评论，例如，对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 */

现在，第一个选择器用于任何标题，具有诸如

字体系列

、

字母间距

等公共属性。然后，每个“子类”（并非真正的子类）都有特定的差异，例如

颜色

、

字体样式

、

字体重量

，等等。事实上，这些“子类”在

之后写入。样式表中的heading

表示，如果其中任何一个包含相等的属性和不相等的值，则

.heading

中的属性将被“子类”中的属性覆盖。为了得到我的标题1，我会写：

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

但我们还没有完全达到这一点。]

我的问题是，如果

标题alpha

s通常是左对齐的，我将如何使该实例居中？Nicole会说我应该导入她的样式表并使用她的规则，这样我的代码就会变成：

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

联系我

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

    <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>

这是一款
尺寸12磅，斜体，Arial，左右对齐，1.2米线高，深色
蓝色段落

---

编写一个类

specialParagraph

，然后在CSS中分配所有这些规则不是更有意义吗？不需要乐高积木？在我的例子中，我不能将

.alpha{text align:center；}

添加到我的联系人页面顶部吗？或者甚至在线？

OOCSS方式的要点不是主要从其他库中借用CSS片段，而只是在做一些以前没有人做过的事情时才编写新规则。很明显，这是不可能的，而且可能不会比你自己的滚动更好

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

用编程术语来说，不是创建一个car类，然后创建一个truck类，共享各种常用方法，而是创建一个vehicle类，然后从中扩展car和truck

CSS中的等效方法是使用类作为混合。例如，如果您正在使用大量的

元素，并且您发现经常将边距和填充设置为0，将列表样式设置为无，您可能应该编写一个为您执行此操作的

.reset

类，并将该类应用于您的

，而不是为所有导航和列表项反复编写相同的三条规则

另一点是，您需要从视觉的角度来考虑您的抽象，例如，如果您发现站点的大部分部分都位于框中，周围有边框，您可以创建一个基本类，如：

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

然后，您将创建其他类来混合

边框框中未定义的样式，例如颜色和宽度等

把你的css类想象成一个工具箱，你将使用它来构建一个站点，而不是仅仅把它想象成一个属性列表，你可以把它添加到元素中，使它们看起来像某种方式

对于您这样的HTML：
class=“ital size medium sans ser txtJ med height深蓝”
，区分创建定义可视对象的CSS类和仅定义CSS属性的CSS类是很重要的。后者是荒谬的。如果你要这样做，你最好只使用内联样式。
OOCSS方法的要点不是主要从其他库中借用CSS片段，而只是在你做一些以前没有人做过的事情时才编写新规则。很明显，这是不可能的，而且可能不会比你自己的滚动更好

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

用编程术语来说，不是创建一个car类，然后创建一个truck类，共享各种常用方法，而是创建一个vehicle类，然后从中扩展car和truck

CSS中的等效方法是使用类作为混合。例如，如果您正在使用大量的
元素，并且您发现经常将边距和填充设置为0，将列表样式设置为无，您可能应该编写一个为您执行此操作的
.reset
类，并将该类应用于您的
，而不是为所有导航和列表项反复编写相同的三条规则

另一点是，你需要从视觉的角度来思考你的抽象
.bordered-box {
    border-style:solid;
    border-width:1px;
    margin-bottom:20px;
    padding:20px;
}