面向对象的CSS
我看了这个 有关面向对象 css 的演示文稿，但我想我要么没有正确理解或不理解使用 OO CSS 的好处：
示例 HTML：
<div class="border-1 bg-2 color-1 font-1">
</div>
示例 CSS：
/* borders */
.border-1 { border: 1px solid red; }
/* backgrounds: */
.bg-2 { background: yellow; }
/* other sections */
我看到能够快速更改多个元素的样式的优势，例如，能够切换配色方案将非常有用。
但实际上，您是在 HTML 内部定义样式/外观，或者至少是其中的一部分。当然，它比使用 style 属性更好，因为您仍然可以交换一组组的样式。
关键是，您正在 HTML 中定义样式组，但我了解到您应该在 HTML 中创建“逻辑”组（例如 class="nav-item" / class ="btn Submit-btn") 并且 CSS 完全应用该样式并从“风格”的角度定义哪些元素属于一起（例如 .nav-item, .submit-btn { background:红色的; }）。
也许我完全误解了这个概念。然而，我仍然不知道构建 CSS 的好方法。
I watched this presentation about object oriented css, but I think I either don't understand it correctly or don't understand the benefits of using OO CSS:
Example HTML:
<div class="border-1 bg-2 color-1 font-1">
</div>
Example CSS:
/* borders */
.border-1 { border: 1px solid red; }
/* backgrounds: */
.bg-2 { background: yellow; }
/* other sections */
I see an advantage in being able to change styles for multiple elements quickly, for instance, being able to switch the color scheme would be very useful.
But actually, you're defining the style/look inside the HTML, or at least a part of it. Of course, it's better than using the style attribute, because you still are able to exchange the styles for a set of groups.
The point is, you are defining the style-groups inside the HTML, but I learned that you should create "logical" groups inside the HTML (e.g. class="nav-item" / class="btn submit-btn") and the CSS completely applies the style and defines which elements belong together from the "stylistic" point of view (e.g. .nav-item, .submit-btn { background: red; }).
Maybe I totally misunderstood the concept. However, I still don't know a good way of constructing my CSS.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
CSS 不是面向对象的。我的建议是忘记你读过的关于“面向对象的 CSS”的内容，而专注于你试图解决的 CSS 问题。如果它们是为了让 CSS 更容易编写、阅读和维护，或者获得更多功能（如 CSS 变量），我认为 更少 或 Sass 会更好地满足您的需求。
像“面向对象的 CSS”所建议的那样使用 CSS 只会导致糟糕的、非语义的和无意义的 CSS，从长远来看，它并不比“普通”CSS 更容易维护。
id和class都应该有语义且有意义的名称 ，所以在我看来，使用一个允许你编写语义CSS（描述意图而不是表示）的框架要好得多。CSS isn't object oriented. My suggestion is to forget what you've read about "object oriented CSS" and instead focus on the problems with CSS you're trying to solve. If they are to make CSS easier to write, read and maintain, or to get more features (like CSS variables) I think Less or Sass will suit your need much better.
Using CSS like what's suggested with "object oriented CSS" just leads to terrible, non-semantic and meaningless CSS that in the long run isn't any easier to maintain than "ordinary" CSS. Both
idandclassshould have semantic and meaningful names, so using a framework that allows you to write semantic CSS (that describes intent instead of presentation) is in my humble opinion much better.这更像是一种实际方法的“名称删除”。
您所显示的代码通常被称为“ 企业CSS “没有任何借口。
更多结束，在元素上拥有多个课程实际上会损害性能。
我建议您坚持 Mozilla的指南在制作CSS时，它也适用于其他浏览器，也适用于其他浏览器。 。
并用IE6、7和8的黑客制作专用的.CSS文件。
This is more of a "name dropping", that an actual method.
The code that you have shown is often derogatory called "enterprise css", there is no excuse for it.
More over, having multiple classes on elements actually hurts performance.
I advice you to adhere to Mozilla's guidelines when making your CSS, which works same for other browsers, too.
And make dedicated .css file with hacks for IE6, 7 and 8.
这个想法是您在许多元素上重复使用相同的CSS课程。这两者都节省了编写CSS和维护CSS。因此，而不是定义
。定义填充物，size，背景，color，line-height，font - size，font-family和font-权重。还有一些针对不同按钮样式的非常小的类，喜欢更改color或font-size我经常使用的适当的OOCSS项目： https://github.com/stubbornella/oocss/wiki
是的在多个具有正确的类名称的元素上重复使用相同的CSS属性的容易。
The idea is that you reuse the same css classes on many elements. This both saves on writing css and on maintaining css. so instead of defining
.create-button.cancel-button.create-and-newbutton you would just have a.buttonthat defines padding,size,background,color,line-height,font-size,font-familyandfont-weight. And some really small classes for the different button styles like to change thecolororfont-sizea proper oocss project I often still use can be found here: https://github.com/stubbornella/oocss/wiki
but yes you should have a look at less, it combines the easy of reusing the same css properties on multiple elements with proper class names.
“面向对象的 CSS”实际上只是一种如何充分利用 CSS 的设计模式，基本上与 Jonathan Snooks 调用的方法 相同SMACSS。
无论您将其称为 OOCSS 还是 SMACSS，该方法的关键是创建通用 UI 元素，例如 导航抽象。然后，可以通过向元素和/或容器元素添加额外的类来增强这些 UI 元素的更具体功能。或者，作为替代方案，您可以使用元素的 ID 或语义类添加自己的自定义 CSS 规则。
进一步阅读：
"Object-oriented CSS" is really just a design pattern for how to get most out of your CSS and is basicly the same approach Jonathan Snooks calls SMACSS.
Whether you call it OOCSS or SMACSS, the key to the approach is that you create generic UI elements like the nav abstraction. These UI elements can then be enhanced with more specific features by adding extra classes to the element and/or a container element. Or, as an alternative, you can add your own custom CSS rules using the element's ID or semantic classes.
Further reading :