OOCSS - Poniendo OOrden en CSS. ¿Qué es OOCSS? Una forma de optimizar la organización y arquitectura de los estilos CSS. En esta presentación veremos qué problemas trata de resolver, qué principios sigue y cómo aplicarlos.

1. { OOCSS
Poniendo OOrden en CSS
}
@janogarcia · http://janogarcia.es

2. OdiOCSS
e

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

4. e
ODIO
0
Repetir una y otra vez
los mismos estilos.

5. R OOCSS
Maximizar reusabilidad.

6. R OOCSS
Maximizar reusabilidad.
{ 1:1
Relación estilos CSS VS elementos HTML
1:n
Maximizar relación

7. e
ODIO
2
Heredar estilos de una
manera impredecible.

8. CSS
ENV
ENE
6
N ADO
selectores #id
modificador!important
estilos en línea

9. 1+1=2
OOCSS
Comportamiento
predecible.

10. e
ODIO
3
Crecimiento sin control,
pesadilla de
mantenimiento.

11. O OOCSS
Arquitectura modular.

12. O OOCSS
Arquitectura modular.
{
Se basa en la creación de objetos CSS
Reusables.
Extensibles.
Anidables.

13. { }
Retoma el
CONTROL
con OOCSS

14. OOCSS
{ Modular. Escalable.
Eficiente. Simple.
Semántico. Mantenible.
OOCSS busca el equilibrio
}

15. { }
Sintaxis estándar de CSS
OOCSS=CSS

16. ¿Alguien lo usa?

17. { }
Aprende los
PATRONES
y antipatrones OOCSS

18. Estructura Hoja de Estilos
FRAMEWORK
Reset Normaliza las inconsistencias
entre navegadores.
Base
Componentes reusables entre
Grid proyectos.
Widgets
Helpers
THEME
Widgets Modulariza, construye tu sitio
a partir de componentes reusables
Pages a nivel de proyecto.

19. e OOCSS
Patrón recomendado.
{
Usa un Reset y un Base.

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

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

22. e OOCSS
Patrón recomendado.
{
Usa Grids.

23. Estructura Hoja de Estilos > Grid
FRAMEWORK
Reset “Some years ago, I found CSS Framework like Blueprint
to be a waste of time. I didn't want to clutter my HTML
Base markup with non-semantic classes for handling the styling.
Now I still don't think cluttering the HTML with span-6 pull-2
Grid is the best thing that happened to CSS, but I found it much
better than cluttering my CSS with endless overflow:hidden
Widgets and float:left; margin-right:10px declarations.”
http://www.pixelastic.com/blog/201:7-advices-to-start-using-oocss-as-a-coding-practice
Helpers
THEME
Widgets
Pages

24. Estructura Hoja de Estilos > Grid
FRAMEWORK
Reset O repites una y otra vez las reglas
necesarias para crear layouts1 o abstraes esas
Base reglas y las aplicas como clases2. Elige.
1 float:left,margin-right:10px, overflow:hidden...
Grid
2 .grid-6, .grid-10, .push-1...
Widgets
Evitan el código repetitivo (DRY). Abstraen
Helpers inconsistencias entre navegadores.
Usa una ya existente: 960.gs, 978.gs, blueprint,
YUI... O crea la tuya propia.
THEME
Widgets
Pages

25. Estructura Hoja de Estilos > Grid
FRAMEWORK
Reset O repites una y otra vez las reglas
necesarias para crear layouts1 o abstraes esas
Base reglas y las aplicas como clases2. Elige.
h
1 float:left,margin-right:10px, overflow:hidden...
Grid
2 .grid-6, .grid-10, .push-1...
DEMO
Widgets
Evitan el código repetitivo (DRY). Abstraen
Helpers inconsistencias entre navegadores.
Usa una ya existente: 960.gs, 978.gs, blueprint,
YUI... O crea la tuya propia.
THEME
Widgets
Pages

26. e OOCSS
Patrón recomendado.
{
Crea Objetos reusables.

27. Estructura Hoja de Estilos > Widgets > Crea Objetos reusables
FRAMEWORK 1 2 3 4 5 6 7 8
Reset “Build HTML from the component library. New pages
should not generally require additional CSS.”
Base - Nicole Sullivan
Grid Crea una librería de componentes reusables para
el proyecto o incluso independientes del proyecto.
Widgets
Los objetos son un conjunto de clases CSS
Helpers relacionadas que responden a una funcionalidad
determinada. Estos objetos deben ser reusables,
extensibles y anidables.
La clave está en identificar esos objetos y en
THEME saber aprovechar la extensión y la composición.
Widgets Evitan el código repetitivo (DRY). Maximizan la
reusabilidad.
Pages
Itera, refactoriza!

28. Estructura Hoja de Estilos > Widgets > Crea Objetos reusables
FRAMEWORK 1 2 3 4 5 6 7 8
Reset “Build HTML from the component library. New pages
should not generally require additional CSS.”
Base - Nicole Sullivan
h
Grid Crea una librería de componentes reusables para
el proyecto o incluso independientes del proyecto.
DEMO
Widgets
Los objetos son un conjunto de clases CSS
Helpers relacionadas que responden a una funcionalidad
determinada. Estos objetos deben ser reusables,
extensibles y anidables.
La clave está en identificar esos objetos y en
THEME saber aprovechar la extensión y la composición.
Widgets Evitan el código repetitivo (DRY). Maximizan la
reusabilidad.
Pages
Itera, refactoriza!

29. e OOCSS
Patrón recomendado.
{
Simplifica la cascada.

30. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Si la cascada no tiene un comportamiento
predecible tus estilos tampoco lo tendrán, por
Base lo que nunca podrán ser realmente reusables.
Grid Di adiós a los selectores #id, a los estilos en
línea y a las declaraciones !important. De lo
Widgets contrario no conseguirás que tus estilos tengan
un comportamiento predecible.
Helpers
THEME
Widgets
Pages

31. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > No #id
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 2.1 No uses #id como selector
Base Sólo puede haber uno en la página, impidiendo
la reusabilidad y limitando la modularización
Grid
Singleton, no puedes crear varias instancias,
Widgets no puede haber objetos extendidos o compuestos
en la misma página: #objeto y #objeto.extendido
Helpers
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.
THEME
Úsalos únicamente en el HTML como hooks de
Widgets JavaScript o para accesibilidad (formularios,
Pages anclas...).

32. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > No #id
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 2.1 No uses #id como selector
Base Sólo puede haber uno en la página, impidiendo
la reusabilidad y limitando la modularización
h
Grid
Singleton, no puedes crear varias instancias,
DEMO
Widgets no puede haber objetos extendidos o compuestos
en la misma página: #objeto y #objeto.extendido
Helpers
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.
THEME
Úsalos únicamente en el HTML como hooks de
Widgets JavaScript o para accesibilidad (formularios,
Pages anclas...).

33. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > Ni estilos en línea ni !important
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 2.2 Ni estilos en línea ni !important
Base Úsalos únicamente para sobreescribir estilos de
una hoja externa fuera de tu control (por ejemplo,
Grid un widget externo de comentarios).
Widgets Si estás usando estilos en línea o el modificador
!important para sobreescribir estilos creados
Helpers por tí es un claro síntoma de que algo va mal, te
has cargado la cascada.
THEME
Widgets
Pages

34. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > ¡Olvida la cascada!
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 2.3 ¡Olvida la cascada!
Base - Olvídate de tener que calcular la especificidad de
los selectores.
Grid
- No dependas del orden del código fuente
Widgets (cascada).
- Usa valores absolutos para propiedades que se
Helpers 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
THEME predecible, elegirás tus selectores con total
seguridad, de una forma sencilla y sin sorpresas
Widgets desagradables, ya que no habrá dependencias ni
influencias desconocidas (loose coupling).
Pages

35. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > ¡Olvida la cascada!
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 2.3 ¡Olvida la cascada!
Base - Olvídate de tener que calcular la especificidad de
los selectores.
h
Grid
- No dependas del orden del código fuente
(cascada).
DEMO
Widgets
- Usa valores absolutos para propiedades que se
Helpers 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
THEME predecible, elegirás tus selectores con total
seguridad, de una forma sencilla y sin sorpresas
Widgets desagradables, ya que no habrá dependencias ni
influencias desconocidas (loose coupling).
Pages

36. e OOCSS
Patrón recomendado.
{
Usa clases, no elementos.

37. Estructura Hoja de Estilos > Widgets > Usa clases, no elementos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Usa clases para tus objetos CSS, evita usar
elementos HTML en los selectores CSS.
Base
3.1 Nombra los elementos asignándoles una
Grid clase. Los estilos serán más reusables, ya
que no dependerán del markup (.title en vez
Widgets de h1, h2...).
Helpers 3.2 No especifiques el elemento HTML al que es
aplicado una clase CSS (sí: .miclase, no:
div.miclase).
Especificar el elemento al que es aplicado una
THEME clase es redundante, innecesario y crea más
dependencia entre la estructura HTML y el
Widgets estilo CSS, obligándonos a modificar el CSS
cada vez que modifiquemos la estructura
Pages HTML (por ejemplo, al cambiar de ol a ul).

38. Estructura Hoja de Estilos > Widgets > Usa clases, no elementos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Usa clases para tus objetos CSS, evita usar
elementos HTML en los selectores CSS.
Base
3.1 Nombra los elementos asignándoles una
h
Grid clase. Los estilos serán más reusables, ya
que no dependerán del markup (.title en vez
DEMO
Widgets de h1, h2...).
Helpers 3.2 No especifiques el elemento HTML al que es
aplicado una clase CSS (sí: .miclase, no:
div.miclase).
Especificar el elemento al que es aplicado una
THEME clase es redundante, innecesario y crea más
dependencia entre la estructura HTML y el
Widgets estilo CSS, obligándonos a modificar el CSS
cada vez que modifiquemos la estructura
Pages HTML (por ejemplo, al cambiar de ol a ul).

39. e OOCSS
Patrón recomendado.
{
Minimiza los selectores.

40. Estructura Hoja de Estilos > Widgets > Minimiza los selectores
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 4.1 Legibilidad: No definas selectores
innecesariamente cualificados como .usuarios
Base table thead tr th a, con .usuarios thead a es
suficiente.
Grid
Evita sobre detallar cada nivel de la
Widgets estructura HTML. En la mayoría de ocasiones
basta con indicar el primer y último elemento.
Helpers 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 4.2 Rendimiento: El selector descendiente
” ” (espacio) es el que requiere un proceso
Widgets más intensivo por parte del navegador,
el hijo ”>” algo menos. Trata de limitar su
Pages
uso, por ejemplo, un máximo de 3 selectores
simples.

41. Estructura Hoja de Estilos > Widgets > Minimiza los selectores
FRAMEWORK 1 2 3 4 5 6 7 8
Reset 4.1 Legibilidad: No definas selectores
innecesariamente cualificados como .usuarios
Base table thead tr th a, con .usuarios thead a es
suficiente.
h
Grid
Evita sobre detallar cada nivel de la
DEMO
Widgets estructura HTML. En la mayoría de ocasiones
basta con indicar el primer y último elemento.
Helpers 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 4.2 Rendimiento: El selector descendiente
” ” (espacio) es el que requiere un proceso
Widgets más intensivo por parte del navegador,
el hijo ”>” algo menos. Trata de limitar su
Pages
uso, por ejemplo, un máximo de 3 selectores
simples.

42. e OOCSS
Patrón recomendado.
{
No dependas del contexto.

43. Estructura Hoja de Estilos > Widgets > No dependas del contexto
FRAMEWORK 1 2 3 4 5 6 7 8
Reset “Separate container and content: Break the dependency
between the container module and the content objects it
Base contains.”
- Nicole Sullivan
Grid
Los estilos de los objetos deben ser
Widgets independientes del lugar que ocupen en la página:
footer, sidebar, content... Si dependen de la
Helpers estructura de la página no serán reusables fuera
de ese contexto.
No: .sidebar .last-comments {}
Sí: .last-comments {}.
THEME
Ésto permitirá mostrar el widget en cualquier
Widgets página y en cualquier parte de la misma. Incluso
en otro proyecto, conociendo en todo momento
Pages sus dependencias de estilo y cómo le afectará el
nuevo contexto (herencia y namespaces).

44. Estructura Hoja de Estilos > Widgets > No dependas del contexto
FRAMEWORK 1 2 3 4 5 6 7 8
Reset “Separate container and content: Break the dependency
between the container module and the content objects it
Base contains.”
- Nicole Sullivan
h
Grid
Los estilos de los objetos deben ser
DEMO
Widgets independientes del lugar que ocupen en la página:
footer, sidebar, content... Si dependen de la
Helpers estructura de la página no serán reusables fuera
de ese contexto.
No: .sidebar .last-comments {}
Sí: .last-comments {}.
THEME
Ésto permitirá mostrar el widget en cualquier
Widgets página y en cualquier parte de la misma. Incluso
en otro proyecto, conociendo en todo momento
Pages sus dependencias de estilo y cómo le afectará el
nuevo contexto (herencia y namespaces).

45. e OOCSS
Patrón recomendado.
{
No crees dependencias
innecesarias entre objetos.

46. Estructura Hoja de Estilos > Widgets > No crees dependencias innecesarias entre objetos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset No agrupes selectores de distintos objetos,
creando dependencias innecesarias entre ellos
Base (Loose Coupling, Component Singularity).
Grid No uses el operador de agrupación ”,” para
combinar selectores de diferentes objetos. Úsalo
Widgets únicamente para agrupar selectores dentro de
un mismo objeto.
Helpers
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

47. Estructura Hoja de Estilos > Widgets > No crees dependencias innecesarias entre objetos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset No agrupes selectores de distintos objetos,
creando dependencias innecesarias entre ellos
Base (Loose Coupling, Component Singularity).
h
Grid No uses el operador de agrupación ”,” para
combinar selectores de diferentes objetos. Úsalo
DEMO
Widgets únicamente para agrupar selectores dentro de
un mismo objeto.
Helpers
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

48. e OOCSS
Patrón recomendado.
{
Extiende los objetos.

49. Estructura Hoja de Estilos > Widgets > Extiende los objetos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Extiende los objetos a través de múltiples clases.
Base .objeto{}, es un objeto padre
.objeto.hijo{}, es una extensión de .objeto{}
Grid
Similar a cómo funciona la extensión en OOP.
Widgets Las clases hijas heredan las propiedades de la
clase padre, estas propiedades podrán ser
Helpers 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
THEME mayor legibilidad.
Widgets
Pages

50. Estructura Hoja de Estilos > Widgets > Extiende los objetos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Extiende los objetos a través de múltiples clases.
Base .objeto{}, es un objeto padre
.objeto.hijo{}, es una extensión de .objeto{}
h
Grid
Similar a cómo funciona la extensión en OOP.
DEMO
Widgets Las clases hijas heredan las propiedades de la
clase padre, estas propiedades podrán ser
Helpers 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
THEME mayor legibilidad.
Widgets
Pages

51. e OOCSS
Patrón recomendado.
{
Crea objetos compuestos.

52. Estructura Hoja de Estilos > Widgets > Crea objetos compuestos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset “Favor 'object composition' over 'class inheritance'.”
- http://en.wikipedia.org/wiki/Design_Patterns
Base
Algunos componentes de la página pueden
Grid estar compuestos de varios objetos
independientes.
Widgets
En este caso no aplicaremos la extensión de un
Helpers 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
THEME de control total sobre la herencia de estilos y la
cascada.
Widgets
Pages

53. Estructura Hoja de Estilos > Widgets > Crea objetos compuestos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Los problemas de anidación surgen por dos
motivos: propiedades CSS heredables, nombres
Base de clases compartidas (sin namespace).
Grid 8.1 Crea reglas específicas para cada caso de
anidación, de forma bidireccional y con el
Widgets mismo nivel de especifidad, así no
dependerás del orden en el código fuente.
Helpers En ellas especificaremos los estilos a
neutralizar o sobreescribir del módulo padre.
8.2 Todos los nombres de clases están en el
namespace global de CSS. Sé consistente
THEME con el formato de namespaces que uses, sé
consciente de sus ventajas e inconvenientes.
Widgets
Pages

54. Estructura Hoja de Estilos > Widgets > Crea objetos compuestos
FRAMEWORK 1 2 3 4 5 6 7 8
Reset Los problemas de anidación surgen por dos
motivos: propiedades CSS heredables, nombres
Base de clases compartidas (sin namespace).
h
Grid 8.1 Crea reglas específicas para cada caso de
anidación, de forma bidireccional y con el
DEMO
Widgets mismo nivel de especifidad, así no
dependerás del orden en el código fuente.
Helpers En ellas especificaremos los estilos a
neutralizar o sobreescribir del módulo padre.
8.2 Todos los nombres de clases están en el
namespace global de CSS. Sé consistente
THEME con el formato de namespaces que uses, sé
consciente de sus ventajas e inconvenientes.
Widgets
Pages

55. Estructura Hoja de Estilos > Pages
FRAMEWORK
Reset La sección Pages es opcional, sus objetos podrían
formar parte de la sección Widgets. Dependerá
Base de la complejidad del proyecto.
Grid Dos funciones:
Widgets 1 Agrupar los objetos de páginas/secciones con
estilos completamente independientes, no
Helpers reusables en otro contexto. Facilitamos su
localización y posible separación a otra hoja.
2 Definir las anidaciones necesarias de objetos
cuyo estilo depende de la página. No deja de
THEME ser un caso de composición.
Widgets
Pages

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

57. { }
¿Preguntas?
DISPARA!
:z

58. GraCIASS
e
@janogarcia · http://janogarcia.es