oocss - @janogarcia
DESCRIPTION
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.TRANSCRIPT
{ }OOCSSPoniendo OOrden en CSS
@janogarcia · http://janogarcia.es
eOdiOCSS
OdiOCSSeDí tú qué odias de CSS.
eRepetir una y otra vez
los mismos estilos.
0ODIO
RMaximizar reusabilidad.
OOCSS
RMaximizar reusabilidad.
OOCSS
{ Relación estilos CSS VS elementos HTML
1:1 1:nMaximizar relación
eHeredar estilos de unamanera impredecible.
2ODIO
6 selectores #idmodificador!important estilos en línea
CSS ENVENENADO
Comportamiento predecible.
OOCSS1+1=2
eCrecimiento sin control,
pesadilla de mantenimiento.
3ODIO
OArquitectura modular.
OOCSS
OArquitectura modular.
OOCSS
{ Se basa en la creación de objetos CSS
Reusables.Extensibles.Anidables.
{ }CONTROLcon OOCSS
Retoma el
{ }Modular. Escalable.Eficiente. Simple.
Semántico. Mantenible.
OOCSS
OOCSS busca el equilibrio
{ }OOCSS=CSSSintaxis estándar de CSS
¿Alguien lo usa?
{ }PATRONESy antipatrones OOCSS
Aprende los
FRAMEWORKReset
Base
Grid
Helpers
THEMEWidgets
Pages
Widgets
Normaliza las inconsistenciasentre navegadores.Componentes reusables entre proyectos.
Modulariza, construye tu sitioa partir de componentes reusablesa nivel de proyecto.
Estructura Hoja de Estilos
{Patrón recomendado.OOCSS
Usa un Reset y un Base.
e
FRAMEWORKReset
Grid
Helpers
THEMEWidgets
Pages
Widgets
Normalizan estilos entre navegadores,eliminando inconsistencias y estableciendouna base común.
Sin ellos no podríamos partir de una baseconocida, 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 creala tuya propia.
Estructura Hoja de Estilos > Reset y Base
Base
FRAMEWORKReset
Grid
Helpers
THEMEWidgets
Pages
Widgets
Normaliza estilos entre navegadores,eliminando inconsistencias y estableciendouna base común.
Sin ellos no podríamos partir de una baseconocida, 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 creala tuya propia.
Estructura Hoja de Estilos > Reset y Base
Base
h DEMO
{Patrón recomendado.OOCSS
Usa Grids.
e
FRAMEWORK
Helpers
THEMEWidgets
Pages
Widgets
“Some years ago, I found CSS Framework like Blueprintto 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-2is 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
FRAMEWORK
Helpers
THEMEWidgets
Pages
Widgets
O repites una y otra vez las reglasnecesarias 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
FRAMEWORK
Helpers
THEMEWidgets
Pages
Widgets
O repites una y otra vez las reglasnecesarias 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
{Patrón recomendado.OOCSS
Crea Objetos reusables.
e
FRAMEWORK
Helpers
THEMEWidgets
Pages
Widgets
“Build HTML from the component library. New pagesshould not generally require additional CSS.”- Nicole Sullivan
Crea una librería de componentes reusables parael 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 ensaber aprovechar la extensión y la composición.
Evitan el código repetitivo (DRY). Maximizan lareusabilidad.
Itera, refactoriza!
Estructura Hoja de Estilos > Widgets > Crea Objetos reusables
Reset
Base
Widgets
Widgets
Grid
1 2 3 4 5 6 7 8
FRAMEWORK
Helpers
THEMEWidgets
Pages
Widgets
“Build HTML from the component library. New pagesshould not generally require additional CSS.”- Nicole Sullivan
Crea una librería de componentes reusables parael 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 ensaber aprovechar la extensión y la composición.
Evitan el código repetitivo (DRY). Maximizan lareusabilidad.
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
{Patrón recomendado.OOCSS
Simplifica la cascada.
e
FRAMEWORK
Helpers
THEMEWidgets
Pages
Widgets
Si la cascada no tiene un comportamiento predecible tus estilos tampoco lo tendrán, porlo que nunca podrán ser realmente reusables.
Di adiós a los selectores #id, a los estilos enlínea y a las declaraciones !important. De locontrario no conseguirás que tus estilos tenganun comportamiento predecible.
Estructura Hoja de Estilos > Widgets > Simplifica la Cascada
Reset
Base
Widgets
Widgets
Grid
1 2 3 4 5 6 7 8
FRAMEWORK
Helpers
THEMEWidgets
Pages
Widgets
Sólo puede haber uno en la página, impidiendola 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
FRAMEWORK
Helpers
THEMEWidgets
Pages
Widgets
Sólo puede haber uno en la página, impidiendola 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
FRAMEWORK
Helpers
THEMEWidgets
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 creadospor 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
FRAMEWORK
Helpers
THEMEWidgets
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!
FRAMEWORK
Helpers
THEMEWidgets
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
{Patrón recomendado.OOCSS
Usa clases, no elementos.
e
FRAMEWORK
Helpers
THEMEWidgets
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, yaque 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
FRAMEWORK
Helpers
THEMEWidgets
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, yaque 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.2h DEMO
{Patrón recomendado.OOCSS
Minimiza los selectores.
e
FRAMEWORK
Helpers
THEMEWidgets
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 laestructura HTML. En la mayoría de ocasiones basta con indicar el primer y último elemento. No definas elementos redundantes comotr 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 procesomás intensivo por parte del navegador,el hijo ”>” algo menos. Trata de limitar suuso, 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
FRAMEWORK
Helpers
THEMEWidgets
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 laestructura HTML. En la mayoría de ocasiones basta con indicar el primer y último elemento. No definas elementos redundantes comotr 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 procesomás intensivo por parte del navegador,el hijo ”>” algo menos. Trata de limitar suuso, 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
{Patrón recomendado.OOCSS
No dependas del contexto.
e
FRAMEWORK
Helpers
THEMEWidgets
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. Inclusoen 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
FRAMEWORK
Helpers
THEMEWidgets
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. Inclusoen 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
{Patrón recomendado.OOCSS
No crees dependencias innecesarias entre objetos.
e
FRAMEWORK
Helpers
THEMEWidgets
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 deun mismo objeto.
Si estás creando bien tus objetos, y aplicandobien la extensión y la composición te daráscuenta que apenas necesitas usar el operadorde 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
FRAMEWORK
Helpers
THEMEWidgets
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 deun mismo objeto.
Si estás creando bien tus objetos, y aplicandobien la extensión y la composición te daráscuenta que apenas necesitas usar el operadorde 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
{Patrón recomendado.OOCSS
Extiende los objetos.
e
FRAMEWORK
Helpers
THEMEWidgets
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 clasepadre, pero se recomienda hacerlo para unamayor legibilidad.
Estructura Hoja de Estilos > Widgets > Extiende los objetos
Reset
Base
Widgets
Widgets
Grid
1 2 3 4 5 6 7 8
FRAMEWORK
Helpers
THEMEWidgets
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 clasepadre, pero se recomienda hacerlo para unamayor legibilidad.
Estructura Hoja de Estilos > Widgets > Extiende los objetos
Reset
Base
Widgets
Widgets
Grid
1 2 3 4 5 6 7 8
h DEMO
{Patrón recomendado.OOCSS
Crea objetos compuestos.
e
FRAMEWORK
Helpers
THEMEWidgets
Pages
Widgets
“Favor 'object composition' over 'class inheritance'.”- http://en.wikipedia.org/wiki/Design_Patterns
Algunos componentes de la página puedenestar compuestos de varios objetos independientes.
En este caso no aplicaremos la extensión de un objeto base, sino la composición o anidamientode objetos.
Al utilizar este patrón nos encontramos conuno de los mayores problemas de CSS, la faltade 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
FRAMEWORK
Helpers
THEMEWidgets
Pages
Widgets
Los problemas de anidación surgen por dos motivos: propiedades CSS heredables, nombresde 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í nodependerá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é consistentecon 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
FRAMEWORK
Helpers
THEMEWidgets
Pages
Widgets
Los problemas de anidación surgen por dos motivos: propiedades CSS heredables, nombresde 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í nodependerá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é consistentecon 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
FRAMEWORK
Helpers
THEMEWidgets
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, noreusables en otro contexto. Facilitamos sulocalización y posible separación a otra hoja.
Definir las anidaciones necesarias de objetoscuyo estilo depende de la página. No deja de ser un caso de composición.
1
2
FRAMEWORK
Helpers
THEMEWidgets
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
DISPARA!¿Preguntas?
:z{ }
eGraCIASS
@janogarcia · http://janogarcia.es