OOCSS - @janogarcia

1,243 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,243
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

OOCSS - @janogarcia

  1. 1. { OOCSS Poniendo OOrden en CSS } @janogarcia · http://janogarcia.es
  2. 2. OdiOCSS e
  3. 3. e OdiOCSSDí tú qué odias de CSS.
  4. 4. e ODIO 0Repetir una y otra vez los mismos estilos.
  5. 5. R OOCSSMaximizar reusabilidad.
  6. 6. R OOCSSMaximizar reusabilidad.{ 1:1 Relación estilos CSS VS elementos HTML 1:n Maximizar relación
  7. 7. e ODIO 2Heredar estilos de unamanera impredecible.
  8. 8. CSS ENV ENE6 N ADO selectores #id modificador!important estilos en línea
  9. 9. 1+1=2 OOCSS Comportamiento predecible.
  10. 10. e ODIO 3Crecimiento sin control, pesadilla de mantenimiento.
  11. 11. O OOCSSArquitectura modular.
  12. 12. O OOCSSArquitectura modular.{ Se basa en la creación de objetos CSS Reusables. Extensibles. Anidables.
  13. 13. { } Retoma el CONTROL con OOCSS
  14. 14. OOCSS{ Modular. Escalable. Eficiente. Simple.Semántico. Mantenible. OOCSS busca el equilibrio }
  15. 15. { } Sintaxis estándar de CSSOOCSS=CSS
  16. 16. ¿Alguien lo usa?
  17. 17. { } Aprende los PATRONES y antipatrones OOCSS
  18. 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. 19. e OOCSSPatrón recomendado.{ Usa un Reset y un Base.
  20. 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. 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. 22. e OOCSSPatrón recomendado.{ Usa Grids.
  23. 23. Estructura Hoja de Estilos > Grid FRAMEWORK Reset “Some years ago, I found CSS Framework like Blueprint to be a waste of time. I didnt want to clutter my HTML Base markup with non-semantic classes for handling the styling. Now I still dont 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. 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. 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. 26. e OOCSSPatrón recomendado.{ Crea Objetos reusables.
  27. 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. 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. 29. e OOCSSPatrón recomendado.{ Simplifica la cascada.
  30. 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. 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. 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. 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. 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. 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. 36. e OOCSSPatrón recomendado.{ Usa clases, no elementos.
  37. 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. 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. 39. e OOCSSPatrón recomendado.{ Minimiza los selectores.
  40. 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. 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. 42. e OOCSSPatrón recomendado.{ No dependas del contexto.
  43. 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. 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. 45. e OOCSSPatrón recomendado.{ No crees dependencias innecesarias entre objetos.
  46. 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. 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. 48. e OOCSSPatrón recomendado.{ Extiende los objetos.
  49. 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. 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. 51. e OOCSSPatrón recomendado.{ Crea objetos compuestos.
  52. 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. 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. 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. 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. 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. 57. { } ¿Preguntas? DISPARA! :z
  58. 58. GraCIASS e @janogarcia · http://janogarcia.es

×