OOCSS by @janogarcia

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