我刚刚发现了这个关于“面向对象的 CSS”概念的有趣演示。这似乎是一个好主意，但演示文稿很短，并没有提供很多示例。
我的问题：
- 这个概念是否相关？
- OOCSS 有什么好处？
- 你能给我提供“面向对象的CSS”的复杂例子吗？
也许，你认为这个概念无关紧要
- 为什么？
- 您改用什么样的工作流程（和规则）？
Gaetan Dubar
问问题
1202 次
10 回答
13
是否相关？
我认为是的，它基本上是为 CSS 作者使用的方法命名，与创建样式指南大致相同。有用吗？是的。继承别人的OOCSS工作容易吗？可能不是。
OOCSS 有什么好处？
抽象某个组件的样式属性总是有利于整个站点的样式一致性。假设您想更改组件的边框样式以获得全新的外观：您通常会更改几行有关边框样式主样式的行。
一个例子
我创建了一个 UI 开发人员样式指南（或样式词汇表），涉及我们 Web 应用程序中的所有“小部件”。每个小部件将根据其预期内容进行分类。每个小部件可以有任意数量的预定义框样式、背景样式。每个小部件还可以根据其所在的父元素来布置其内容。
这相当于代码：<div class="free bg_neutral form_search">被用于每个包装器/容器，每个类分别为：“框样式、背景样式、内容”。处理 HTML / 视图的开发人员可以轻松切换任何预定义样式并用更合适的样式替换它们。例如，替换bg_neutral为bg_gradient_fff_eee渐变背景。
我认为我们节省了无数行 CSS 代码，因为我们可以在几个核心“小部件”上使用可互换的属性，而不是定义每个“小部件”的每一个独特的化身。它还使跨浏览器修复变得更加容易，因为您可以独立处理“小部件”样式。（大多数浏览器错误与框尺寸和位置/布局有关）
在我看来，更多的 UI 人员在设计和实现其网站的前端时需要通过 StyleGuide / Style Vocab 练习。在网站上使用的视觉元素中创建一致性。一致的视觉效果通常会产生一致且高效的 CSS！
希望有帮助，nd
于 2009-03-10T15:59:14.203 回答
9
我看不出这个概念有什么好处，因为当前的 CSS 定义在某种程度上已经是面向对象的，具有级联、选择器、通配符等。
他们提到将容器与内容分离，对我来说这正是 CSS 已经做的事情。
于 2009-03-09T17:52:05.237 回答
5
与问题相关的演示文稿由雅虎的性能工程师Nicole Sullivan提供。
在 Yahoo Developer Network 站点上有一段原始演示的视频，在 github 上有一个OOCSS 项目的存储库。
于 2009-04-30T14:47:01.207 回答
1
幻灯片放映是一套很好的标准和指导方针。我一直在使用它们，在我的设计中寻找模式和重复，然后将它们分解为组件。
Navigation、Panel、Grid、Repeater、Card等。这些都是我为每个站点设计的通用组件。
我还有用于实用程序、页面和内容的单独 CSS 文件。Utilities 存储我的 clearfix 或 margin normalizer 之类的东西，Page 存储整个站点布局（页眉、页脚、主要），而 Content 是用于站点范围内的标题、段落、链接、列表等的通用规则集。
于 2009-03-09T18:04:40.777 回答
0
“面向对象”在这里有点用词不当，至少在严格意义上是这样。但他提出的设计指南是合理且有用的，并且在一定程度上缓解了 CSS 标准的“破碎”。
他指出的问题——脆弱的设计、大文件、低可维护性等等，是标准过于松散、过于面向特定并且基于不再有效的原始设计目标的结果。他正确地观察到成功的设计需要清醒的头脑和大量的纪律。
于 2009-03-09T19:06:15.603 回答
0
听起来像流行语跟我说话。正如 John Rasch 所说 - CSS 已经有点面向对象了。
于 2009-03-10T04:43:21.160 回答
0
我很想在CSS 中看到某种形式的继承。完蛋了哦？这可能是矫枉过正，但继承会成倍地缩小我的样式表的大小。
于 2009-03-10T16:04:23.833 回答
0
好处是能够扩展对象并保持代码干燥和可读。那些反对它的人通常要么 a) 讨厌这个名字，要么 b) 从未使用过它。让我们这样说......
例子
每个站点都有不同类型的导航。您可以在标题正文中的侧边栏中进行导航。也许，您的页面上甚至还有标签或面包屑？您甚至可能需要一个用于页面上的富文本编辑器的工具栏。这就是 .nav 抽象发挥作用的地方。
.nav
{
margin-bottom: 24px;
margin-left: 0;
padding-left: 0;
list-style: none;
}
.nav--right
{
float: right;
}
.nav--stack .nav__item
{
float: none;
}
.nav__item
{
float: left;
}
.nav__item--active .nav__link
{
font-weight: bold;
}
.nav__link
{
display: block;
color: inherit;
text-decoration: none;
}
.nav__link:hover
{
text-decoration: underline;
}
这与我的所有控件中出现的代码相同。现在，我所要做的就是为它创建一些皮肤。
侧边栏皮肤
.side .nav__item
{
border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
}
.side .nav__link
{
padding: 12px 0;
}
标签皮肤
.tabs
{
border-bottom: 1px solid #aaa;
}
.tabs .nav__item
{
margin-right: 8px;
}
.tabs .nav__item--active .nav__link
{
margin-top: -2px;
position: relative;
border-bottom: 1px solid #fff;
bottom: -1px;
color: #000;
}
主菜单皮肤
.menu .nav__item--active .nav__link
{
border-radius: 2px;
color: #fff;
background-color: #007bc3;
}
.menu .nav__link
{
padding: 12px 8px;
}
把它放在一起
我所做的只是为类属性编写对象的名称和皮肤的名称。这包括两者的属性。
<ul class="side nav nav--stack">
<li class="nav__item nav__item--active">
<a class="nav__link" href="#">
Item
</a>
</li>
<li class="nav__item nav__item--active">
<a class="nav__link" href="#">
Item
</a>
</li>
<li class="nav__item nav__item--active">
<a class="nav__link" href="#">
Item
</a>
</li>
不要惊慌看到 .nav_ item 和 .nav _link。大多数使用 li's 和 a's 但我想让它独立标记。
于 2013-04-20T07:10:28.377 回答
0
正如 Tor Haugen 所指出的，术语“面向对象的 CSS”是用词不当。
“面向对象的 CSS”实际上只是一种如何充分利用 CSS 的设计模式，与 Jonathan Snooks 所说的SMACSS基本相同。
无论您将其称为 OOCSS 还是 SMACSS，该方法的关键在于您创建通用 UI 元素，例如nav 抽象。然后可以通过向元素和/或容器元素添加额外的类来增强这些 UI 元素的特定功能。或者，作为替代方案，您可以使用元素的 ID 或语义类添加您自己的自定义 CSS 规则。
有关 OOCSS 的真实示例，请查看Cascade Framework、Scally和InuitCSS等框架。
进一步阅读：
于 2016-01-14T02:10:30.053 回答