OOCSS - Versión anotada - @janogarcia

5/8/2018 OOCSS - Versión anotada - @janogarcia - slidepdf.com

http://slidepdf.com/reader/full/oocss-version-anotada-janogarcia-559abf9b5f413 1/58

{ }Poniendo OOrden en CSS

@janogarcia · http://janogarcia.es

¿Qué es OOCSS? Una forma de optimizar la organización/arquitectura CSS. En esta presentación veremos qué problemastrata de resolver, qué principios sigue y cómo aplicarlos.



eOdiOCSS



OdiOCSSeDí tú qué odias de CSS.



eRepetir una y otra vez

los mismos estilos.

ODIO



Maximizar reusabilidad.OOCSS

Abstraer componentes/objetos reusables.FRAMEWORK LEVEL grids: float, width, display:inline fix..., forms framework.PROJECT LEVEL widgets.



RMaximizar reusabilidad.

OOCSS

{Relación estilos CSS VS elementos HTML

1:1 1:nMaximizar relación



eHeredar estilos de unamanera impredecible.

ODIO

Sobrescribir y neutralizar estilos que están siendo heredados de una manera impredecible desde otros elementos de lacascada.



6 selectores #idmodificador!importantestilos en línea

C S S E N V E N E N A D O

Acabas recurriendo al modificador !important y a los estilos en línea, lo que complica aún más las situación. Specifity wars!



Comportamientopredecible.

OOCSS1+1=2

La cascada, la especificidad y la herencia dejarán de ser tus enemigos, pudiendo identificar y controlar su efecto en todomomento.



eCrecimiento sin control,

pesadilla demantenimiento.

ODIO



OArquitectura modular.

OOCSS



OArquitectura modular.

OOCSS

{Se basa en la creación de objetos CSS

Reusables.

Extensibles.Anidables.

- Reusables: módulos reusables a nivel de sitio o incluso entre diferentes proyectos. (botones de FGR)- Extensibles: módulos derivados de un mismo módulo base y que representan diferentes variaciones del mismo. (widget-title y container de FGR)- Anidables: módulos compuestos por la agregación de diferentes módulos. (widgets del sidebar de FGR)



{ }con OOCSS

Retoma el

OOCSS se inspira en algunos principios de la OOP (abstracción, herencia, composición...), aunque la interpretación quehace de estos principios es un tanto libre (no muy ortodoxa para los puristas de la OOP), pero quizás no sea tanimportante la precisión de cómo se interpretan estos principios sino cómo nos ayudan a pensar en términos de módulos ya plantear una arquitectura modular adecuada en el contexto de CSS.



{ }Modular. Escalable.

Eficiente. Simple.Semántico. Mantenible.

OOCSSOOCSS busca el equilibrio

OOCSS trata de buscar una solución a todos estos problemas derivados de la falta de una arquitectura CSS y HTMLadecuada, considerando como arquitectura óptima aquella que cumpla con los siguientes objetivos de diseño:

- Modular: Un diseño modular que permita la creación de componente reusables y extensibles, evitando así el códigorepetitivo (DRY) y sus problemas asociados.- Escalable: Una arquitectura que sea aplicable a proyectos de cualquier tamaño.- Eficiente: Un código lo más ligero posible, tratando de minimizar el impacto sobre el rendimiento.- Simple: Un estilo claro y conciso (KISS). Un comportamiento predecible ("Only predictable components are reusable").- Semántico: Una estructura HTML lo más semántica posible, aunque en ocasiones se vea comprometida por limitacionesde CSS.- Mantenible: Una arquitectura transparente que facilite tanto el desarrollo iterativo e incremental, como las futurasrevisiones del código. Una serie de convenciones que faciliten el trabajo colaborativo.

OOCSS busca un equilibrio entre todos estos objetivos de diseño, estableciendo un compromiso cuando estos entren enconflicto.



{ }OOCSS=CSS

Sintaxis estándar de CSS

OOCSS es CSS, es decir, no difiere de la sintaxis estándar de CSS que ya conoces. Ni introduce elementos nuevos, ni secomporta de manera diferente, OOCSS no es más que una serie de patrones o principios sobre cómo optimizar laorganización de los estilos CSS y la estructura HTML (y desacoplándolos al mismo tiempo).



¿Alguien lo usa?

"Mailchimp reduced CSS by 40%, Facebook by 19% with OOCSS."https://twitter.com/#!/darylsws/statuses/70408894312230912



{ }y antipatrones OOCSS

Aprende los



FRAMEWORK

THEME

Normaliza las inconsistenciasentre navegadores.

Componentes reusables entreproyectos.

Modulariza, construye tu sitioa partir de componentes reusablesa nivel de proyecto.

FRAMEWORKReset: Normalize browser default styles.Scope: elements and pseduo-elements, no namespaces.Base: HTML elements (headings, paragraphs, quotes, anchors, forms, buttons, tables, lists...). Typography (fonts, fontrendering normalization, scale, baseline grid...).Scope: elements and pseudo-elements, no namespaces.Grid: Layout foundation.Scope: class names as global namespaces.Widgets: Reusable widgets across projects (menus, tabs, buttons, forms…).Scope: widget class name as global namespace.Helpers: Reusable helpers across projects. Clases auxiliares, no componentes. (.float_left, .float_right, .clear/.clearfix,self-clear, .phark, .hidden…).

Scope: helper class name as global namespace.

THEMEWidgets: Project specific widgets/modules (navigation, notifications, help, tips, search, login, gallery, player,…)Scope: widget class name as global namespace.Pages: Page specific widgets or style overridesScope: body class name as global page namespace.



{ Patrón recomendado.

OOCSS

Usa un Reset y un Base.

e



FRAMEWORK

THEME

Normalizan estilos entre navegadores,eliminando inconsistencias y estableciendo

una base común.Sin ellos no podríamos partir de una baseconocida, nuestros estilos no tendrían uncomportamiento predecible en los diferentesnavegadores.

Evitan el código repetitivo (DRY).

Usa una ya existente: 960.gs, formalize.me,normalize.css, html5boilerplate, YUI... O creala tuya propia.

El único lugar, salvo pequeñas excepciones, donde tiene sentido usar elementos/pseudo-elementos HTML en losselectores CSS, ya que estamos definiendo valores por defecto. Salvo contadas excepciones, en el resto de seccionesusaremos clases.

Nota: No uses el selector universal *. Más en el apartado sobre rendimiento.



FRAMEWORK

THEME

Normaliza estilos entre navegadores,eliminando inconsistencias y estableciendo

una base común.Sin ellos no podríamos partir de una baseconocida, nuestros estilos no tendrían uncomportamiento predecible en los diferentesnavegadores.

Evitan el código repetitivo (DRY).

Usa una ya existente 960.gs, formalize.me,normalize.css, html5boilerplate, YUI... O creala tuya propia.

Demo: Reset y Base de FGR. Comentar código, activar y desactivar.




OOCSS

Usa Grids.

e



FRAMEWORK

THEME

“Some years ago, I found CSS Framework like Blueprint

to be a waste of time. I didn't want to clutter my HTML

markup with non-semantic classes for handling the styling.

Now I still don't think cluttering the HTML with span-6 pull-2

is the best thing that happened to CSS, but I found it much

better than cluttering my CSS with endless overflow:hidden

and float:left; margin-right:10px declarations.”

http://www.pixelastic.com/blog/201:7-advices-to-start-using-oocss-as-a-coding-practice



FRAMEWORK

THEME

O repites una y otra vez las reglasnecesarias para crear layouts1 o abstraes esas

reglas y las aplicas como clases2

. Elige. 1 float:left, margin-right:10px, overflow:hidden...2 .grid-6, .grid-10, .push-1...

Evitan el código repetitivo (DRY). Abstraeninconsistencias entre navegadores.

Usa una ya existente: 960.gs, 978.gs, blueprint,YUI... O crea la tuya propia.

El W3C no especifica ninguna recomedación sobre el nombre de las clases, no considera que la semántica resida en losnombres de clase.

Nota: CSS3 contará con soporte nativo para Grids y Layouts, lo que seguramente hará innecesarios los frameworksactuales. https://twitter.com/#!/janogarcia/status/56044926848352256http://www.slideshare.net/chandleryu/everything-you-know-about-css-is-wrong



FRAMEWORK

THEME

O repites una y otra vez las reglasnecesarias para crear layouts1 o abstraes esas

reglas y las aplicas como clases2

. Elige. 1 float:left, margin-right:10px, overflow:hidden...2 .grid-6, .grid-10, .push-1...

Evitan el código repetitivo (DRY). Abstraeninconsistencias entre navegadores.

Usa una ya existente: 960.gs, 978.gs, blueprint,YUI... O crea la tuya propia.

Demo: Grids de FGR. Activar y desactivar.




OOCSS

Crea Objetos reusables.

e



FRAMEWORK

THEME

“Build HTML from the component library. New pages

should not generally require additional CSS.”

- Nicole Sullivan

Crea una librería de componentes reusables parael proyecto o incluso independientes del proyecto.

Los objetos son un conjunto de clases CSSrelacionadas que responden a una funcionalidaddeterminada. Estos objetos deben ser reusables,extensibles y anidables.

La clave está en identificar esos objetos y ensaber aprovechar la extensión y la composición.

Evitan el código repetitivo (DRY). Maximizan lareusabilidad.

Itera, refactoriza!

1 2 3 4 5 6 7 8

Cuando disponemos del diseño completo del sitio será más fácil reconocer los objetos y los casos en los necesitaremosextenderlos o anidarlos. Si sólo disponemos de parte del diseño no podremos anticipar de qué manera podrán serextendidos o compuestos, pero esto no es algo que nos deba detener, ya que como cualquier proyecto,independietemente de su estado actual, seguirá evolucionando, por lo que serán necesarias continuas refactorizaciones.

Al crear componentes te detendrás a pensar más en la arquitectura/API y menos en los detalles de la implementación(declaraciones de estilos). Slides 3 y 4: http://www.slideshare.net/stubbornella/what-is-object-oriented-css

“I think the single-line format bothers me less in #oocss because the very intent of the system is to highlight the cascade &specificity.”https://twitter.com/#!/sunpig/statuses/67249395002900480

“Do not abuse of presentational class names, don’t go that far so you completely abstract implementation.” (enterprise css joke http://enterprise-css.com/9)

“Semántica”:Cuanto más generalizas/abstraes el uso/la función de tus clases, menos semánticos parecerán sus nombres, ya que dejade haber una relación 1:1 entre los estilos de esas clases y el módulo/snippet HTML y su función/localización. Al abstraer/generalizar su uso ésta podra ser usada en diferentes módulos que pueden no estar relacionados, ni en función ni enlocalización, la única manera de poder identificarlas será asignándoles un nombre más presentacional/genérico. Unheading por ejemplo podría ser: .title-subsection. Si te preocupa la semántica, siempre puedes añadir una clase más“semántica” al elemento HTML: .cabecera, <h2 class="title-subsection cabecera"></h2>. Dicho sea de paso, el W3C nopone ninguna pega a usar nombres de clases "no semánticos" (la semántica está en el HTML no en las clases CSS). Otroejemplo son los grids, helpers y casi cualquier otro estilo perteneciente a la sección "Framework".



FRAMEWORK

THEME

“Build HTML from the component library. New pages

should not generally require additional CSS.”

- Nicole Sullivan

Crea una librería de componentes reusables parael proyecto o incluso independientes del proyecto.

Los objetos son un conjunto de clases CSSrelacionadas que responden a una funcionalidaddeterminada. Estos objetos deben ser reusables,extensibles y anidables.

La clave está en identificar esos objetos y ensaber aprovechar la extensión y la composición.

Evitan el código repetitivo (DRY). Maximizan lareusabilidad.

Itera, refactoriza!

1 2 3 4 5 6 7 8

Demo: Revisar organización de código sección Widgets de FGR.




OOCSS

Simplifica la cascada.

e



FRAMEWORK

THEME

Si la cascada no tiene un comportamientopredecible tus estilos tampoco lo tendrán, por

lo que nunca podrán ser realmente reusables.Di adiós a los selectores #id, a los estilos enlínea y a las declaraciones !important. De locontrario no conseguirás que tus estilos tenganun comportamiento predecible.

1 2 3 4 5 6 7 8



FRAMEWORK

THEME

Sólo puede haber uno en la página, impidiendola reusabilidad y limitando la modularización

Singleton, no puedes crear varias instancias,no puede haber objetos extendidos o compuestosen la misma página: #objeto y #objeto.extendido

Complican la especificidad y la cascada, tienen

demasiado peso. No podremos crear reglas delmismo peso cuando combinemos objetos basadosen .clase y en #id.

Úsalos únicamente en el HTML como hooks deJavaScript o para accesibilidad (formularios,anclas...).

1 2 3 4 5 6 7 8

2.1 No uses #id como selector

https://github.com/stubbornella/oocss/wiki/faqhttp://oli.jp/2011/ids/



FRAMEWORK

THEME

Sólo puede haber uno en la página, impidiendola reusabilidad y limitando la modularización

Singleton, no puedes crear varias instancias,no puede haber objetos extendidos o compuestosen la misma página: #objeto y #objeto.extendido

Complican la especificidad y la cascada, tienen

demasiado peso. No podremos crear reglas delmismo peso cuando combinemos objetos basadosen .clase y en #id.

Úsalos únicamente en el HTML como hooks deJavaScript o para accesibilidad (formularios,anclas...).

1 2 3 4 5 6 7 8

2.1 No uses #id como selector

Tests OOCSS en Espresso.



FRAMEWORK

THEME

Úsalos únicamente para sobreescribir estilos deuna hoja externa fuera de tu control (por ejemplo,un widget externo de comentarios).

Si estás usando estilos en línea o el modificador!important para sobreescribir estilos creadospor tí es un claro síntoma de que algo va mal, tehas cargado la cascada.

1 2 3 4 5 6 7 8

2.2 Ni estilos en línea ni !important

https://github.com/stubbornella/oocss/wiki/faqhttp://oli.jp/2011/ids/



FRAMEWORK

THEME

- Olvídate de tener que calcular la especificidad delos selectores.

- No dependas del orden del código fuente(cascada).

- Usa valores absolutos para propiedades que seheredan (evita tight coupling con el HTML).

Los estilos se deben heredar de una manerasimple y completamente predecible. De estamanera tus objetos se comportarán de una formapredecible, elegirás tus selectores con totalseguridad, de una forma sencilla y sin sorpresasdesagradables, ya que no habrá dependencias niinfluencias desconocidas (loose coupling).

1 2 3 4 5 6 7 8

2.3 ¡Olvida la cascada!

http://images.cheezburger.com/completestore/2010/10/26/3e0a8982-05e1-4952-af7b-e22650c4125c.jpg

ESPECIFICIDAD:Para conocer más sobre cómo calcular la especificidad de selectores:

#id = 100, .clase = 10, elemento = 1

Ejemplo, de menor a mayor especificidad:p = 1div p = 1+1 = 2.tree = 10div p.tree = 1+1+10 = 12

#baobab = 100body #content .alternative p = 1+100+10+1 = 112http://htmldog.com/guides/cssadvanced/specificity/http://css-tricks.com/specifics-on-css-specificity/http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

PROPIEDADES HEREDABLES:Para conocer más sobre cómo funciona la cascada y qué estilos se heredan:

http://blogs.globallogic.com/cascading-style-sheet-css-%E2%80%93-what-must-web-developer-knowhttp://reference.sitepoint.com/css/inheritancehttp://www.communitymx.com/content/article.cfm?page=1&cid=2795D

http://www.w3.org/TR/CSS21/propidx.html

El peor de los casos es cuando usamos unidades relativas (%, ems...) en los valores de propiedades heredables. Laanidación se convierte en un infierno, altamente dependiente del HTML (tight coupling). Inflexible, tedioso y costoso entiempo. Herramientas para calcular em’s: http://riddle.pl/emcalc/

, http://pxtoem.com/

El debate sobre una y otra opción continuará (font-size Relativo vs Absoluto, Incrementar tamaño de fuente vs Zoom depágina), personalmente he optado por la solución más pragmática, usar medidas absolutas.

“Before we get into the pedantic debate about pixel font sizes, let me just say — Let’s not go there. I’m aware of all thearguments, and have even toyed with making elastic layouts. For me, it’s about ROI. You can spend countless hours toyingwith font-size inheritance, like I did on the Geniant Blog, or you can set sizes in pixels and get on with your life.” NathanSmith - 960.gs, formalize.me



g ,

FRAMEWORK

THEME

- Olvídate de tener que calcular la especificidad delos selectores.

- No dependas del orden del código fuente(cascada).

- Usa valores absolutos para propiedades que seheredan (evita tight coupling con el HTML).

Los estilos se deben heredar de una manerasimple y completamente predecible. De estamanera tus objetos se comportarán de una formapredecible, elegirás tus selectores con totalseguridad, de una forma sencilla y sin sorpresasdesagradables, ya que no habrá dependencias niinfluencias desconocidas (loose coupling).

1 2 3 4 5 6 7 8

2.3 ¡Olvida la cascada!

Demo: sección Widgets de FGR. Ver anotaciones de más abajo.

Widgets por oden alfabético, no tratando de reproducir el orden en el que aparecen en el HTML, no tratando de controlar lacascada en el código fuente. Tampoco se usan tabulaciones para indicar anidación, ya que lo módulos pueden seranidados en cualquier orden en el código HTML, además de visualizarse mejor la jerarquía de estilos de un móduloescribiendo los estilos en una sola linea (peor para control de versiones y debugging/dif s). Las propiedades también estánen orden alfabético, para que sean mas fáciles de localizar, mas predecibles (al igual que lo hace Firebug), cualquier otraopción siempre responderá a preferencias personales que no serán igual de intuitivas para otras personas.

Dentro de la sección de WIDGETS/objetos no debes tratar de controlar la cascada por el orden del código fuente, si nomediante reglas explícitas de anidamiento, ya que no podrás controlar como serán anidados, en qué orden, estos objetosen la estructura HTML. Sólo puedes saber cómo será la jerarquía/estructura HTML de las secciones FRAMEWORK y PAGES.




OOCSS

Usa clases, no elementos.

e



FRAMEWORK

THEME

Usa clases para tus objetos CSS, evita usarelementos HTML en los selectores CSS.

Nombra los elementos asignándoles unaclase. Los estilos serán más reusables, yaque no dependerán del markup (.title en vezde h1, h2...).

No especifiques el elemento HTML al que esaplicado una clase CSS (sí: .miclase, no:div.miclase).

Especificar el elemento al que es aplicado unaclase es redundante, innecesario y crea másdependencia entre la estructura HTML y elestilo CSS, obligándonos a modificar el CSScada vez que modifiquemos la estructuraHTML (por ejemplo, al cambiar de ol a ul).

1 2 3 4 5 6 7 8

3.1

3.2

USA CLASES, NO ELEMENTOS:↑ Mayor rendimiento de los selectores, ya que evitamos el uso de selectores poco específicos/genéricos/elementos a laderecha (más en el apartado sobre rendimiento).↓ Como contrapartida, mayor peso del HTML.

Excepción: Elementos estructurales que no van a variar como los elementos de tabla (tr, th, td... generalmente es másconveniente usar elementos de tabla que asignar una clase a cada tr, td... además que si se trata de datos tabulares esmuy improbable que el marcado cambie en le futuro) o los enlaces/anclas (a). Y áreas de contenido editable por el usuario(WYSIWYG), ya que es muy complicado tener control o tener cierta garantía sobre las clases asiganadas a los elementosHTML creados.

Excepción: Si definimos una clase helper como por ejemplo ".flatten, .flat o .linearize" para cambiar a disposición

horizontal un conjunto de elementos de bloques, en el caso de una "ul" necesitaríamos aplicar unos estilos (ul list-style-type:none;overflow:hidden, li margin-left:0;float:left) y en el caso de una colección de "div" otros estilos completamentediferentes. En este caso podríamos definir ul.flat y div.flat.



FRAMEWORK

THEME

Usa clases para tus objetos CSS, evita usarelementos HTML en los selectores CSS.

Nombra los elementos asignándoles unaclase. Los estilos serán más reusables, yaque no dependerán del markup (.title en vezde h1, h2...).

No especifiques el elemento HTML al que esaplicado una clase CSS (sí: .miclase, no:div.miclase).

Especificar el elemento al que es aplicado unaclase es redundante, innecesario y crea másdependencia entre la estructura HTML y elestilo CSS, obligándonos a modificar el CSScada vez que modifiquemos la estructuraHTML (por ejemplo, al cambiar de ol a ul).

1 2 3 4 5 6 7 8

3.1

3.2

Demo: widgets .nav-1 y .regatas de FGR, el primero usa el elemento anchor y el segundo elementos de table.




OOCSS

Minimiza los selectores.

e



FRAMEWORK

THEME

Legibilidad: No definas selectoresinnecesariamente cualificados como .usuarios

table thead tr th a, con .usuarios thead a essuficiente.

Evita sobre detallar cada nivel de laestructura HTML. En la mayoría de ocasionesbasta con indicar el primer y último elemento.No definas elementos redundantes comotr th o ul li, bastaría con indicar th o li ya que

no pueden estar contenidos por un padrediferente.

Rendimiento: El selector descendiente” ” (espacio) es el que requiere un procesomás intensivo por parte del navegador,el hijo ”>” algo menos. Trata de limitar suuso, por ejemplo, un máximo de 3 selectoressimples.

1 2 3 4 5 6 7 8

4.1

4.2



FRAMEWORK

THEME

Legibilidad: No definas selectoresinnecesariamente cualificados como .usuarios

table thead tr th a, con .usuarios thead a essuficiente.

Evita sobre detallar cada nivel de laestructura HTML. En la mayoría de ocasionesbasta con indicar el primer y último elemento.No definas elementos redundantes comotr th o ul li, bastaría con indicar th o li ya que

no pueden estar contenidos por un padrediferente.

Rendimiento: El selector descendiente” ” (espacio) es el que requiere un procesomás intensivo por parte del navegador,el hijo ”>” algo menos. Trata de limitar suuso, por ejemplo, un máximo de 3 selectoressimples.

1 2 3 4 5 6 7 8

4.1

4.2

Demo: vista outline de sección Widgets de FGR en Espresso, raramente se superan los 3 selectores simples.




OOCSS

No dependas del contexto.

e



FRAMEWORK

THEME

“Separate container and content: Break the dependency

between the container module and the content objects it

contains.”- Nicole Sullivan

Los estilos de los objetos deben serindependientes del lugar que ocupen en la página:footer, sidebar, content... Si dependen de laestructura de la página no serán reusables fuerade ese contexto.

No: .sidebar .last-comments {}Sí: .last-comments {}.

Ésto permitirá mostrar el widget en cualquierpágina y en cualquier parte de la misma. Inclusoen otro proyecto, conociendo en todo momentosus dependencias de estilo y cómo le afectará elnuevo contexto (herencia y namespaces).

1 2 3 4 5 6 7 8

“A class must know what it contains, but it should never know who contains it. This is huge. This specifically relates toseparating structure and skin. Classes should be portable.”http://emphaticsolutions.com/2011/03/19/object-oriented-css-for-programmers.html

“The benefit of the OOCSS/namespace/location independent method is that if someone moves a block of code from thesidebar to the main content section, the appearance will remain the same. It's about having expectable behaviour.“

“Only predictable components are reusable.”http://groups.google.com/group/object-oriented-css/browse_thread/thread/cbfcfc4bea9a8777/15d914846ad0068a#15d914846ad0068a

Excepción: Style overrides. Si necesitas modificar el aspecto de un widget en un determinado contexto (página o área)

puedes anteponer un selector que identifique ese contexto y sobreescribir los estilos para el mismo.

.pagina-inicio .nombre-selector o .sidebar .nombre-selector



FRAMEWORK

THEME

“Separate container and content: Break the dependency

between the container module and the content objects it

contains.”- Nicole Sullivan

Los estilos de los objetos deben serindependientes del lugar que ocupen en la página:footer, sidebar, content... Si dependen de laestructura de la página no serán reusables fuerade ese contexto.

No: .sidebar .last-comments {}Sí: .last-comments {}.

Ésto permitirá mostrar el widget en cualquierpágina y en cualquier parte de la misma. Inclusoen otro proyecto, conociendo en todo momentosus dependencias de estilo y cómo le afectará elnuevo contexto (herencia y namespaces).

1 2 3 4 5 6 7 8

Demo: sección Pages de FGR y widgets .header y .footer, viendo de estos últimos que objetos están abstraidos y quécomponentes forman parte del propio objeto.




OOCSS

No crees dependenciasinnecesarias entre objetos.

e



FRAMEWORK

THEME

No agrupes selectores de distintos objetos,creando dependencias innecesarias entre ellos

(Loose Coupling, Component Singularity).No uses el operador de agrupación ”,” paracombinar selectores de diferentes objetos. Úsaloúnicamente para agrupar selectores dentro deun mismo objeto.

Si estás creando bien tus objetos, y aplicando

bien la extensión y la composición te daráscuenta que apenas necesitas usar el operadorde agrupación ”,”.

1 2 3 4 5 6 7 8

“Loose Coupling. Coupling is the degree to which components of a system rely on each other. The less componentsdepend on each other the more reusable and flexible the system becomes. Our goal was a very loosely coupled system.”

“Component Singularity. Singularity is the degree to which components have a narrowly focused purpose. In CodeIgniter,each class and its functions are highly autonomous in order to allow maximum usefulness.”

Compromiso: DRY vs Desacoplamiento y singularidad. Cuantas menos dependencias tienen nuestros objetos, éstos seránmás autonónomos y por lo tanto más portables y reusables.

DRY: Si es necesario repite el mismo conjunto de estilos en diferentes objetos. Si ves que repites una y otra vez ese mismoconjunto de estilos en diferentes objetos, quizás significa que debes abstraerlos (por ejemplo grids, u otros contenedores)y aplicar la composición.



FRAMEWORK

THEME

No agrupes selectores de distintos objetos,creando dependencias innecesarias entre ellos

(Loose Coupling, Component Singularity).No uses el operador de agrupación ”,” paracombinar selectores de diferentes objetos. Úsaloúnicamente para agrupar selectores dentro deun mismo objeto.

Si estás creando bien tus objetos, y aplicando

bien la extensión y la composición te daráscuenta que apenas necesitas usar el operadorde agrupación ”,”.

1 2 3 4 5 6 7 8

Demo: widgets .regatas y .regata de FGR, los pocos casos en los que se usa el operador de agrupación “,”.




OOCSS

Extiende los objetos.

e



FRAMEWORK

THEME

Extiende los objetos a través de múltiples clases.

.objeto{}, es un objeto padre.objeto.hijo{}, es una extensión de .objeto{}

Similar a cómo funciona la extensión en OOP.Las clases hijas heredan las propiedades de laclase padre, estas propiedades podrán sermodificadas o ampliadas por las clases hijas.

Las clases hijas, al contrario que en OOP, norequieren ser declaradas después de la clasepadre, pero se recomienda hacerlo para unamayor legibilidad.

1 2 3 4 5 6 7 8

Nota: Olvídate de IE6.



FRAMEWORK

THEME

Extiende los objetos a través de múltiples clases.

.objeto{}, es un objeto padre.objeto.hijo{}, es una extensión de .objeto{}

Similar a cómo funciona la extensión en OOP.Las clases hijas heredan las propiedades de laclase padre, estas propiedades podrán sermodificadas o ampliadas por las clases hijas.

Las clases hijas, al contrario que en OOP, norequieren ser declaradas después de la clasepadre, pero se recomienda hacerlo para unamayor legibilidad.

1 2 3 4 5 6 7 8

Demo: .widget-title de FGR, multiples extensiones/variaciones de un mismo objeto base.




OOCSS

Crea objetos compuestos.

e



FRAMEWORK

THEME

“Favor 'object composition' over 'class inheritance'.”

- http://en.wikipedia.org/wiki/Design_Patterns

Algunos componentes de la página puedenestar compuestos de varios objetosindependientes.

En este caso no aplicaremos la extensión de unobjeto base, sino la composición o anidamientode objetos.

Al utilizar este patrón nos encontramos conuno de los mayores problemas de CSS, la faltade control total sobre la herencia de estilos y lacascada.

1 2 3 4 5 6 7 8

Un determinado componente sólo debe estar asociado a un objeto CSS en cada momento (Clase o Clase extendida), peropuede estar compuesto por varios objetos en su interior (Composition, Reference).

“Sin quererlo he ideado una propuesta de namespaces para CSS. Tendríamos control total sobre la herencia y cascada.Posibilitaría OOCSS real.”https://twitter.com/#!/janogarcia/status/68641939947393024

Si queda tiempo lo veremos: https://sites.google.com/site/janogarciaes/css



FRAMEWORK

THEME

Los problemas de anidación surgen por dosmotivos: propiedades CSS heredables, nombres

de clases compartidas (sin namespace).Crea reglas específicas para cada caso deanidación, de forma bidireccional y con elmismo nivel de especifidad, así nodependerás del orden en el código fuente.En ellas especificaremos los estilos aneutralizar o sobreescribir del módulo padre.

Todos los nombres de clases están en elnamespace global de CSS. Sé consistentecon el formato de namespaces que uses, séconsciente de sus ventajas e inconvenientes.

1 2 3 4 5 6 7 8

8.1

8.2

A igualdad de especificidad de los selectores, la prioridad de los estilos vendrá determinado por la posición de los mismosen el código fuente (cascada). Cuanto más tarde, mayor especificidad.

Hasta cierto punto podemos controlar/limitar la cascada con el selector hijo ">". Pero no sin limitaciones. Se trata de unselector más posicional que el selector descendiente "(espacio)", es decir, depende más de la estructura HTML de la página(tight coupling). Basta con que introduzcamos un wrapper para que el selector deje de funcionar.

Un selector más interesante es la pseudoclase CSS3 :first-of-type http://reference.sitepoint.com/css/pseudoclass-firstoftype

, la cual no presentaría el problema del selector hijo ">" y su estrecha dependencia con la estructura HTML. IE nolo soporta hasta su versión 9.

No hay una solución ideal con las posibilidades actuales de CSS. No podemos crear un "reset wrapper" (algún preprocesador

lo hace... un tanto agresivo, peor rendimiento, no heredamos estilos de la sección framework por lo que tendríamos querepetirlos) o limitar/controlar las clases de las que un selector hereda sus estilos, ya que no sólo depende del código CSS, sino también del contexto HTML.

“La herencia en CSS es como la del heredero al trono, que sólo por estar ahí hereda todo lo que le rodea.”https://twitter.com/#!/janogarcia/status/68722532341133312

Básicamente, quedan dos posibles soluciones:1) Reordenar el código CSS teniendo en cuenta el sentido de las anidaciones (el módulo anidado debe aparecer en el códigofuente después del módulo contenedor/padre) y neutralizando los estilos heredados del módulo padre.2) Crear reglas específicas para cada caso de anidación que tengan el mismo nivel de especifidad (para que no dependandel orden en el código fuente), en ellas especificaremos los estilos a neutralizar o sobreescribir del módulo padre.

https://sites.google.com/site/janogarciaes/css

Si estás aplicando correctamente la herencia y la composición de objetos, raramente tendrás que sobreescribir/neutralizarestilos heredados no deseados, salvo en los casos de anidaciones de módulos, ya que depedendemos del modelo deherencia/cascada de CSS y éste no lo podemos controlar/limitar. Si por el contrario te encuentras sobreescribiendo/neutralizando reglas en casos que no sean anidaciones, esto será un indicio de que algo va mal.



FRAMEWORK

THEME

Los problemas de anidación surgen por dosmotivos: propiedades CSS heredables, nombres

de clases compartidas (sin namespace).Crea reglas específicas para cada caso deanidación, de forma bidireccional y con elmismo nivel de especifidad, así nodependerás del orden en el código fuente.En ellas especificaremos los estilos aneutralizar o sobreescribir del módulo padre.

Todos los nombres de clases están en elnamespace global de CSS. Sé consistentecon el formato de namespaces que uses, séconsciente de sus ventajas e inconvenientes.

1 2 3 4 5 6 7 8

8.1

8.2

Demo: “nesting” de widgets en FGR, se añade y resuelve cada una de las anidaciones posibles.



FRAMEWORK

THEME

La sección Pages es opcional, sus objetos podríanformar parte de la sección Widgets. Dependerá

de la complejidad del proyecto.Dos funciones:

Agrupar los objetos de páginas/secciones conestilos completamente independientes, noreusables en otro contexto. Facilitamos sulocalización y posible separación a otra hoja.

Definir las anidaciones necesarias de objetoscuyo estilo depende de la página. No deja deser un caso de composición.

1

2

En este caso de composición el objeto anidado responde modificando su comportamiento en función al contexto (página).Sí hay una dependencia del contexto en este caso, pero es una dependencia que buscamos, no una imprevista.

En la mayoría de los casos de anidación que hemos visto el objeto anidado no trataba de modificar su comportamiento,sino restablecer su comportamiento normal neutralizando los efectos del contexto. Pero no siempre será el efecto quebusquemos (ver anidación .buttons .button de FGR).

Por tanto, hay casos de composición que sí implican la extensión/modificación de los objetos anidados, sí debenresponder al contexto.



FRAMEWORK

THEME

Los Helpers son pequeñas clases auxiliaresreusables entre proyectos.

Evitan la repitición del código (DRY).

Ejemplos: .clear, .clearfix, .hidden...



¿Preguntas?

{ }



eGraCIASS

@janogarcia · http://janogarcia.es

Documents

OOCSS - Versión anotada - @janogarcia