我读了一些关于Nicole Sullivan关于面向对象CSS的理论。简而言之，基本思想是，与其每次设计网站时从头开始，不如使用一些已经编写好的基本构建块作为类，然后扩展以满足我们的需求。（"扩展"包括在HTML中添加更具体/覆盖的类，因为CSS类不可能相互继承规则……希望在CSS4中这样做？：）OOCSS原理的灵感来自这样一个事实，即您不需要每次都重新编写Java Math类来查找双数的正弦值。代码已经（由某人）编写了，为什么不使用它呢？
虽然我认为这是一个抽象形式的好建议，但我很难从适用的角度来理解它[阅读下面的具体问题，但我一直在寻找阅读材料，所以请停下来，用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等。这些"子类"在样式表中的.heading之后被写为，这表明如果它们中的任何一个包含具有不相等值的相等属性，则CCD_ 7中的属性将被"子类"中的属性覆盖。为了得到我的标题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代码中添加一堆小类（"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>
写一个类specialParagraph（或paragraph-special或其他什么），然后在CSS中分配所有这些规则，这不是更有意义吗？不需要乐高？在我的情况下，我不能直接将.alpha {text-align: center;}添加到联系人页面的顶部吗？甚至可能是直列式
OOCSS方法的重点不是主要从其他库中借用CSS片段，而是只在做以前没有人做过的事情时编写新规则。显然，这是不可能的，而且可能不会比自己滚动更好。
OOCSS的目的是尽可能地抽象你的风格。它们越具体，可重用性就越低，当你这样做的时候，你最终会编写更多的CSS。
用编程的术语来说，不是先创建一个car类，然后创建一个truck类，共享各种通用方法，而是创建一个vehicle类，然后再扩展car和truck。
CSS中的等效方法是将类用作mixin。例如，如果您使用了大量的<ul>元素，并且发现您经常将margin和padding设置为0，将list style设置为none，那么您可能应该为自己编写一个.reset类，并将该类应用于<ul>，而不是为所有导航和列表项反复编写相同的三条规则。
另一点是，你需要从视觉的角度来思考你的抽象，例如，如果你发现你网站的大部分部分都生活在有边框的盒子里，你可以创建一个基本类，比如：
.bordered-box {
border-style:solid;
border-width:1px;
margin-bottom:20px;
padding:20px;
}
然后，您可以创建其他类来混合.bordered-box上未定义的样式，如颜色和宽度等。
把css类想象成一个工具箱，用来构建一个网站，而不是把它仅仅看作一个属性列表，你可以把它添加到元素中，使它们看起来有某种风格。
对于像class="ital size-medium sans-ser txtJ med-height dark-blue"这样的HTML，区分创建定义视觉对象的CSS类和简单定义CSS属性的CSS类是很重要的。后者是荒谬的。如果你打算这样做，你还可以使用内联样式。
我认为使用.txtC或.dark-blue这样的东西违背了CSS的精神，在CSS中，你应该能够通过使用不同的样式表来改变网站的整个外观。
例如，对于可能出现的问题，假设您决定希望所有的页眉都是红色而不是蓝色。与其简单地将CSS更新为.header { color: red }，还不如遍历HTML的每一页，并用red替换dark-blue类。或者，您可以将CSS更改为dark-blue { color: red; }，但是类名没有任何意义。
如果你为每一个可以想象的规则添加一个类，你就会回到内联样式和每个元素上的align="center"的黑暗时代。
如果你要使用"面向对象"的CSS，它的使用方式应该更像，你有一个影响所有页眉的.header类，但如果你想为主页页眉使用不同的字体颜色，你需要添加一个额外的.header.home { color: cyan; } CSS规则。您希望您的CSS ID和类名描述它所影响的内容，而不是它所提供的样式。
"面向对象的CSS"实际上只是一种如何充分利用CSS的设计模式，与Jonathan Snooks称之为SMACSS的方法基本相同。
无论您称之为OOCSS还是SMACSS，该方法的关键是创建通用的UI元素，如nav抽象。然后，可以通过向元素和/或容器元素添加额外的类，使用更具体的功能来增强这些UI元素。或者，也可以使用元素的ID或语义类添加自己的自定义CSS规则。
Cascade Framework是一个基于这种方法的全新CSS框架。它只需很小的占地面积就可以为您提供最佳性能、最佳灵活性和最佳模块化。