I use both OOCSS and normal CSS in most of my stylesheets. I don't think that it makes sense to use OOCSS for styling of typography, but for things like columns, boxes and buttons, I think that it does make sense and it can really help to (in my opinion) make the code simpler.
Using a rather contrived (and terrible - classes should describe function, not form) example:
As you can see, there's less CSS in the OO example, which I personally find easier to read. But I suppose at the end of the day, it's all down to personal preference and coding style :)
The OOCSS framework doesn't solve some of the problems defined by its own principles. OOCSS still contains redundancy and by moving the composition of components into the DOM, its coupling content back to the presentation.
OOCSS does make some good design decisions that should encourage users to maintain their CSS in a consistent fashion. This is a good thing. But the lack of documentation supplied with it means you'd have to reverse engineer it should it not quite fit your needs. This process wouldn't be reliable so you could end up back where you started... with messy CSS.
you shouldnt specify the tag in the oocss, its one of the pitfalls that she presented, so you can use the .button on any other tag and then extend that new tag..eg.
<button class="button">works on this</button>
<a class="button">works on this also</a>
<input type="submit" class="button" value="and this too"/>
specifying a.button in the css means you'll have to repeat it in the css again if u want to use it on another tag.. the main point is so that you dont repeat your styles and avoid redundancy.. you should download her examples on github
我正在使用它并且喜欢它。 我所在的大学使用丰富的 Intranet Web 应用程序，这些应用程序使用我创建的列表 {} 对象。 它水平和垂直排列链接，但具有“扩展类”（皮肤）将它们转换为标题栏、菜单、工具栏、选项卡、手风琴和按钮组。 List {} 对象不包含颜色或边框，仅包含一个clearfix 和一些修饰符。 实际外观存储在单独的类中。 我还使用预处理器，
如果你走这条路，我会提出 3 个建议。
使用 BEM（块/元素/修饰符）命名约定
思考基本的乐高积木并使用类来扩展它们。
使用 LESS 或 SASS 分离外观
I am using it and loving it. The college I am employed uses rich intranet web applications that use a list {} object that I created. It arranges links horizontally and vertically, but has "extending classes" (skins) to convert them into header bars, menus, tool bars, tabs, accordions, and button groups. The List {} object contains no colors or borders, just a clearfix and a few modifiers. The actually appearance is stored in separate classes. I also use preprocessors to
I would make 3 suggestions if you go down this route.
Use the B.E.M (block / element / modifier) naming conventions
Think basic lego blocks and use use classes to extend them.
发布评论
评论（4）
我在大多数样式表中同时使用 OOCSS 和普通 CSS。 我不认为使用 OOCSS 来设计排版样式是有意义的，但是对于列、框和按钮之类的东西，我认为它确实有意义，并且它确实可以帮助（在我看来）使代码更简单。
使用一个相当人为的（而且很糟糕 - 类应该描述功能，而不是形式）示例：
使用 OOCSS
使用普通 CSS
正如您所看到的，OO 示例中的 CSS 较少，我个人认为它更容易阅读。 但我想归根结底，这一切都取决于个人喜好和编码风格:)
I use both OOCSS and normal CSS in most of my stylesheets. I don't think that it makes sense to use OOCSS for styling of typography, but for things like columns, boxes and buttons, I think that it does make sense and it can really help to (in my opinion) make the code simpler.
Using a rather contrived (and terrible - classes should describe function, not form) example:
Using OOCSS
Using normal CSS
As you can see, there's less CSS in the OO example, which I personally find easier to read. But I suppose at the end of the day, it's all down to personal preference and coding style :)
OOCSS 框架并没有解决其自身原则所定义的一些问题。 OOCSS 仍然包含冗余，并且通过将组件的组合移动到 DOM 中，将其内容耦合回表示。
OOCSS 确实做出了一些好的设计决策，应该鼓励用户以一致的方式维护他们的 CSS。 这是一件好事。 但是，缺少随附的文档意味着如果它不太符合您的需求，您就必须对其进行逆向工程。 这个过程并不可靠，所以你最终可能会回到开始的地方......使用混乱的 CSS。
The OOCSS framework doesn't solve some of the problems defined by its own principles. OOCSS still contains redundancy and by moving the composition of components into the DOM, its coupling content back to the presentation.
OOCSS does make some good design decisions that should encourage users to maintain their CSS in a consistent fashion. This is a good thing. But the lack of documentation supplied with it means you'd have to reverse engineer it should it not quite fit your needs. This process wouldn't be reliable so you could end up back where you started... with messy CSS.
您不应该在 oocss 中指定标签，这是她提出的陷阱之一，因此您可以在任何其他标签上使用 .button，然后扩展该新标签......例如。
在 css 中指定 a.button 意味着如果您想在另一个标签上使用它，则必须在 css 中再次重复它。
要点是不要重复你的风格并避免冗余。
你应该在 github 上下载她的示例
you shouldnt specify the tag in the oocss, its one of the pitfalls that she presented, so you can use the .button on any other tag and then extend that new tag..eg.
specifying a.button in the css means you'll have to repeat it in the css again if u want to use it on another tag..
the main point is so that you dont repeat your styles and avoid redundancy..
you should download her examples on github
我正在使用它并且喜欢它。 我所在的大学使用丰富的 Intranet Web 应用程序，这些应用程序使用我创建的列表 {} 对象。 它水平和垂直排列链接，但具有“扩展类”（皮肤）将它们转换为标题栏、菜单、工具栏、选项卡、手风琴和按钮组。 List {} 对象不包含颜色或边框，仅包含一个clearfix 和一些修饰符。 实际外观存储在单独的类中。 我还使用预处理器，
如果你走这条路，我会提出 3 个建议。
使用 BEM（块/元素/修饰符）命名约定
思考基本的乐高积木并使用类来扩展它们。
使用 LESS 或 SASS 分离外观
I am using it and loving it. The college I am employed uses rich intranet web applications that use a list {} object that I created. It arranges links horizontally and vertically, but has "extending classes" (skins) to convert them into header bars, menus, tool bars, tabs, accordions, and button groups. The List {} object contains no colors or borders, just a clearfix and a few modifiers. The actually appearance is stored in separate classes. I also use preprocessors to
I would make 3 suggestions if you go down this route.
Use the B.E.M (block / element / modifier) naming conventions
Think basic lego blocks and use use classes to extend them.
Use LESS or SASS to separate out the appearance