OOCSS by @janogarcia

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