OOCSS, Object-Oriented CSS



Fa uns dies vaig veure una presentació Power Point que tractava dels OOCSS. No havia tingut temps a mirar-la en detall fins avui, on realment l’he llegida atentament, i m’he mirat els exemple de la pàgina web oficial. Mitjançant aquesta tècnica, podem tenir ordenat el nostre codi CSS, i que aquest sigui plenament reusable. Tan és així, que està estructurat de tal manera que diferents projectes comparteixen un conjunt de normes CSS, és el què anomanem Framework, i una part concreta per a cada projecte, anomenat tema.

Reusables

Extensibles

Anidats


Un cop ja sabem que hi ha una part anomenada Framework i una com a tema, comentarem quina és l’estructura de cada un. El framework està format per 5 components: Reset, Base, Grid, Widgets, Helpers. El tema està format per Widgets i opcionalment per Pages. Així doncs ja podem intuir que en el Framework hi tindrem definides les propietats generals, comuns a tots els projectes, mentre que els aspectes concrets, els widgets, els podrem redefinir a cada tema.

Abans d’entrar en tema, us faig saber que queden pendents dos posts al respecte. Un explicant les bones praxis per a l’ús de OOCSS, i un altre amb alguns exemples per a fer-ho més clar, ja que un tros de codi, val més que mil paraules.

Reset + Base

Podem usar-ne d’existents. Aquestes components ens ajuden a eliminar inconsistències entre navegadors i crear una base comuna. Tot i que ens podríem fer el nostre es recomana usar-ne de ja fets i provats com: 960.gs, formalize.me, normalize.css, html5boilerplate, YUI…

Grid

Aquest és un dels aspectes més interessants del sistema. Es tracta de la definició dels layouts. En aquest sentit, es defineixen amb % la relació. De l’estil si és un 100% si són 2 50%, etc. D’aquesta manera podrem generar fàcilment els layouts. Seran reusables i cada un el podrem customitzar com volguem. Es recomana usar-ne de ja existents, tot i que ens podem crear el nostre, com per exemple: 960.gs, 978.gs, blueprint, YUI…

Widgets, objectes reusables

Els widgets poden ser independents del projecte o no. Es tracta de definir un conjunt de classes CSS relacionades, que responen a una funcionalitat determinada. En aquest sentit, està bé saber quina part és comuna i quina part forma part del tema, de manera que podrem tenir cada objecte personalitzat per projecte.

Pages, opcional per al tema

Les pages són interessants per a projectes molt concrets, en els qual es vol que cada pàgina o secció de l’aplicació o web, es vulgui mostrar amb estils totalment diferents. D’aquesta manera podríem diferenciar cada una de les pàgines usant la composició. De fet, es podrien fer amb widgets, però en els casos que sigui útil és millor fer-ho per tal de tenir

Helpers

Es tracta de classes petites, que es poden usar per tots els objectes. Els usos típics poden ser per fer elements hiddens, cantons rodos, ombres…

Enllaços a les fonts de l’article.

Enllaç a la presentació.

Enllaç a la pàgina oficial.

Tags: , , ,

Articles relacionats

Esborrar nodes del DOM en PHP

Deck.js – Presentacions en HTML5

Mozilla presenta WebAPI

OOCSS (2a part), profunditzant en els widgets

La setmana a Twitter