OOCSS (2a part), profunditzant en els widgets
Avui mirarem les recomanacions a seguir alhora d’implementar els widgets, en el nostre sistema de CSS. Primer de tot, recordar que els widgets estan formats per dues parts, per una banda la pròpia del framework, i per l’altra la pròpia de cada un dels projectes. D’aquesta manera podem especialitzar tots els nostres projectes amb el seu tema personalitzat. Primer de tot cal fer una feina de detecció dels widgets, on cada un respón a una funcionalitat, creant així la nostra llibreria de widgets.
Abans de començar us deixo els enllaços que s’han usat de font:
Crear objectes reusables
Cal crear una llibreria de components reusables independent del projecte. Per altra banda, també cal crear-ne una per al nostre projecte. La idea principal recau en identificar els objectes per tal de saber-ne fer l’extensió i que sigui reusable, de manera que han de ser extensibles, reusables i aniuables.
Si per exemple pensem en un widget butó, a la part comú de tots els projectes podem definir les propietats que sabem que seran comunes, o definir-ne unes per defecte. A partir d’aquí aquesta classe cal anar-la extenent per tal de que tingui l’aspecte desitjat a cada projecte i alhora tinguem els diferents butons que es necessiten.
Simplificar la cascada
No usar #id en els estils. Si usem aquests identificadors, trencarem la reusabilitat d’aquest codi, ja que no hi poden haver diverses intàncies en una mateixa pàgina amb un mateix identificador. Així doncs, #id queda reservat per al seu ús des de JavaScript i en formularis. Així mateix queda prohibit en els estils.
També queden prohibits els estils ens línia. Tots sabem que els estils intrusius porten problemes, però a vegades els usem en moments determinats per què ens poden ser còmodes. Ja que estem reformulant el sistema d’estils, també queden prohibits, ja que a part de no ser reusables, ens poden portar a comportaments estranys, cosa a evitar totalment.
Usar classes i no elements
No hem de ment definir els propietats a div.la-meva-classe, sinó directament .la-meva-classe. Amb la primera opció fem que la propietat només sigui vàlida per a elements div, mentre que amb la segona la classe no depèn del seu element HTML. D’aquesta manera obtenim un codi més reusable i a més no ens incorporarà comportaments estranys.
Minimitza els selectors
A partir d’una classe podem definir elements HTMLS aniuats. Tot i això cal tenir en compte que a vegades ens podem estalviar selectors per a acabar tenint un mateix comportament. D’aquesta manera permetem una millor llegibilitat al codi. Amb aquest fet a més, millorem el rendiment dels nostres CSS.
Sense dependències del context
Els estils d’un objecte són independents del lloc que ocupin de la pàgina. D’aquesta manera no hem de definir .la-mevaclasse-1 .la-meva-classe-2 {…}, ja que si ho fem així estem supeditant el comportament de la 2 a que estigui dins d’un contenidor 1. D’aquesta manera a més, sabem que podem usar un widget a qualsevol part de la pàgina i que sempre tindrà el mateix comportament.
Evitar dependències innecessàries entre objectes
En aquest sentit, no hem d’agrupar diferents widgets mitjançant comes. Ja que estem lligant aquests objectes, on un canvi a un widget provocarà canvis als altres, cosa que tard o d’hora en sortirem perjudicats. Si ens trobem que constantment necessitem agrupar-los és que alguna cosa estem fent malament, particularment en el procés d’identificació.
Extenent els objectes
S’usa el concepte d’orientació a objectes típic en els CSS. D’aquesta manera l’objecte fill hereda les propietats del pare. Comentarem, amb exemples com es fa aquesta extensió més en detall en un tercer post, com ja vam prometre.
Objectes compostos
Algunes components de la pàgina estaran formades per diversos objectes. En aquest cas no usem extensió, sinó composició. En aquest moment ens trobem en un dels majors problemes dels CSS: manca de control en l’herència i la cascada. Les regles han de ser específiques, de manera que no impliqui res l’ordre en el qual s’apliquen. Sinó és així augmentem la composició. Cal ser conscient en que tots els noms de les classes formen part del namespace global de CSS, de manera que cal ser coherent en la definició de noms.
Tags: AppWeb, CSS, Programació, Web
Articles relacionats
Deck.js – Presentacions en HTML5