Object-oriented CSS FAQ

Original text: http://wiki.github.com/stubbornella/oocss/faq (version 28 when translated)
Translation: ytzong

How to define "object" in OOCSS?

Objects are similar to classes in JAVA and maintain OO characteristics.

A CSS object consists of 4 parts:

1. May be the HTML of one or more DOM nodes
2. CSS style declaration starting from the class name of the wrapper node
3. Similar to background images and sprites components for display and
4. JavaScript behavior, listener, or method associated with an object

This can be confusing because each CSS class is not necessarily its own object, but can be a component of a wrapper class. for example:

<div class="mod">
<div class="inner">
<div class="hd">Block Head</div>
<div class="bd">Block Body</div>
<div class="ft">Block Foot</div>
</div>
</div>

The object is a module with class mod. Includes 4 component nodes (cannot be independent from the module, including 2 blocks, inner and body, and two optional blocks, head and foot)

How does OOCSS improve performance?

OOCSS has double the performance benefits:

1. Highly reusable CSS code, requiring very little CSS code, meaning:
   • Smaller files, resulting in faster transfers
   • As the proportion of CSS code called in site pages increases, it is expected to be reused or cached by the browser.
2. Fewer redraws and layout calculations as far as the browser is concerned
   • On a single page, the more CSS rules are reused, the less time the rendering engine spends on "computed values".
   • Manually added "extending" classes override fewer rules, which again means the engine does less to apply the rules

Do you want to use ID to style the content?

This is a performance "freebie" when you reuse an object on the same page (or on the same site at the same time as it caches well). Using ID to write styles can only be used once on the same page. @cgriego (twitter) Compared it with singletons and I think it's very accurate. There may be situations where you want to use IDs to define styles, such as very specific header menus. In this case, you can use IDs to sandbox special elements and ensure that the code here does not affect other parts of the site. Think twice before choosing ID over class. As your site grows, it's really hard to predict what other people will do with the HTML built from your CSS. If you have a choice, consider scalability as much as possible.

I'm thinking of removing the IDs from the template head, body, and foot. Some people may have multiple home areas. Multiple headers and footers for a site are harder to guess, but I bet there are designers out there who think so, so the IDs are likely to disappear (not so smooth, read the original article: Someone could have multiple main content areas. Multiple site headers and footers are more difficult to imagine, but I bet there is a designer who can dream up something like that, so the IDs are very likely to disappear.).

On the other hand, ID hooks are great for linking. Put them in HTML, but don't use them to write styles.

Source: 99css