8/12/2019 OOCSS - Resumen

1/2

Object Oriented CSSTexto tomado de: http://www.vanseodesign.com/css/object-oriented-css/

CSS is not an object oriented language and the programmer in you might be cringing at the

name. Still its not hard to understand why Nicole chose the object oriented moniker.

A css object is any repeating visual pattern, which can be abstracted into a snippet of html, css,

and sometimes javascript. These visual patterns become objects or modules through css

classes that can be reused throughout a project or projects.

The goal of Object Oriented CSSis to encourage code reuse for faster and more efficient

stylesheets that are easier to maintain. OOCSS is a also framework developed by Nicole

Sullivan based on 2 main principles

Separate structure and skin

Separate container andcontent

Separate Structure and Skin

Most every design is going to have repeatable visual elements.

You might for example have several buttons throughout a design that share size and shape as

well as a thin border and small border-radius to round the corners

Instead why not define the repeating visual patterns common to all as separate modules or skins

that can be reused?

These classes become objects we can add to our html and have our elements look consistent.

Classes can be mixed and matched to create greater variety and flexibility in the display of

elements.

Elements can use semantic html for their structure and different classes can then be added to

describe the presentation of that structure

Separate Container and ContentRarely should we use location dependent styles, because those styles become locked into

specific selectors. A visual object should look the same no matter where you place it.

Better is to not tie your css to location in the first place.

Documento creado por Francisco Quintero

http://www.google.com/url?q=http%3A%2F%2Fwww.vanseodesign.com%2Fweb-design%2Fdesign-elements%2F&sa=D&sntz=1&usg=AFQjCNF5bBrlRj-CANbfaZKqU6VYUmKDdAhttp://www.google.com/url?q=http%3A%2F%2Fwww.stubbornella.org%2Fcontent%2F2009%2F02%2F28%2Fobject-oriented-css-grids-on-github%2F&sa=D&sntz=1&usg=AFQjCNGeBUM_UcL1dEpjjKRHK_SPUFY4Jghttp://www.google.com/url?q=http%3A%2F%2Fwww.vanseodesign.com%2Fcss%2Fobject-oriented-css%2F&sa=D&sntz=1&usg=AFQjCNEwuO1SZDKKuQ29l0xfSxUeRXhsJAhttp://www.google.com/url?q=http%3A%2F%2Fbit.ly%2Fcescquintero&sa=D&sntz=1&usg=AFQjCNETBVJQ0jT36V31pserP2jsCrYYmghttp://www.google.com/url?q=http%3A%2F%2Fbit.ly%2Fcescquintero&sa=D&sntz=1&usg=AFQjCNETBVJQ0jT36V31pserP2jsCrYYmghttp://www.google.com/url?q=http%3A%2F%2Fwww.vanseodesign.com%2Fcss%2Fcss-selector-performance%2F&sa=D&sntz=1&usg=AFQjCNGoN4dUWPpmo8sZIoVoqcROLrhLIwhttp://www.google.com/url?q=http%3A%2F%2Fwww.vanseodesign.com%2Fcss%2Fcss-selector-performance%2F&sa=D&sntz=1&usg=AFQjCNGoN4dUWPpmo8sZIoVoqcROLrhLIwhttp://www.google.com/url?q=http%3A%2F%2Fwww.vanseodesign.com%2Fweb-design%2Fdesign-elements%2F&sa=D&sntz=1&usg=AFQjCNF5bBrlRj-CANbfaZKqU6VYUmKDdAhttp://www.google.com/url?q=http%3A%2F%2Fwww.vanseodesign.com%2Fweb-design%2Fdesign-elements%2F&sa=D&sntz=1&usg=AFQjCNF5bBrlRj-CANbfaZKqU6VYUmKDdAhttp://www.google.com/url?q=http%3A%2F%2Fwww.stubbornella.org%2Fcontent%2F2009%2F02%2F28%2Fobject-oriented-css-grids-on-github%2F&sa=D&sntz=1&usg=AFQjCNGeBUM_UcL1dEpjjKRHK_SPUFY4Jghttp://www.google.com/url?q=http%3A%2F%2Fwww.stubbornella.org%2Fcontent%2F2009%2F02%2F28%2Fobject-oriented-css-grids-on-github%2F&sa=D&sntz=1&usg=AFQjCNGeBUM_UcL1dEpjjKRHK_SPUFY4Jghttp://www.google.com/url?q=http%3A%2F%2Fwww.vanseodesign.com%2Fcss%2Fobject-oriented-css%2F&sa=D&sntz=1&usg=AFQjCNEwuO1SZDKKuQ29l0xfSxUeRXhsJA

8/12/2019 OOCSS - Resumen

2/2

What OOCSS asks us to dois spend more time upfront thinking about what will be common

across different elements and then abstract those commonalities out into reusable modules. We

dont however want to attach our modularized classes to specific elements. Instead of div.box

we want .box. The latter allows us to add the box styles to any container, while the former ties

them to divs alone

Getting Started

The hardest part of adopting OOCSS will probably be the change in thought process. Weve

been following the same habits and best practices for such a long time theyve become

ingrained in our workflow.

It might help to slowly change some of our css practices.

Abstract common styles into classes (objects) for reuse

Think classes for styling hooks

Think ids for behavioral hooks

Stay away from descendent selectors

Avoid location based selectors (.box instead of div.box)

If youre looking to use OOCSS without having to dive in all at once, following the above

guidelines where you can and making them habit might be your best approach.

Some of the benefits of Object Oriented CSS are as follows.

Greater reuse of styles modules of css can be added anywhere

Less duplication of code Repeatable css patterns are in a single location

Flexibility and varietyby combining classes Faster sites less duplication should result in smaller file sizes

Ease of maintenance Code is located in one block instead of many

Standards based Easier to improve one block of code instead of many

One last criticism of OOCSS is that is seems to eschew the use of ids entirely. Thats not the

case. The idea is to avoid ids for styling, but to still use them for javascript hooks. OOCSS isnt

saying classes are better than ids, but rather that each is more appropriate in a different place.

Classes for presentation styles and ids for behavioral hooks.

Para ms informacin: https://github.com/stubbornella/oocss/wiki

Documento creado por Francisco Quintero

http://www.google.com/url?q=http%3A%2F%2Fbit.ly%2Fcescquintero&sa=D&sntz=1&usg=AFQjCNETBVJQ0jT36V31pserP2jsCrYYmghttp://www.google.com/url?q=http%3A%2F%2Fbit.ly%2Fcescquintero&sa=D&sntz=1&usg=AFQjCNETBVJQ0jT36V31pserP2jsCrYYmghttps://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fstubbornella%2Foocss%2Fwiki&sa=D&sntz=1&usg=AFQjCNG4gcH5qC5onf0bS6-s0duKCebgHghttp://www.google.com/url?q=http%3A%2F%2Fwww.viget.com%2Finspire%2Fcss-squareoff%2F&sa=D&sntz=1&usg=AFQjCNG7pLG8KDQJWFy559KT0O5vtUFcyAhttp://www.google.com/url?q=http%3A%2F%2Fwww.viget.com%2Finspire%2Fcss-squareoff%2F&sa=D&sntz=1&usg=AFQjCNG7pLG8KDQJWFy559KT0O5vtUFcyAhttp://www.google.com/url?q=http%3A%2F%2Flukew.com%2Fff%2Fentry.asp%3F962&sa=D&sntz=1&usg=AFQjCNEyByRS8CTUzgV0WxrNubbjmORbHQ