$30 off During Our Annual Pro Sale. View Details »

OOCSS by @janogarcia

Jano Garcia
February 28, 2012

OOCSS by @janogarcia

Jano Garcia

February 28, 2012
Tweet

More Decks by Jano Garcia

Other Decks in Programming

Transcript

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

    View Slide

  2. e
    OdiOCSS

    View Slide

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

    View Slide

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

    View Slide

  5. R
    Maximizar reusabilidad.
    OOCSS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. Comportamiento
    predecible.
    OOCSS
    1+1=2

    View Slide

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

    View Slide

  11. O
    Arquitectura modular.
    OOCSS

    View Slide

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

    View Slide

  13. { }
    CONTROL
    con OOCSS
    Retoma el

    View Slide

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

    View Slide

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

    View Slide

  16. ¿Alguien lo usa?

    View Slide

  17. { }
    PATRONES
    y antipatrones OOCSS
    Aprende los

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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!

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  57. DISPARA!
    ¿Preguntas?
    :z
    { }

    View Slide

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

    View Slide