{

OOCSS
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é problemas trata de resolver, qué principios sigue y cómo aplicarlos.

OdiOCSS

e

e OdiOCSS
Dí tú qué odias de CSS.

e

ODIO

Repetir una y otra vez los mismos estilos.

0

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

Maximizar reusabilidad.

R OOCSS
Maximizar reusabilidad.

{ 1:1

Relación estilos CSS VS elementos HTML

1:n

Maximizar relación

e

ODIO

Heredar estilos de una manera impredecible.

2

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

CSS

6

ENV

ENE NAD

O

selectores #id modificador!important estilos en línea

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

1+1=2

OOCSS

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

Crecimiento sin control, pesadilla de mantenimiento.

e

ODIO

3

OOCSS O
Arquitectura modular.

O OOCSS
Arquitectura modular.

{

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. (widgettitle y container de FGR) - Anidables: módulos compuestos por la agregación de diferentes módulos. (widgets del sidebar de FGR)

{

Retoma el

CONTROL
con OOCSS

}

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

{

OOCSS
OOCSS busca el equilibrio

Modular. Escalable. Eficiente. Simple. Semántico. Mantenible.

}

OOCSS trata de buscar una solución a todos estos problemas derivados de la falta de una arquitectura CSS y HTML adecuada, 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ódigo repetitivo (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 limitaciones de CSS. - Mantenible: Una arquitectura transparente que facilite tanto el desarrollo iterativo e incremental, como las futuras revisiones 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 en conflicto.

{

Sintaxis estándar de CSS

OOCSS=CSS

}

OOCSS es CSS, es decir, no difiere de la sintaxis estándar de CSS que ya conoces. Ni introduce elementos nuevos, ni se comporta de manera diferente, OOCSS no es más que una serie de patrones o principios sobre cómo optimizar la organizació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

{

Aprende los

PATRONES
y antipatrones OOCSS

}

Estructura Hoja de Estilos

FRAMEWORK
Reset Base Grid Widgets Helpers

Normaliza las inconsistencias entre navegadores. Componentes reusables entre proyectos.

THEME
Widgets Pages

Modulariza, construye tu sitio a partir de componentes reusables a nivel de proyecto.

FRAMEWORK Reset: Normalize browser default styles. Scope: elements and pseduo-elements, no namespaces. Base: HTML elements (headings, paragraphs, quotes, anchors, forms, buttons, tables, lists...). Typography (fonts, font rendering 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. THEME Widgets: 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 overrides Scope: body class name as global page namespace.

e

OOCSS

Patrón recomendado.

{
Usa un Reset y un Base.

Estructura Hoja de Estilos > Reset y Base

FRAMEWORK
Reset Base Grid Widgets Helpers
Normalizan estilos entre navegadores, eliminando inconsistencias y estableciendo una base común. Sin ellos no podríamos partir de una base conocida, nuestros estilos no tendrían un comportamiento predecible en los diferentes navegadores. Evitan el código repetitivo (DRY). Usa una ya existente: 960.gs, formalize.me, normalize.css, html5boilerplate, YUI... O crea la tuya propia.

THEME
Widgets Pages

El único lugar, salvo pequeñas excepciones, donde tiene sentido usar elementos/pseudo-elementos HTML en los selectores CSS, ya que estamos definiendo valores por defecto. Salvo contadas excepciones, en el resto de secciones usaremos clases. Nota: No uses el selector universal *. Más en el apartado sobre rendimiento.

Estructura Hoja de Estilos > Reset y Base

FRAMEWORK
Reset Base Grid
Normaliza estilos entre navegadores, eliminando inconsistencias y estableciendo una base común.

Widgets Helpers

h

Sin ellos no podríamos partir de una base conocida, nuestros estilos no tendrían un comportamiento predecible en los diferentes navegadores. Evitan el código repetitivo (DRY). Usa una ya existente 960.gs, formalize.me, normalize.css, html5boilerplate, YUI... O crea la tuya propia.

DEMO

THEME
Widgets Pages

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

e

OOCSS

Patrón recomendado.

{
Usa Grids.

Estructura Hoja de Estilos > Grid

FRAMEWORK
Reset Base Grid Widgets Helpers
“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

THEME
Widgets Pages

Estructura Hoja de Estilos > Grid

FRAMEWORK
Reset Base Grid Widgets Helpers
Evitan el código repetitivo (DRY). Abstraen inconsistencias entre navegadores. Usa una ya existente: 960.gs, 978.gs, blueprint, YUI... O crea la tuya propia. O repites una y otra vez las reglas necesarias 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...

THEME
Widgets Pages
El W3C no especifica ninguna recomedación sobre el nombre de las clases, no considera que la semántica resida en los nombres de clase. Nota: CSS3 contará con soporte nativo para Grids y Layouts, lo que seguramente hará innecesarios los frameworks actuales. https://twitter.com/#!/janogarcia/status/56044926848352256 http://www.slideshare.net/chandleryu/everything-you-know-about-css-is-wrong

Estructura Hoja de Estilos > Grid

FRAMEWORK
Reset Base Grid
O repites una y otra vez las reglas necesarias para crear layouts1 o abstraes esas reglas y las aplicas como clases2. Elige.

Widgets Helpers

h

1 float:left,

margin-right:10px, overflow:hidden... 2 .grid-6, .grid-10, .push-1... Evitan el código repetitivo (DRY). Abstraen inconsistencias entre navegadores. Usa una ya existente: 960.gs, 978.gs, blueprint, YUI... O crea la tuya propia.

DEMO

THEME
Widgets Pages
Demo: Grids de FGR. Activar y desactivar.

e

OOCSS

Patrón recomendado.

{
Crea Objetos reusables.

Estructura Hoja de Estilos > Widgets > Crea Objetos reusables

FRAMEWORK
Reset Base Grid Widgets Helpers

1

2

3

4

5

6

7

8

“Build HTML from the component library. New pages should not generally require additional CSS.”
- Nicole Sullivan

Crea una librería de componentes reusables para el proyecto o incluso independientes del proyecto. Los objetos son un conjunto de clases CSS relacionadas que responden a una funcionalidad determinada. Estos objetos deben ser reusables, extensibles y anidables. La clave está en identificar esos objetos y en saber aprovechar la extensión y la composición. Evitan el código repetitivo (DRY). Maximizan la reusabilidad. Itera, refactoriza!

THEME
Widgets Pages

Cuando disponemos del diseño completo del sitio será más fácil reconocer los objetos y los casos en los  necesitaremos extenderlos o anidarlos. Si sólo disponemos de parte del diseño no podremos anticipar de qué manera podrán ser extendidos 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 deja de 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 en localización, la única manera de poder identificarlas será asignándoles un nombre más presentacional/genérico. Un heading 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 no pone ninguna pega a usar nombres de clases "no semánticos" (la semántica está en el HTML no en las clases CSS). Otro ejemplo son los grids, helpers y casi cualquier otro estilo perteneciente a la sección "Framework".

Estructura Hoja de Estilos > Widgets > Crea Objetos reusables

FRAMEWORK
Reset Base Grid

1

2

3

4

5

6

7

8

“Build HTML from the component library. New pages should not generally require additional CSS.”
- Nicole Sullivan

Widgets Helpers

h

Crea una librería de componentes reusables para el proyecto o incluso independientes del proyecto. Los objetos son un conjunto de clases CSS relacionadas que responden a una funcionalidad determinada. Estos objetos deben ser reusables, extensibles y anidables. La clave está en identificar esos objetos y en saber aprovechar la extensión y la composición. Evitan el código repetitivo (DRY). Maximizan la reusabilidad. Itera, refactoriza!

DEMO

THEME
Widgets Pages

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

e

OOCSS

Patrón recomendado.

{
Simplifica la cascada.

Estructura Hoja de Estilos > Widgets > Simplifica la Cascada

FRAMEWORK
Reset Base Grid Widgets Helpers

1

2

3

4

5

6

7

8

Si la cascada no tiene un comportamiento predecible 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 en línea y a las declaraciones !important. De lo contrario no conseguirás que tus estilos tengan un comportamiento predecible.

THEME
Widgets Pages

Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > No #id

FRAMEWORK
Reset Base Grid Widgets Helpers

1
2.1

2

3

4

5

6

7

8

No uses #id como selector

Sólo puede haber uno en la página, impidiendo la reusabilidad y limitando la modularización Singleton, no puedes crear varias instancias, no puede haber objetos extendidos o compuestos en la misma página: #objeto y #objeto.extendido Complican la especificidad y la cascada, tienen demasiado peso. No podremos crear reglas del mismo peso cuando combinemos objetos basados en .clase y en #id. Úsalos únicamente en el HTML como hooks de JavaScript o para accesibilidad (formularios, anclas...).

THEME
Widgets Pages

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

Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > No #id

FRAMEWORK
Reset Base Grid

1
2.1

2

3

4

5

6

7

8

No uses #id como selector

Widgets Helpers

h

Sólo puede haber uno en la página, impidiendo la reusabilidad y limitando la modularización Singleton, no puedes crear varias instancias, no puede haber objetos extendidos o compuestos en la misma página: #objeto y #objeto.extendido Complican la especificidad y la cascada, tienen demasiado peso. No podremos crear reglas del mismo peso cuando combinemos objetos basados en .clase y en #id. Úsalos únicamente en el HTML como hooks de JavaScript o para accesibilidad (formularios, anclas...).

DEMO

THEME
Widgets Pages
Tests OOCSS en Espresso.

Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > Ni estilos en línea ni !important

FRAMEWORK
Reset Base Grid Widgets Helpers

1
2.2

2

3

4

5

6

7

8

Ni estilos en línea ni !important

Úsalos únicamente para sobreescribir estilos de una 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 creados por tí es un claro síntoma de que algo va mal, te has cargado la cascada.

THEME
Widgets Pages
https://github.com/stubbornella/oocss/wiki/faq http://oli.jp/2011/ids/

Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > ¡Olvida la cascada!

FRAMEWORK
Reset Base Grid Widgets Helpers

1
2.3

2

3

4

5

6

7

8

¡Olvida la cascada!

- Olvídate de tener que calcular la especificidad de
los selectores. (cascada).

- No dependas del orden del código fuente - Usa valores absolutos para propiedades que se
heredan (evita tight coupling con el HTML). Los estilos se deben heredar de una manera simple y completamente predecible. De esta manera tus objetos se comportarán de una forma predecible, elegirás tus selectores con total seguridad, de una forma sencilla y sin sorpresas desagradables, ya que no habrá dependencias ni influencias desconocidas (loose coupling).

THEME
Widgets Pages

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=1 div p = 1+1 = 2 .tree = 10 div p.tree = 1+1+10 = 12 #baobab = 100 body #content .alternative p = 1+100+10+1 = 112 http://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-know http://reference.sitepoint.com/css/inheritance http://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. La anidación se convierte en un infierno, altamente dependiente del HTML (tight coupling). Inflexible, tedioso y costoso en tiempo. 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 de pá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 the arguments, and have even toyed with making elastic layouts. For me, it’s about ROI. You can spend countless hours toying with font-size inheritance, like I did on the Geniant Blog, or you can set sizes in pixels and get on with your life.” Nathan Smith - 960.gs, formalize.me

Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > ¡Olvida la cascada!

FRAMEWORK
Reset Base Grid

1
2.3

2

3

4

5

6

7

8

¡Olvida la cascada!

- Olvídate de tener que calcular la especificidad de

Widgets Helpers

h

los selectores. (cascada).

- No dependas del orden del código fuente - Usa valores absolutos para propiedades que se
heredan (evita tight coupling con el HTML). Los estilos se deben heredar de una manera simple y completamente predecible. De esta manera tus objetos se comportarán de una forma predecible, elegirás tus selectores con total seguridad, de una forma sencilla y sin sorpresas desagradables, ya que no habrá dependencias ni influencias desconocidas (loose coupling).

DEMO

THEME
Widgets Pages

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 la cascada en el código fuente. Tampoco se usan tabulaciones para indicar anidación, ya que lo módulos pueden ser anidados en cualquier orden en el código HTML, además de visualizarse mejor la jerarquía de estilos de un módulo escribiendo los estilos en una sola linea (peor para control de versiones y debugging/diffs). Las propiedades también están en orden alfabético, para que sean mas fáciles de localizar, mas predecibles (al igual que lo hace Firebug), cualquier otra opció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 no mediante reglas explícitas de anidamiento, ya que no podrás controlar como serán anidados, en qué orden, estos objetos en la estructura HTML. Sólo puedes saber cómo será la jerarquía/estructura HTML de las secciones FRAMEWORK y PAGES.

e

OOCSS

Patrón recomendado.

{
Usa clases, no elementos.

Estructura Hoja de Estilos > Widgets > Usa clases, no elementos

FRAMEWORK
Reset Base Grid Widgets Helpers

1

2

3

4

5

6

7

8

Usa clases para tus objetos CSS, evita usar elementos HTML en los selectores CSS.
3.1 Nombra los elementos asignándoles una

clase. Los estilos serán más reusables, ya que no dependerán del markup (.title en vez de h1, h2...). aplicado una clase CSS (sí: .miclase, no: div.miclase).

3.2 No especifiques el elemento HTML al que es

THEME
Widgets Pages

Especificar el elemento al que es aplicado una clase es redundante, innecesario y crea más dependencia entre la estructura HTML y el estilo CSS, obligándonos a modificar el CSS cada vez que modifiquemos la estructura HTML (por ejemplo, al cambiar de ol a ul).

USA CLASES, NO ELEMENTOS: ↑  Mayor rendimiento de los selectores, ya que evitamos el uso de selectores poco específicos/genéricos/elementos a la derecha (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ás conveniente usar elementos de tabla que asignar una clase a cada tr, td... además que si se trata de datos tabulares es muy 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 elementos HTML 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-styletype:none;overflow:hidden, li margin-left:0;float:left) y en el caso de una colección de "div" otros estilos completamente diferentes. En este caso podríamos definir ul.flat y div.flat.

Estructura Hoja de Estilos > Widgets > Usa clases, no elementos

FRAMEWORK
Reset Base Grid

1

2

3

4

5

6

7

8

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

Widgets Helpers

h

3.1 Nombra los elementos asignándoles una

3.2 No especifiques el elemento HTML al que es

DEMO

clase. Los estilos serán más reusables, ya que no dependerán del markup (.title en vez de h1, h2...). aplicado una clase CSS (sí: .miclase, no: div.miclase).

THEME
Widgets Pages

Especificar el elemento al que es aplicado una clase es redundante, innecesario y crea más dependencia entre la estructura HTML y el estilo CSS, obligándonos a modificar el CSS cada vez que modifiquemos la estructura HTML (por ejemplo, al cambiar de ol a ul).

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

e

OOCSS

Patrón recomendado.

{
Minimiza los selectores.

Estructura Hoja de Estilos > Widgets > Minimiza los selectores

FRAMEWORK
Reset Base Grid Widgets Helpers

1

2

3

4

5

6

7

8

4.1 Legibilidad: No definas selectores

innecesariamente cualificados como .usuarios table thead tr th a, con .usuarios thead a es suficiente. Evita sobre detallar cada nivel de la estructura HTML. En la mayoría de ocasiones basta con indicar el primer y último elemento. No definas elementos redundantes como tr th o ul li, bastaría con indicar th o li ya que no pueden estar contenidos por un padre diferente.

THEME
Widgets Pages

4.2 Rendimiento: El selector descendiente

” ” (espacio) es el que requiere un proceso más intensivo por parte del navegador, el hijo ”>” algo menos. Trata de limitar su uso, por ejemplo, un máximo de 3 selectores simples.

Estructura Hoja de Estilos > Widgets > Minimiza los selectores

FRAMEWORK
Reset Base Grid

1

2

3

4

5

6

7

8

4.1 Legibilidad: No definas selectores

Widgets Helpers

h

innecesariamente cualificados como .usuarios table thead tr th a, con .usuarios thead a es suficiente. Evita sobre detallar cada nivel de la estructura HTML. En la mayoría de ocasiones basta con indicar el primer y último elemento. No definas elementos redundantes como tr th o ul li, bastaría con indicar th o li ya que no pueden estar contenidos por un padre diferente. ” ” (espacio) es el que requiere un proceso más intensivo por parte del navegador, el hijo ”>” algo menos. Trata de limitar su uso, por ejemplo, un máximo de 3 selectores simples.

DEMO

THEME
Widgets Pages

4.2 Rendimiento: El selector descendiente

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

e

OOCSS

Patrón recomendado.

{
No dependas del contexto.

Estructura Hoja de Estilos > Widgets > No dependas del contexto

FRAMEWORK
Reset Base Grid Widgets Helpers

1

2

3

4

5

6

7

8

“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 ser independientes del lugar que ocupen en la página: footer, sidebar, content... Si dependen de la estructura de la página no serán reusables fuera de ese contexto. No: .sidebar .last-comments {} Sí: .last-comments {}. Ésto permitirá mostrar el widget en cualquier página y en cualquier parte de la misma. Incluso en otro proyecto, conociendo en todo momento sus dependencias de estilo y cómo le afectará el nuevo contexto (herencia y namespaces).

THEME
Widgets Pages

“A class must know what it contains, but it should never know who contains it. This is huge. This specifically relates to separating 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 the sidebar 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

Estructura Hoja de Estilos > Widgets > No dependas del contexto

FRAMEWORK
Reset Base Grid

1

2

3

4

5

6

7

8

“Separate container and content: Break the dependency between the container module and the content objects it contains.”

Widgets Helpers

h

- Nicole Sullivan

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

DEMO

THEME
Widgets Pages

No: .sidebar .last-comments {} Sí: .last-comments {}. Ésto permitirá mostrar el widget en cualquier página y en cualquier parte de la misma. Incluso en otro proyecto, conociendo en todo momento sus dependencias de estilo y cómo le afectará el nuevo contexto (herencia y namespaces).

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.

e

OOCSS

Patrón recomendado.

{
No crees dependencias innecesarias entre objetos.

Estructura Hoja de Estilos > Widgets > No crees dependencias innecesarias entre objetos

FRAMEWORK
Reset Base Grid Widgets Helpers

1

2

3

4

5

6

7

8

No agrupes selectores de distintos objetos, creando dependencias innecesarias entre ellos (Loose Coupling, Component Singularity). No uses el operador de agrupación ”,” para combinar selectores de diferentes objetos. Úsalo únicamente para agrupar selectores dentro de un mismo objeto. Si estás creando bien tus objetos, y aplicando bien la extensión y la composición te darás cuenta que apenas necesitas usar el operador de agrupación ”,”.

THEME
Widgets Pages

“Loose Coupling. Coupling is the degree to which components of a system rely on each other. The less components depend 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án má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 mismo conjunto de estilos en diferentes objetos, quizás significa que debes abstraerlos (por ejemplo grids, u otros contenedores) y aplicar la composición.

Estructura Hoja de Estilos > Widgets > No crees dependencias innecesarias entre objetos

FRAMEWORK
Reset Base Grid

1

2

3

4

5

6

7

8

No agrupes selectores de distintos objetos, creando dependencias innecesarias entre ellos (Loose Coupling, Component Singularity).

Widgets Helpers

h

No uses el operador de agrupación ”,” para combinar selectores de diferentes objetos. Úsalo únicamente para agrupar selectores dentro de un mismo objeto. Si estás creando bien tus objetos, y aplicando bien la extensión y la composición te darás cuenta que apenas necesitas usar el operador de agrupación ”,”.

DEMO

THEME
Widgets Pages

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

e

OOCSS

Patrón recomendado.

{
Extiende los objetos.

Estructura Hoja de Estilos > Widgets > Extiende los objetos

FRAMEWORK
Reset Base Grid Widgets Helpers

1

2

3

4

5

6

7

8

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 la clase padre, estas propiedades podrán ser modificadas o ampliadas por las clases hijas. Las clases hijas, al contrario que en OOP, no requieren ser declaradas después de la clase padre, pero se recomienda hacerlo para una mayor legibilidad.

THEME
Widgets Pages
Nota: Olvídate de IE6.

Estructura Hoja de Estilos > Widgets > Extiende los objetos

FRAMEWORK
Reset Base Grid

1

2

3

4

5

6

7

8

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 la clase padre, estas propiedades podrán ser modificadas o ampliadas por las clases hijas.

Widgets Helpers

h

DEMO

THEME
Widgets Pages

Las clases hijas, al contrario que en OOP, no requieren ser declaradas después de la clase padre, pero se recomienda hacerlo para una mayor legibilidad.

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

e

OOCSS

Patrón recomendado.

{
Crea objetos compuestos.

Estructura Hoja de Estilos > Widgets > Crea objetos compuestos

FRAMEWORK
Reset Base Grid Widgets Helpers

1

2

3

4

5

6

7

8

“Favor 'object composition' over 'class inheritance'.”
- http://en.wikipedia.org/wiki/Design_Patterns

Algunos componentes de la página pueden estar compuestos de varios objetos independientes. En este caso no aplicaremos la extensión de un objeto base, sino la composición o anidamiento de objetos. Al utilizar este patrón nos encontramos con uno de los mayores problemas de CSS, la falta de control total sobre la herencia de estilos y la cascada.

THEME
Widgets Pages

Un determinado componente sólo debe estar asociado a un objeto CSS en cada momento (Clase o Clase extendida), pero puede 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

Estructura Hoja de Estilos > Widgets > Crea objetos compuestos

FRAMEWORK
Reset Base Grid Widgets Helpers

1

2

3

4

5

6

7

8

Los problemas de anidación surgen por dos motivos: propiedades CSS heredables, nombres de clases compartidas (sin namespace).
8.1 Crea reglas específicas para cada caso de

anidación, de forma bidireccional y con el mismo nivel de especifidad, así no dependerás del orden en el código fuente. En ellas especificaremos los estilos a neutralizar o sobreescribir del módulo padre.
8.2 Todos los nombres de clases están en el

THEME
Widgets Pages

namespace global de CSS. Sé consistente con el formato de namespaces que uses, sé consciente de sus ventajas e inconvenientes.

A igualdad de especificidad de los selectores, la prioridad de los estilos vendrá determinado por la posición de los mismos en 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 un selector 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/pseudoclassfirstoftype, la cual no presentaría el problema del selector hijo ">" y su estrecha dependencia con la estructura HTML. IE no lo 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 que repetirlos) o limitar/controlar las clases de las que un selector hereda sus estilos, ya que no sólo depende del código CSS, si no 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ódigo fuente 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 dependan del 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/neutralizar estilos heredados no deseados, salvo en los casos de anidaciones de módulos, ya que depedendemos del modelo de herencia/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.

Estructura Hoja de Estilos > Widgets > Crea objetos compuestos

FRAMEWORK
Reset Base Grid

1

2

3

4

5

6

7

8

Los problemas de anidación surgen por dos motivos: propiedades CSS heredables, nombres de clases compartidas (sin namespace).

Widgets Helpers

h

8.1 Crea reglas específicas para cada caso de

DEMO

anidación, de forma bidireccional y con el mismo nivel de especifidad, así no dependerás del orden en el código fuente. En ellas especificaremos los estilos a neutralizar o sobreescribir del módulo padre. namespace global de CSS. Sé consistente con el formato de namespaces que uses, sé consciente de sus ventajas e inconvenientes.

8.2 Todos los nombres de clases están en el

THEME
Widgets Pages

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

Estructura Hoja de Estilos > Pages

FRAMEWORK
Reset Base Grid Widgets Helpers
La sección Pages es opcional, sus objetos podrían formar parte de la sección Widgets. Dependerá de la complejidad del proyecto. Dos funciones:
1 Agrupar los objetos de páginas/secciones con

estilos completamente independientes, no reusables en otro contexto. Facilitamos su localización y posible separación a otra hoja. cuyo estilo depende de la página. No deja de ser un caso de composición.

2 Definir las anidaciones necesarias de objetos

THEME
Widgets Pages

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 que busquemos (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í deben responder al contexto.

Estructura Hoja de Estilos > Helpers

FRAMEWORK
Reset Base Grid Widgets Helpers
Ejemplos: .clear, .clearfix, .hidden... Evitan la repitición del código (DRY). Los Helpers son pequeñas clases auxiliares reusables entre proyectos.

THEME
Widgets Pages

{

¿Preguntas?

DISPARA!

:z

}

GraCIASS

e

@janogarcia · http://janogarcia.es

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.