OOCSS by @janogarcia

3b53f32a92ff371b49203a9cb93a4a3a?s=47 Jano Garcia
February 28, 2012

OOCSS by @janogarcia

3b53f32a92ff371b49203a9cb93a4a3a?s=128

Jano Garcia

February 28, 2012
Tweet

Transcript

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

  2. e OdiOCSS

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

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

    ODIO
  5. R Maximizar reusabilidad. OOCSS

  6. R Maximizar reusabilidad. OOCSS { Relación estilos CSS VS elementos

    HTML 1:1 1:n Maximizar relación
  7. e Heredar estilos de una manera impredecible. 2 ODIO

  8. 6 selectores #id modificador!important estilos en línea CSS ENVENENADO

  9. Comportamiento predecible. OOCSS 1+1=2

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

  11. O Arquitectura modular. OOCSS

  12. O Arquitectura modular. OOCSS { Se basa en la creación

    de objetos CSS Reusables. Extensibles. Anidables.
  13. { } CONTROL con OOCSS Retoma el

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

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

  16. ¿Alguien lo usa?

  17. { } PATRONES y antipatrones OOCSS Aprende los

  18. FRAMEWORK Reset Base Grid Helpers THEME Widgets Pages Widgets Normaliza

    las inconsistencias entre navegadores. Componentes reusables entre proyectos. Modulariza, construye tu sitio a partir de componentes reusables a nivel de proyecto. Estructura Hoja de Estilos
  19. { Patrón recomendado. OOCSS Usa un Reset y un Base.

    e
  20. FRAMEWORK Reset Grid Helpers THEME Widgets Pages Widgets 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. Estructura Hoja de Estilos > Reset y Base Base
  21. FRAMEWORK Reset Grid Helpers THEME Widgets Pages Widgets Normaliza 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. Estructura Hoja de Estilos > Reset y Base Base h DEMO
  22. { Patrón recomendado. OOCSS Usa Grids. e

  23. FRAMEWORK Helpers THEME Widgets Pages Widgets “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 Estructura Hoja de Estilos > Grid Grid Reset Base
  24. FRAMEWORK Helpers THEME Widgets Pages Widgets 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... 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. Estructura Hoja de Estilos > Grid Grid Reset Base
  25. FRAMEWORK Helpers THEME Widgets Pages Widgets 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... 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. Estructura Hoja de Estilos > Grid Grid Reset Base h DEMO
  26. { Patrón recomendado. OOCSS Crea Objetos reusables. e

  27. FRAMEWORK Helpers THEME Widgets Pages Widgets “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! Estructura Hoja de Estilos > Widgets > Crea Objetos reusables Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8
  28. FRAMEWORK Helpers THEME Widgets Pages Widgets “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! Estructura Hoja de Estilos > Widgets > Crea Objetos reusables Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 h DEMO
  29. { Patrón recomendado. OOCSS Simplifica la cascada. e

  30. FRAMEWORK Helpers THEME Widgets Pages Widgets 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. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8
  31. FRAMEWORK Helpers THEME Widgets Pages Widgets 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...). Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > No #id Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 2.1 No uses #id como selector
  32. FRAMEWORK Helpers THEME Widgets Pages Widgets 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...). Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > No #id Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 2.1 No uses #id como selector h DEMO
  33. FRAMEWORK Helpers THEME Widgets Pages Widgets Ú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. Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > Ni estilos en línea ni !important Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 2.2 Ni estilos en línea ni !important
  34. FRAMEWORK Helpers THEME Widgets Pages Widgets - Olvídate de tener

    que calcular la especificidad de los selectores. - No dependas del orden del código fuente (cascada). - 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). Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > ¡Olvida la cascada! Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 2.3 ¡Olvida la cascada!
  35. FRAMEWORK Helpers THEME Widgets Pages Widgets - Olvídate de tener

    que calcular la especificidad de los selectores. - No dependas del orden del código fuente (cascada). - 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). Estructura Hoja de Estilos > Widgets > Simplifica la Cascada > ¡Olvida la cascada! Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 2.3 ¡Olvida la cascada! h DEMO
  36. { Patrón recomendado. OOCSS Usa clases, no elementos. e

  37. FRAMEWORK Helpers THEME Widgets Pages Widgets Usa clases para tus

    objetos CSS, evita usar elementos HTML en los selectores CSS. 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...). 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 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). Estructura Hoja de Estilos > Widgets > Usa clases, no elementos Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 3.1 3.2
  38. FRAMEWORK Helpers THEME Widgets Pages Widgets Usa clases para tus

    objetos CSS, evita usar elementos HTML en los selectores CSS. 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...). 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 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). Estructura Hoja de Estilos > Widgets > Usa clases, no elementos Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 3.1 3.2 h DEMO
  39. { Patrón recomendado. OOCSS Minimiza los selectores. e

  40. FRAMEWORK Helpers THEME Widgets Pages Widgets 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. 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 Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 4.1 4.2
  41. FRAMEWORK Helpers THEME Widgets Pages Widgets 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. 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 Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 4.1 4.2 h DEMO
  42. { Patrón recomendado. OOCSS No dependas del contexto. e

  43. FRAMEWORK Helpers THEME Widgets Pages Widgets “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). Estructura Hoja de Estilos > Widgets > No dependas del contexto Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8
  44. FRAMEWORK Helpers THEME Widgets Pages Widgets “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). Estructura Hoja de Estilos > Widgets > No dependas del contexto Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 h DEMO
  45. { Patrón recomendado. OOCSS No crees dependencias innecesarias entre objetos.

    e
  46. FRAMEWORK Helpers THEME Widgets Pages Widgets 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 ”,”. Estructura Hoja de Estilos > Widgets > No crees dependencias innecesarias entre objetos Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8
  47. FRAMEWORK Helpers THEME Widgets Pages Widgets 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 ”,”. Estructura Hoja de Estilos > Widgets > No crees dependencias innecesarias entre objetos Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 h DEMO
  48. { Patrón recomendado. OOCSS Extiende los objetos. e

  49. FRAMEWORK Helpers THEME Widgets Pages Widgets 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. Estructura Hoja de Estilos > Widgets > Extiende los objetos Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8
  50. FRAMEWORK Helpers THEME Widgets Pages Widgets 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. Estructura Hoja de Estilos > Widgets > Extiende los objetos Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 h DEMO
  51. { Patrón recomendado. OOCSS Crea objetos compuestos. e

  52. FRAMEWORK Helpers THEME Widgets Pages Widgets “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. Estructura Hoja de Estilos > Widgets > Crea objetos compuestos Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8
  53. FRAMEWORK Helpers THEME Widgets Pages Widgets Los problemas de anidación

    surgen por dos motivos: propiedades CSS heredables, nombres de clases compartidas (sin namespace). 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. Todos los nombres de clases están en el 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 Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 8.1 8.2
  54. FRAMEWORK Helpers THEME Widgets Pages Widgets Los problemas de anidación

    surgen por dos motivos: propiedades CSS heredables, nombres de clases compartidas (sin namespace). 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. Todos los nombres de clases están en el 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 Reset Base Widgets Widgets Grid 1 2 3 4 5 6 7 8 8.1 8.2 h DEMO
  55. FRAMEWORK Helpers THEME Widgets Pages Widgets Estructura Hoja de Estilos

    > Pages Reset Base Grid Pages 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: 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. Definir las anidaciones necesarias de objetos cuyo estilo depende de la página. No deja de ser un caso de composición. 1 2
  56. FRAMEWORK Helpers THEME Widgets Pages Widgets Los Helpers son pequeñas

    clases auxiliares reusables entre proyectos. Evitan la repitición del código (DRY). Ejemplos: .clear, .clearfix, .hidden... Estructura Hoja de Estilos > Helpers Reset Base Grid Helpers
  57. DISPARA! ¿Preguntas? :z { }

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