什么是允许? (面向对象的CSS)

九游会客户端——2012年1月3日，星期二

Object Oriented CSS is a method of development as it pertains to the HTML 而且 CSS relationships designed to reduce redundancy in CSS, 主要是为了使代码更易于管理. The idea is (basically) to take reused styles 而且 assign them to individual classes, then the elements that use those styles take on that class, 为其余样式添加其他类.

First I'm going to address the issue with the name. 真正的, Object-Oriented has an understood meaning as it applies to object-oriented programming, 而CSS并不遵循这种理解. Much of the naming convention with this method was, 在我和许多其他程序员看来, 选择错误的. 当第一次学习这个概念, 这可能会让它变得相当混乱, as you might be expecting to see correlation with OOP, 当没有什么可以发现的时候. That being said, please judge the system on its merits, not its name.

One of the biggest drawbacks of this method is that, being style-driven (inasmuch as you're encouraged to separate style chunks into element classes), it ends up putting a lot of the presentation into the markup. 这通常被认为是不好的做法, as common consensus is to (as much as possible) separate content from presentation. 然而, some have expressed the theory that this common "best practice" is archaic 而且 doesn't solve any problems. 然而, it is increasingly common for the same content to be presented in multiple ways. 例如, a website that uses media queries to present its mobile version using the same markup, or an XML or JSON file that gets interpreted into different formats altogether, 例如HTML和PDF. Perhaps the most cited example is changing a site's theme. In the event that the theme 改变s more than a few details 而且 colors, 必须在标记中更改类. Although redesigning a site (with the same contents) may sometimes involve changing markup anyway, 理想情况下完全没有, 而且 it's still bound to be much less when your markup is written semantically.

Many of the goals of OOCSS are excellent, though not necessarily new. Manageable code is obviously a good thing, 而且 developers of all types should always strive for it. Planning out your project as thoroughly as possible, 这种方法鼓励的另一种实践是什么, 帮助很大, though obviously doesn't require any particular method. Reducing redundancy also contributes significantly to manageable code, but there are certainly ways of accomplishing this without removing the semantic quality of the markup. You can remove a lot of redundant style declarations by using multiple selectors per block, which will admittedly result in the same selector being repeated in several places, but it's not worse than OOCSS repeating the same classes over 而且 over in the markup, 而且 it's decidedly better than repeating whole chunks of styling directives, both from file size 而且 manageability st而且points. 如果你有很多, 许多, distinctly different elements that reuse portions of the same styles, 你的CSS选择器就会失控. 如果是这样的话, 这并不是因为糟糕的设计, applying a class for a specific style may actually be preferable to pure semantics. 然而, I believe this should be the exception, not the rule. Another method to reduce redundancy for manageability would be a preprocessor like LESS or SASS.

Some of the specifics of OOCSS make a lot of sense as well. Relying to heavily on ID selectors in your CSS can create reusability problems. This doesn't mean never use ID selectors, just use them sparingly. It also doesn't have anything to do with whether you use ID tags for other things, 像JavaScript钩子. OOCSS also recommends mostly avoiding use of the descendant selector. I agree with carefully examining your use of the descendant selector, 而且 一般ly having a default style for elements, 但也有一些案例 nav ul or 头h1 will be more practical (而且 semantic) than adding a class to the individual element that essentially describes the same thing as its location.

I've seen some detractors claim that you'll end up with classes so specific that you'll practically be writing the styles inline, 如 class="softblue-background black-text medium-text rounded-corners soft-shadow" 然而这并不是真的, 而且 OOCSS does not encourage you to break down your styles that far, 这只是一种夸张, 不完全是误会. There's no clear barrier on how far to drill down your classes, which makes sense because it depends on the needs of your project, but also may make the example above not too far off. Which also brings up the point that despite planning ahead, 如果项目增长, 你得加, 改变, 重组, 等. 任何项目都是如此, but when it involves replacing one class with two, 或者重新构造类, it means significant 改变s to the markup each time.

最终, the usefulness of any method of doing anything ultimately comes down to the individual project. You may indeed have a project where it makes sense to build things in a largely visually-dependent way, 为标记提供样式选择, 而且 the usefulness of OOCSS outweighs the usefulness of semantics. 然而, I believe these situations are extremely rare, 而且 for most projects, the long-established 一般 最佳实践就是最佳实践. 同意? 不同意? 加入下面的讨论，让我们知道.

九游会客户端
Matcha Design is a full-service creative agency specializing in 网页设计, 打印, 身份, 品牌, 界面设计, 视频制作, 静止摄影 而且 运动设计. Using our passion for excellence, multi-cultural background, 而且 获奖 实践, 我们一贯提供高品质的, 自定义, innovative solutions to meet the diverse marketing needs of our clients. 欲了解更多信息，请访问 www.MatchaDesign.com.