{

OOCSS
Poniendo OOrden en CSS
@janogarcia http://janogarcia.es

OdiOCSS

e OdiOCSS
D t qu odias de CSS.

ODIO

Repetir una y otra vez los mismos estilos.

OOCSS R

Maximizar reusabilidad.

R OOCSS
Maximizar reusabilidad.

{ 1:1

Relacin estilos CSS VS elementos HTML

1:n

Maximizar relacin

ODIO

Heredar estilos de una manera impredecible.

CSS

ENV

ENE NAD

selectores #id modificador!important estilos en lnea

1+1=2

OOCSS

Comportamiento predecible.

Crecimiento sin control, pesadilla de mantenimiento.

ODIO

OOCSS O
Arquitectura modular.

O OOCSS
Arquitectura modular.

Se basa en la creacin de objetos CSS

Reusables. Extensibles. Anidables.

Retoma el

CONTROL
con OOCSS

OOCSS
OOCSS busca el equilibrio

Modular. Escalable. Eficiente. Simple. Semntico. Mantenible.

Sintaxis estndar de CSS

OOCSS=CSS

Alguien lo usa?

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.

OOCSS

Patrn 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 comn. Sin ellos no podramos partir de una base conocida, nuestros estilos no tendran un comportamiento predecible en los diferentes navegadores. Evitan el cdigo repetitivo (DRY). Usa una ya existente: 960.gs, formalize.me, normalize.css, html5boilerplate, YUI... O crea la tuya propia.

THEME
Widgets Pages

Estructura Hoja de Estilos > Reset y Base

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

Widgets Helpers

Sin ellos no podramos partir de una base conocida, nuestros estilos no tendran un comportamiento predecible en los diferentes navegadores. Evitan el cdigo repetitivo (DRY). Usa una ya existente 960.gs, formalize.me, normalize.css, html5boilerplate, YUI... O crea la tuya propia.

DEMO

THEME
Widgets Pages

OOCSS

Patrn 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 overow:hidden and oat: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 cdigo 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

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

1 float:left,

margin-right:10px, overflow:hidden... 2 .grid-6, .grid-10, .push-1... Evitan el cdigo 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

OOCSS

Patrn recomendado.

{
Crea Objetos reusables.

Estructura Hoja de Estilos > Widgets > Crea Objetos reusables

FRAMEWORK
Reset Base Grid Widgets Helpers

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

Crea una librera 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 extensin y la composicin. Evitan el cdigo repetitivo (DRY). Maximizan la reusabilidad. Itera, refactoriza!

THEME
Widgets Pages

Estructura Hoja de Estilos > Widgets > Crea Objetos reusables

FRAMEWORK
Reset Base Grid

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

Widgets Helpers

Crea una librera 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 extensin y la composicin. Evitan el cdigo repetitivo (DRY). Maximizan la reusabilidad. Itera, refactoriza!

DEMO

THEME
Widgets Pages

OOCSS

Patrn recomendado.

{
Simplifica la cascada.

Estructura Hoja de Estilos > Widgets > Simplifica la Cascada

FRAMEWORK
Reset Base Grid Widgets Helpers

Si la cascada no tiene un comportamiento predecible tus estilos tampoco lo tendrn, por lo que nunca podrn ser realmente reusables. Di adis a los selectores #id, a los estilos en lnea y a las declaraciones !important. De lo contrario no conseguirs 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

No uses #id como selector

Slo puede haber uno en la pgina, impidiendo la reusabilidad y limitando la modularizacin Singleton, no puedes crear varias instancias, no puede haber objetos extendidos o compuestos en la misma pgina: #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

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

FRAMEWORK
Reset Base Grid

1
2.1

No uses #id como selector

Widgets Helpers

Slo puede haber uno en la pgina, impidiendo la reusabilidad y limitando la modularizacin Singleton, no puedes crear varias instancias, no puede haber objetos extendidos o compuestos en la misma pgina: #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

Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > Ni estilos en lnea ni !important

FRAMEWORK
Reset Base Grid Widgets Helpers

1
2.2

Ni estilos en lnea ni !important

salos nicamente para sobreescribir estilos de una hoja externa fuera de tu control (por ejemplo, un widget externo de comentarios). Si ests usando estilos en lnea o el modificador !important para sobreescribir estilos creados por t es un claro sntoma de que algo va mal, te has cargado la cascada.

THEME
Widgets Pages

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

FRAMEWORK
Reset Base Grid Widgets Helpers

1
2.3

Olvida la cascada!

- Olvdate de tener que calcular la especificidad de

los selectores. (cascada).

- No dependas del orden del cdigo 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 comportarn de una forma predecible, elegirs 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

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

FRAMEWORK
Reset Base Grid

1
2.3

Olvida la cascada!

- Olvdate de tener que calcular la especificidad de

Widgets Helpers

los selectores. (cascada).

- No dependas del orden del cdigo 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 comportarn de una forma predecible, elegirs 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

OOCSS

Patrn recomendado.

{
Usa clases, no elementos.

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

FRAMEWORK
Reset Base Grid Widgets Helpers

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

clase. Los estilos sern ms reusables, ya que no dependern 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 ms dependencia entre la estructura HTML y el estilo CSS, obligndonos a modificar el CSS cada vez que modifiquemos la estructura HTML (por ejemplo, al cambiar de ol a ul).

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

FRAMEWORK
Reset Base Grid

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

Widgets Helpers

3.1 Nombra los elementos asignndoles una

3.2 No especifiques el elemento HTML al que es

DEMO

clase. Los estilos sern ms reusables, ya que no dependern 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 ms dependencia entre la estructura HTML y el estilo CSS, obligndonos a modificar el CSS cada vez que modifiquemos la estructura HTML (por ejemplo, al cambiar de ol a ul).

OOCSS

Patrn recomendado.

{
Minimiza los selectores.

Estructura Hoja de Estilos > Widgets > Minimiza los selectores

FRAMEWORK
Reset Base Grid Widgets Helpers

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 mayora de ocasiones basta con indicar el primer y ltimo elemento. No definas elementos redundantes como tr th o ul li, bastara 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 ms intensivo por parte del navegador, el hijo > algo menos. Trata de limitar su uso, por ejemplo, un mximo de 3 selectores simples.

Estructura Hoja de Estilos > Widgets > Minimiza los selectores

FRAMEWORK
Reset Base Grid

4.1 Legibilidad: No definas selectores

Widgets Helpers

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 mayora de ocasiones basta con indicar el primer y ltimo elemento. No definas elementos redundantes como tr th o ul li, bastara con indicar th o li ya que no pueden estar contenidos por un padre diferente. (espacio) es el que requiere un proceso ms intensivo por parte del navegador, el hijo > algo menos. Trata de limitar su uso, por ejemplo, un mximo de 3 selectores simples.

DEMO

THEME
Widgets Pages

4.2 Rendimiento: El selector descendiente

OOCSS

Patrn recomendado.

{
No dependas del contexto.

Estructura Hoja de Estilos > Widgets > No dependas del contexto

FRAMEWORK
Reset Base Grid Widgets Helpers

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 pgina: footer, sidebar, content... Si dependen de la estructura de la pgina no sern reusables fuera de ese contexto. No: .sidebar .last-comments {} S: .last-comments {}. sto permitir mostrar el widget en cualquier pgina y en cualquier parte de la misma. Incluso en otro proyecto, conociendo en todo momento sus dependencias de estilo y cmo le afectar el nuevo contexto (herencia y namespaces).

THEME
Widgets Pages

Estructura Hoja de Estilos > Widgets > No dependas del contexto

FRAMEWORK
Reset Base Grid

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

Widgets Helpers

- Nicole Sullivan

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

DEMO

THEME
Widgets Pages

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

OOCSS

Patrn recomendado.

{
No crees dependencias innecesarias entre objetos.

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

FRAMEWORK
Reset Base Grid Widgets Helpers

No agrupes selectores de distintos objetos, creando dependencias innecesarias entre ellos (Loose Coupling, Component Singularity). No uses el operador de agrupacin , para combinar selectores de diferentes objetos. salo nicamente para agrupar selectores dentro de un mismo objeto. Si ests creando bien tus objetos, y aplicando bien la extensin y la composicin te dars cuenta que apenas necesitas usar el operador de agrupacin ,.

THEME
Widgets Pages

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

FRAMEWORK
Reset Base Grid

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

Widgets Helpers

No uses el operador de agrupacin , para combinar selectores de diferentes objetos. salo nicamente para agrupar selectores dentro de un mismo objeto. Si ests creando bien tus objetos, y aplicando bien la extensin y la composicin te dars cuenta que apenas necesitas usar el operador de agrupacin ,.

DEMO

THEME
Widgets Pages

OOCSS

Patrn recomendado.

{
Extiende los objetos.

Estructura Hoja de Estilos > Widgets > Extiende los objetos

FRAMEWORK
Reset Base Grid Widgets Helpers

Extiende los objetos a travs de mltiples clases. .objeto{}, es un objeto padre .objeto.hijo{}, es una extensin de .objeto{} Similar a cmo funciona la extensin en OOP. Las clases hijas heredan las propiedades de la clase padre, estas propiedades podrn ser modificadas o ampliadas por las clases hijas. Las clases hijas, al contrario que en OOP, no requieren ser declaradas despus de la clase padre, pero se recomienda hacerlo para una mayor legibilidad.

THEME
Widgets Pages

Estructura Hoja de Estilos > Widgets > Extiende los objetos

FRAMEWORK
Reset Base Grid

Extiende los objetos a travs de mltiples clases. .objeto{}, es un objeto padre .objeto.hijo{}, es una extensin de .objeto{} Similar a cmo funciona la extensin en OOP. Las clases hijas heredan las propiedades de la clase padre, estas propiedades podrn ser modificadas o ampliadas por las clases hijas.

Widgets Helpers

DEMO

THEME
Widgets Pages

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

OOCSS

Patrn recomendado.

{
Crea objetos compuestos.

Estructura Hoja de Estilos > Widgets > Crea objetos compuestos

FRAMEWORK
Reset Base Grid Widgets Helpers

Favor 'object composition' over 'class inheritance'.

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

Algunos componentes de la pgina pueden estar compuestos de varios objetos independientes. En este caso no aplicaremos la extensin de un objeto base, sino la composicin o anidamiento de objetos. Al utilizar este patrn 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

Estructura Hoja de Estilos > Widgets > Crea objetos compuestos

FRAMEWORK
Reset Base Grid Widgets Helpers

Los problemas de anidacin surgen por dos motivos: propiedades CSS heredables, nombres de clases compartidas (sin namespace).
8.1 Crea reglas especficas para cada caso de

anidacin, de forma bidireccional y con el mismo nivel de especifidad, as no dependers del orden en el cdigo fuente. En ellas especificaremos los estilos a neutralizar o sobreescribir del mdulo padre.
8.2 Todos los nombres de clases estn 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.

Estructura Hoja de Estilos > Widgets > Crea objetos compuestos

FRAMEWORK
Reset Base Grid

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

Widgets Helpers

8.1 Crea reglas especficas para cada caso de

DEMO

anidacin, de forma bidireccional y con el mismo nivel de especifidad, as no dependers del orden en el cdigo fuente. En ellas especificaremos los estilos a neutralizar o sobreescribir del mdulo 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 estn en el

THEME
Widgets Pages

Estructura Hoja de Estilos > Pages

FRAMEWORK
Reset Base Grid Widgets Helpers
La seccin Pages es opcional, sus objetos podran formar parte de la seccin Widgets. Depender de la complejidad del proyecto. Dos funciones:
1 Agrupar los objetos de pginas/secciones con

estilos completamente independientes, no reusables en otro contexto. Facilitamos su localizacin y posible separacin a otra hoja. cuyo estilo depende de la pgina. No deja de ser un caso de composicin.

2 Definir las anidaciones necesarias de objetos

THEME
Widgets Pages

Estructura Hoja de Estilos > Helpers

FRAMEWORK
Reset Base Grid Widgets Helpers
Ejemplos: .clear, .clearfix, .hidden... Evitan la repiticin del cdigo (DRY). Los Helpers son pequeas clases auxiliares reusables entre proyectos.

THEME
Widgets Pages

Preguntas?

DISPARA!

:z

GraCIASS

@janogarcia http://janogarcia.es