OOCSS - Resumen

download OOCSS - Resumen

of 2

Transcript of OOCSS - Resumen

  • 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