介绍了面向对象的CSS（OOCSS）

你听说过这句话“内容为王”？作为一名Web开发人员，因此有这往往与工作内容创作，它可能是你有。这是一个相当的过度使用，但真正吸引游客到现场发言。

然而，从一个Web开发人员的角度来看，有些人可能认为速度为王。越来越多，我开始赞成立场。近年来，许多经验丰富的前端工程师们提供了他们的建议，对我们如何能提高一些性能的用户体验最好的 做法。

不幸的是，CSS似乎得到在这方面有所忽视，而许多开发商（有充分的理由），主要集中在JavaScript性能和其他领域。

在这篇文章中，我会处理这往往被忽视的领域，向您介绍面向对象的CSS的概念和如何它可以帮助提高您的网页的性能和可维护性。

OOCSS原则

与任何基于对象的编码方法，OOCSS目的是鼓励代码重用，并最终更快，更高效的样式，很容易添加和维护。

OOCSS OOCSS GitHub的回购的Wiki页面上，是基于两个主要原则。

从皮肤结构的分离

几乎每一个元素风格的网页上有不同的视觉特征（即“皮”），在不同的上下文中重复。认为一个网站的品牌 – 颜色，微妙的渐变的用途，或可见的边界。另一方面，其他一般无形的特点（即“结构”），同样的重复。

当这些不同的功能抽象成类为基础的模块，他们成为可重复使用，可用于任何元素具有相同的基本结果。让我们来比较前后的一些代码，所以你可以看到我在说什么。

OOCSS原则，在提出申请前，你可能看起来像这样的CSS：

规划和深谋远虑的一点点，我们可以抽象所以常见的样式的CSS会结束，而不是像这样：上述三要素每个独特的风格，以及他们与非可重复使用的ID选择器定义样式应用。但他们也有一些共同的风格。常见的样式，可能存在对品牌的目的或设计的一致性。

容器和内容的分离现在所有的元素都使用类，常见的样式合并到一个可重复使用的“皮肤”，什么是不必要的重复。我们只需要申请的“皮肤”类的所有元素，结果将是相同，但作为第一个例子中会产生什么，更少的代码，为进一步重用的方法可行。

OOCSS GitHub的wiki页面上所描述的第二个原则是从他们的内容的容器分离。为了说明为什么这是重要的，下面的CSS：

那么我们就需要做这样的事情：这些样式将适用于任何第三级标题 #sidebar元素是孩子。但是，如果我们想申请完全相同的风格不同的字体大小和修改后的文本阴影的异常，出现在页脚的第三级标题？

或者我们可能更坏的东西：

宣布那些上面的例子中使用的后代选择的样式是不能重复使用，因为它们是依赖于一个特定的容器（在这种情况下，无论是侧边栏或页脚）。现在，我们不必要的重复样式，可能没有意识到（或根本不关心）。与OOCSS，我们鼓励更多的深谋远虑，什么是常见的不同元素，然后分割成模块或对象，可以在任何地方重用的这些共同的特点。

当我们使用OOCSS的阶级基础模块建设，我们将确保我们的风格是不依赖于任何包含元素。这意味着他们可以被重用文档中的任何地方，无论结构背景。

一个真实世界的例子

为了进一步说明如何OOCSS可以使用，我将使用类似的东西，我做我的网站最近重新设计。我网站上的内部头元素编码后，我意识到，头内部的基本构造样式可重用页面上的其他元素。

因此，这里是沿着什么，我当我开始造型我的头行的东西：

这里列出的样式的一些独特的 .header-inside元素。但其余的都可以组成一个模块，我可以重复使用。所以，我可以抽象到自己的可重复使用的类的构造样式。这里的结果：

一个固定的宽度属于 .globalwidth类的样式包括以下内容：

• 围绕使用保证金：自动
• 相对定位，以创建一个子元素的定位上下文
• 左边和右边的20像素的填充
• 溢出设置为“隐藏”的clearfixing

现在，我们免费使用任何需要这些相同的特性，通过简单地增加所需的元素，类的元素，这些风格 – 不写一个CSS的额外的行。

我的地盘，我重用这些结构上的主要内容元素和内在的页脚元素风格。根据设计，这些风格也适用于水平的导航元素之间可能出现的标题和内容，或任何其他元素，有一个固定的宽度，需要在页面上居中。

这些元素后，加入了“globalwidth”风格，标记看起来像这样：

但撇开有关如何这可能会影响标记的任何辩论，没有人可以质疑现在已经取得了这种抽象更容易跟踪和修改用于构造这三个要素的共同风格。有些人可能会觉得这种类型的风格抽象杂波HTML和违背表示标记分离的原则。

媒体对象

OOCSS运动的先驱之一，是妮可·沙利文。她创建一个可重用的模块，称为媒体对象，她解释说，可以节省几百行代码。

媒体对象是一个很好的例子，因为它可以包含一个任意大小的媒体元素，其权利内容OOCSS电源。虽然很多的风格，适用于它里面的内容 – 甚至媒体元素本身的大小 – 可以改变，媒体对象本身具有的共同的基本样式，有助于避免不必要的重复。

OOCSS的好处

我已经提到一些OOCSS好处。在这里，我会扩大这些。

更快的网站

OOCSS的性能优势，应该是相当清楚。如果你有反复在你的CSS样式少，那么这将导致更小的文件大小，从而更快地下载这些资源。

这是真正的标记将会更加混乱，从而创造更大的HTML文件。但在许多情况下，标记性能的损失金额将大大超过样式的性能增益金额。

要牢记的另一个概念是，OOCSS维基是指性能赠品的东西。这是指其实，每次你重用你的CSS的东西，你基本上是建立新的风格元素与零线的CSS代码。对于大型，高流量的项目，这些“赠品”可能是一个关键的性能增益。

维护样式

与OOCSS，而不是一个不断增长的特异性战争的样式，你有一个易于维护的模块设置自然级联起着重要的作用。

添加到现有的站点时，你会不会增加新的样式方面没有什么来之前，你的样式表的底部。相反，你会重复使用现有的样式和扩展样式，根据现有的规则集。

与这种类型的深谋远虑，这是非常小的CSS编码时，可以创建整个页。任何现有的CSS模块可以作为所有新页面的基础，任何新的CSS将是最小的。在某些情况下甚至可能是能够创造一个没有完全风格的一个新的页面的CSS编码一行。

这些可维护性的好处还延伸到你的样式表的稳健性。因为样式是模块化，OOCSS建成的页面将不太可能打破当一个新的开发者开始使用的样式。

值得注意的要点

OOCSS创造了很大的社会讨论，提出了一些争议。在这里，我会尽力打消了​​几个常见的误解。

你仍然可以使用IDS

如果您决定在OOCSS方式专门工作，那么你的风格将主要基于CSS类，你会不会使用ID选择的造型元素。

正因为如此，许多人冒领，OOCSS鼓励完全放弃使用的ID。但是，这是不正确的。

规则，以避免标识，更具体地说，在不使用选择的ID。所以这是完全可以接受的使用OOCSS原则（从而避免使用ID选择器的造型），同时在你的HTML中使用JavaScript的钩子和片段标识符的ID。

当然，你可能有一个情况下，你已经有一个ID，你知道是独特的页面元素应用到。所以，你可以节省几个字节，以避免该元素添加一个类，而不是风格，它使用一个ID选择。但即使在这种情况下，它是依靠类，以确保你没有运行到特异性的问题在未来更安全。

处理规模较小的项目

对于较小的站点和应用程序，你可以肯定的情况下，OOCSS会矫枉过正。所以不要为的OOCSS在所有情况下的宣传作为这篇文章 – 这将取决于项目而有所不同。

尽管如此，我认为这是一个好主意，至少，在所有的项目OOCSS开始思考。一旦你得到了它的窍门，我敢肯定，你会发现更容易得到更大的好处将更加明显和有关项目的工作。

实施一些准则

入门OOCSS工作可能需要一段时间。我还在工作，所以我不声称拥有所有的答案，并在这方面的经验。

但这里有一些事情你可能要开始做，以帮助你进入OOCSS思维模式：

• 避免后代选择器（即不使用 .sidebar h3）
• 避免造型挂钩的ID
• 避免附着在你的样式类的元素（即不做 div.header或 h1.title）
• 除了 ​​在一些罕见的情况下，避免使用 !important
• 使用CSS的林特检查你的CSS（知道，它有其疯狂的选项和方法）
• 使用CSS的网格

显然是有时间时，其中的一些规则将被打破，但总体而言，这些都是发展的良好的生活习惯，并会导致样式，体积更小，更易于维护。

按照尼科尔Sullivan的工作

如果你想继续学习有关OOCSS，在同行业中最重要的人跟上妮可·沙利文。

除了定期在她的博客上张贴OOCSS文章，妮可已经做了与随行幻灯片的演示。下面是一些你可能想看看：

• 面向对象的CSS（幻灯片）
• 高性能网站：妮可·沙利文（视频）
• 我们的最佳做法正在扼杀我们（幻灯片）
• CSS膨胀（幻灯片）

结论

许多人担心OOCSS思想，因为它似乎对所谓的“最佳做法”我们学到很多。但是，一旦使用OOCSS的长远利益是可以理解的，我敢肯定，许多开发商将成为信徒。

总的来说，我觉得，OOCSS有一个光明的未来在CSS开发，所有开发人员应该纳入到他们的项目 – 至少在一定程度上，以帮助建立网页，更快，更高效，更易于维护 – 这是一个概念。

原文：http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss