• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
OO CSS
 

OO CSS

on

  • 1,166 views

 

Statistics

Views

Total Views
1,166
Views on SlideShare
1,166
Embed Views
0

Actions

Likes
2
Downloads
19
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    OO CSS OO CSS Presentation Transcript

    • Object Oriented CSS (o sea, CSS mantenible) @eamodeorubio
    • (o quién soy y por qué me decidí a hacer esta charla) ¿Qué haces tu aquí? @eamodeorubio
    • Así parezco un to Me presento interesanteEnrique Amodeo  Me dedico al software  En el negocio desde el año 2000  Desarrollo y arquitectura de software  Consultoría y formación  Javascript/AJAX/RIA desde 2006  Haciendo agilismo desde 2005  Mail: eamodeorubio@gmail.com  Blog: http://eamodeorubio.wordpress.com/  Sígueme, leches: @eamodeorubio @eamodeorubio
    • ¿Qué pinta un desarrollador hablando de CSS? ● Me hice un framework AJAX/CSS ● Pero mis CSS eran un dolor ● Dolor → Aprendizaje ● Redescubrir la rueda @eamodeorubio
    • (¿ein?) ¿Qué es CSS Orientado a Objetos? @eamodeorubio
    • Un poco de marketing• CSS Orientado a Objetos ← ¡Cool!• CSS Mantenible y Reutilizable ← Un poco largo• Clean CSS ← ¡Mejor!• Popularizado por Nicole Sullivan ( @stubbornella ) → Escogió el nombre cool @eamodeorubio
    • CSS es código• Hay que mantenerlo → ¡Ojo a la calidad! ● Extensible y reutilizable ● Legible y predecible (no surprise!)• Debe cumplir principios de diseño de código ● DRY ● SOLID (bueno, lo que se pueda) ● Legibilidad @eamodeorubio
    • DRY Evitar duplicación de información.left_corner { background-image:url(img/cornerleft.gif); width:9px; height:9px; float:left;}.top_corner { background-image:url(img/cornertop.gif); width:9px; height:9px; float:left;} @eamodeorubio
    • DRY Evitar duplicación de información.left_corner { background-image:url(img/cornerleft.gif); width:9px; height:9px; float:left;}.top_corner { background-image:url(img/cornertop.gif); width:9px; height:9px; float:left;} @eamodeorubio
    • DRY Evitar duplicación de información.corner_common { width:9px; height:9px; float:left;}.left_corner { background-image:url(img/cornerleft.gif);}.top_corner { background-image:url(img/cornertop.gif);} @eamodeorubio
    • DRY Después veremos como reutilizarlo.corner_common { width:9px; height:9px; float:left;}.left_corner { background-image:url(img/cornerleft.gif);}.top_corner { background-image:url(img/cornertop.gif);} @eamodeorubio
    • Single Responsability Una única responsabilidad, un sólo motivo para cambiar.important_notification { color:blue; background-color:yellow; font-weight:bold; text-decoration:underline;} @eamodeorubio
    • Single Responsability Una única responsabilidad, un sólo motivo para cambiar ¿Qué ocurre si decidimos.important_notification { cambiar el diseño de las color:blue; background-color:yellow; notificaciones? font-weight:bold; text-decoration:underline;} @eamodeorubio
    • Single Responsability Una única responsabilidad, un sólo motivo para cambiar.important_notification { color:blue; background-color:yellow; font-weight:bold; text-decoration:underline;} ¿Qué ocurre si decidimos cambiar el diseño de los textos importantes? @eamodeorubio
    • Single Responsability Una única responsabilidad, un sólo motivo para cambiar .notification { color:blue;.important_notification { background-color:yellow; color:blue; } background-color:yellow; font-weight:bold; text-decoration:underline;} .important { font-weight:bold; text-decoration:underline; } @eamodeorubio
    • Legibilidad Nombres deben expresar intención de uso.bd { .main_content_section { … …} }.h_levelA { .important_title { … …} }.h_levelB { .normal_title { … …} } @eamodeorubio
    • Legibilidad Nombres deben ser semánticos.bd { .main_content_section { … …} }.h_levelA { .important_title { … …} }.h_levelB { .normal_title { … …} } @eamodeorubio
    • Legibilidad ¿Y qué es eso de “nombres semánticos”?.high_contrast { ...}.main_content { ...} ¿Son estos nombres.column { semánticos? ...}.contact_info { ...} @eamodeorubio
    • Legibilidad• Representan conceptos del dominio del problema• Podemos tener varios problemas distintos: ● Layout ● Esquema de colores ● Estructura de contenidos ● Tipos de contenidos• Cada uno tiene un vocabulario diferente @eamodeorubio
    • Legibilidad Distintos problemas, distinto vocabulario.high_contrast { Esquema de ...} colores.main_content { ... Estructura}.column { ... Layout}.contact_info { ... Tipo de datos} @eamodeorubio
    • Pero, ¿el HTML no era semántico?• Sí, pero no lo cubre todo.• HTML4: p, strong, etc• HTML5 es bastante mejor. ● Estructura: detail, section, article, aside, nav... ● Contenido: audio, video, address @eamodeorubio
    • CSS para HTML5 y 4● Sustituir clases redundantes con CSS5 por selectores tipo elemento (article, nav, …)● Usar clases sólo para hacer distinciones más finas● Usar div y span en HTML4 en combinación de clases .articulo, article { ... } .pie, footer { ... } @eamodeorubio
    • Open Closed Cerrado a modificación pero abierto a extensión● HTML cerrado pero “extensible”: Cambiar el diseño sin cambiar la estructura HTML• CSS cerrado: Cambiar la estructura HTML no debería implicar cambiar CSS• CSS extensible: ● Estilos deben poder componerse, y aprovechar la estructura HTML para ello ● Plugins (temas, skins, ...) @eamodeorubio
    • Open Closed Cerrado a modificación pero abierto a extensiónCSS y estructura HTML deben independizarse al máximo @eamodeorubio
    • Open Closed Cerrado a modificación pero abierto a extensiónCSS y estructura HTML deben independizarse al máximoIndependizar estlos del contenido de los del contenedor @eamodeorubio
    • Open Closed Cerrado a modificación pero abierto a extensiónCSS y estructura HTML deben independizarse al máximo Evitar (en lo posible)Independizar estlos del selectores que acoplen a la contenido de los del estructura HTML: tag, contenedor descendant, child, ... @eamodeorubio
    • (si no tienes objetos...) CSS Reutlizable y Extensible @eamodeorubio
    • Límites del CSS• Los estilos CSS no son paramétricos• No hay “instancias” ni “objetos” ni “interfaces”• No existe el concepto de colaboración @eamodeorubio
    • Límites del CSS• Los estilos CSS no son paramétricos• No hay “instancias” ni “objetos” ni “interfaces”• No existe el concepto de colaboración¿Como lo hacemos para reutlizar código? @eamodeorubio
    • Límites del CSS• Los estilos CSS no son paramétricos• No hay “instancias” ni “objetos” ni “interfaces”• No existe el concepto de colaboración ON CI¿Como lo hacemos para reutlizar código? SI PO M CO @eamodeorubio
    • Composición• Varias reglas CSS pueden aplicarse sobre un mismo elemento HTML• Las declaraciones de las reglas CSS se fusionan• Si hay conficto, la declaración de la regla con mayor precedencia gana (override)• Similar a la herencia múltiple @eamodeorubio
    • Precedencia1. Media-type2. Autor e importancia: ● Usuario e !important (accesibilidad) ● Autor de la página e !important (overrides in-style) ← :-/ ● Autor de la página ● Usuario ● Navegador3. Especificidad ← Lo que nos interesa en el 80% de los casos4. Orden de aplicación ← El último gana @eamodeorubio
    • Especificidad1. Estilos en línea (<div style=”color:red”>)2. Selector #id3. Clases, pseudo-clases, atributos (.importante,a:visited, a[rel=author])4. Elementos (a, div, p...) y pseudo elementos(p:first-line) @eamodeorubio
    • Especificidad ¡ Hay que contar el número de items de cada categoría!#id1 { ...}.class1 .class2 { ...}p.column { ...}.main_content { ...}p { ...} @eamodeorubio
    • Especificidad ¡ Hay que contar el número de items de cada categoría!#id1 { ...}.class1 .class2 { ... OVERRIDES}p.column { ...}.main_content { ...}p { ...} @eamodeorubio
    • El último gana<div class="skinA"> <p class="nota importante">Urgente</p> OVERRIDES</div> @eamodeorubio
    • El último gana<div class="skinA"> OVE RRI DES <p class="nota importante">Urgente</p></div> @eamodeorubio
    • ¿Y eso del inheritance?• ¡En realidad, no!• Todo elemento HTML tiene valores CSS por defecto que dependen del browser• Pero el valor por defecto de algunos atributos CSS se pueden heredar del padre• Podemos forzar que una propiedad se herede con el valor “inheritance” @eamodeorubio
    • ¿Y eso del inheritance? <div class="skinA"> DEFAULT <p class="nota importante">Urgente</p>OVERRIDES <p class="nota">Esto es otra nota</p> </div> @eamodeorubio
    • ¡ Todo junto ! → “Plugins”.email { ... <div class="cool_skin">} <span class="email">.tfno { ...} eamodeorubio@gmail.com.cool_skin { </span> ...} <span class="tfno">.cool_skin .email { ... +34 563 564 567} </span>.cool_skin .tfno { ... </div>} @eamodeorubio
    • ¡ Todo junto ! → “Plugins”.email { <div class="cool_skin">} ... Estilos básicos, abstractos y semánticos <span class="email">.tfno { ...} eamodeorubio@gmail.com.cool_skin { </span> ...} <span class="tfno">.cool_skin .email { ... +34 563 564 567} </span>.cool_skin .tfno { ... </div>} @eamodeorubio
    • ¡ Todo junto ! → “Plugins”.email { ... <div class="cool_skin">} <span class="email">.tfno { ...} eamodeorubio@gmail.com Valores por defecto globales.cool_skin { para el</span> plugin cool_skin ...} <span class="tfno">.cool_skin .email { ... +34 563 564 567} </span>.cool_skin .tfno { ... </div>} @eamodeorubio
    • ¡ Todo junto ! → “Plugins”.email { ... <div class="cool_skin">} <span class="email">.tfno { ...} eamodeorubio@gmail.com El plugin cool_skin extiende.cool_skin { </span> las clases base. Sus reglas ...} son <span class="tfno"> más específicas.cool_skin .email { ... +34 563 564 567} </span>.cool_skin .tfno { ... </div>} @eamodeorubio
    • Organizar reglas CSS en niveles de abstracciónCuanto más abstracta sea una regla:• Menor precedencia debería poseer• Menor cantidad de declaraciones debería tener• Su ámbito de aplicación será mayor @eamodeorubio
    • ¿Es CSS capaz de OO?• No, pero posee mecanismos capaces de simular la herencia simple, múltiple y mixins.• La precedencia nos permiten simular la cadena de herencia y abstracción• La composición nos permite simular la herencia múltiple y/o los mixins: ● Mediante “inheritance” ● Usando class=”claseX claseY claseZ” ● Mediante selectores no disjuntos● A veces es necesario acoplarse algo a la estructura de HTML (plugins y contenido semántico de HTML) @eamodeorubio
    • Soy desarrollador, ¿y a mi qué?• Desarrolladores y diseñadores deben cooperar ● HTML → Diseñador ● Contenido reglas CSS → Diseñador ● Comportamiento (JavaScript) → Desarrollador @eamodeorubio
    • Soy desarrollador, ¿y a mi qué?• Desarrolladores y diseñadores deben cooperar ● HTML → Diseñador ● Contenido reglas CSS → Diseñador ● Comportamiento (JavaScript) → Desarrollador ¡Los selectores CSS son el contrato! (usa jQuery o Sizzle) @eamodeorubio
    • Soy desarrollador, ¿y a mi qué? Esto déjaselo a los diseñadores.email { ... <div class="cool_skin">} <span class="email">.tfno { ...} eamodeorubio@gmail.com.cool_skin { </span> ...} <span class="tfno">.cool_skin .email { ... +34 563 564 567} </span>.cool_skin .tfno { ... </div>} @eamodeorubio
    • Soy desarrollador, ¿y a mi qué? En esto ponéos de acuerdo.email { ... <div class="cool_skin">} <span class="email">.tfno { ...} eamodeorubio@gmail.com.cool_skin { </span> ...} <span class="tfno">.cool_skin .email { ... +34 563 564 567} </span>.cool_skin .tfno { ... </div>} @eamodeorubio
    • Soy desarrollador, ¿y a mi qué? Y esto es todo tuyojQuery(.email).makeEditableField();// Not specially good code!jQuery(.email).change(function() { if(!isValidEmail(jQuery(this).val())) markAsInvalid(jQuery(this), "Invalid email");});// Etc.. @eamodeorubio
    • Soy desarrollador, ¿y a mi qué? JS Frontend Application LogicArquitectura HMVC Controller ● Bajo acoplamiento HTML ↔ JS Logic View Model ● Selectores CSS actúan como interface DOM View (a.k.a. Widget) JQuery (Controller) ● Desacoplarnos del DOM → CSS (View) HTML (Model) HTML/CSS/JS @eamodeorubio
    • (tenía que pasar...¿será un framework evil?) ¿Nos hacemos unos frameworks? @eamodeorubio
    • Problemas a resolver• X-Browser (reset)• Layout (en cooperación con HTML5)• Contenedores (en cooperación con HTML5)• Widgets reutilizables• Skins• Representar contenido de negocio de forma consistente @eamodeorubio
    • Reset• Cada browser da una regla CSS para cada elemento• Es de baja prioridad, pero sobreescribe los valores por defecto• Si quieres X-Browser CSS y evitar sorpresas lo mejor es anular este CSS por defecto• http://meyerweb.com/eric/tools/css/reset/• http://developer.yahoo.com/yui/reset/ @eamodeorubio
    • Grids960.gs, YUI, OOCSS, etc. @eamodeorubio
    • Grids From @stubornella (https://github.com/stubbornella/oocss/wiki/Grids)<div class="line"> <div class="unit size1of3"> <h3>1/3</h3> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="unit size2of3 lastUnit"> <h3>2/3</h3> <p>Lorem ipsum dolor sit amet...</p> </div></div> @eamodeorubio
    • Containers• Agrupan contenido y widgets de forma homogénea• No son relevantes para el usuario por si mismos, sino por el contenido• Deben aceptar cualquier contenido• No interferir con su contenido• Ej. pestañas, barra lateral, “portlet” @eamodeorubio
    • Containers From @stubornella (https://github.com/stubbornella/oocss/wiki/Module)<div class="mod"> <b class="top"><b class="tl"></b><b class="tr"></b></b> <div class="inner"> <div class="bd"> <p>Lorem ipsum.</p> </div> </div> <b class="bottom"><b class="bl"></b><b class="br"></b></b></div> @eamodeorubio
    • Widgets• Controles de usuario• Pueden ser simples o complejos• Interacción con el usuario homogénea• Foco de atención de los desarrolladores• Bien cubiertos por frameworks existentes• Ej. boton, botonera, menu, enlace, campo de importes, etc.... @eamodeorubio
    • Contenido• Específico de cada aplicación• Layout y aspecto visual de entidades de negocio• Relevantes para el usuario• Ej. “contacto”, “dirección”, “tweet”, etc.• Microformatos (http://microformats.org) ● hCard ● hCalendar ● rel-nofollow ● rel-tag @eamodeorubio
    • Contenido<div class="vcard"> <a class="fn org url" href="http://www.commerce.net/">CommerceNet</a> <div class="adr"> <span class="type">Work</span>:<div class="street-address">169 University Avenue</div> <span class="locality">Palo Alto</span>, <abbr class="region"title="California">CA</abbr>&nbsp;&nbsp; <span class="postal-code">94301</span><div class="country-name">USA</div> </div> <div class="tel"><span class="type">Work</span> +1-650-289-4040</div> <div class="tel"><span class="type">Fax</span> +1-650-289-4041</div> <div>Email: <span class="email">info@commerce.net</span></div></div> @eamodeorubio
    • Skins• Colores, lineas, fuentes...• Totalmente independientes de la estructura• Extienden a todos los demás elementos del framework• No afectan al layout @eamodeorubio
    • ¿Q & A? @eamodeorubio