Post on 07-Jul-2015
@eamodeorubio
Object Oriented CSS
(o sea, CSS mantenible)
@eamodeorubio
¿Qué haces tu aquí?(o quién soy y por qué me decidí a hacer esta charla)
@eamodeorubio
Me presentoEnrique 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
Así parezco un to interesante
@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
¿Qué es CSS Orientado a Objetos?(¿ein?)
@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
.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;}
Evitar duplicación de información
@eamodeorubio
DRY
.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;}
Evitar duplicación de información
@eamodeorubio
DRY
.corner_common { width:9px; height:9px; float:left;}
.left_corner { background-image:url(img/cornerleft.gif);}
.top_corner { background-image:url(img/cornertop.gif);}
Evitar duplicación de información
@eamodeorubio
.corner_common { width:9px; height:9px; float:left;}
.left_corner { background-image:url(img/cornerleft.gif);}
.top_corner { background-image:url(img/cornertop.gif);}
DRYDespués veremos como reutilizarlo
@eamodeorubio
Single Responsability
.important_notification { color:blue; background-color:yellow; font-weight:bold; text-decoration:underline;}
Una única responsabilidad, un sólo motivo para cambiar
@eamodeorubio
Single Responsability
.important_notification { color:blue; background-color:yellow; font-weight:bold; text-decoration:underline;}
Una única responsabilidad, un sólo motivo para cambiar
¿Qué ocurre si decidimos cambiar el diseño de las
notificaciones?
@eamodeorubio
Single Responsability
.important_notification { color:blue; background-color:yellow; font-weight:bold; text-decoration:underline;}
Una única responsabilidad, un sólo motivo para cambiar
¿Qué ocurre si decidimos cambiar el diseño de los
textos importantes?
@eamodeorubio
Single Responsability
.important_notification { color:blue; background-color:yellow; font-weight:bold; text-decoration:underline;}
Una única responsabilidad, un sólo motivo para cambiar
.notification { color:blue; background-color:yellow;}
.important { font-weight:bold; text-decoration:underline;}
@eamodeorubio
Legibilidad
.bd { …}
.h_levelA { …}
.h_levelB { …}
Nombres deben expresar intención de uso
.main_content_section { …}
.important_title { …}
.normal_title { …}
@eamodeorubio
Legibilidad
.bd { …}
.h_levelA { …}
.h_levelB { …}
Nombres deben ser semánticos
.main_content_section { …}
.important_title { …}
.normal_title { …}
@eamodeorubio
Legibilidad
.high_contrast { ...}
.main_content { ...}
.column { ...}
.contact_info { ...}
¿Y qué es eso de “nombres semánticos”?
¿Son estos nombres semánticos?
@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
.high_contrast { ...}
.main_content { ...}
.column { ...}
.contact_info { ...}
Distintos problemas, distinto vocabulario
Esquema de colores
Estructura
Esquema de colores
Layout
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
● 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, ...)
Cerrado a modificación pero abierto a extensión
@eamodeorubio
Open Closed
CSS y estructura HTML deben independizarse al máximo
Cerrado a modificación pero abierto a extensión
@eamodeorubio
Open Closed
CSS y estructura HTML deben independizarse al máximo
Cerrado a modificación pero abierto a extensión
Independizar estlos del contenido de los del
contenedor
@eamodeorubio
Open Closed
CSS y estructura HTML deben independizarse al máximo
Cerrado a modificación pero abierto a extensión
Independizar estlos del contenido de los del
contenedor
Evitar (en lo posible) selectores que acoplen a la
estructura HTML: tag, descendant, child, ...
@eamodeorubio
CSS Reutlizable y Extensible(si no tienes objetos...)
@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
¿Como lo hacemos para reutlizar código?
COMPOSIC
ION
@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● Navegador
3. Especificidad ← Lo que nos interesa en el 80% de los casos4. Orden de aplicación ← El último gana
@eamodeorubio
Especificidad
1. 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 { ...}
p.column { ...}
.main_content { ...}
p { ...}
OV
ER
RID
ES
@eamodeorubio
El último gana
<div class="skinA">
<p class="nota importante">Urgente</p>
</div>OVERRIDES
@eamodeorubio
El último gana
<div class="skinA">
<p class="nota importante">Urgente</p>
</div>
OVERRIDES
@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">
<p class="nota importante">Urgente</p>
<p class="nota">Esto es otra nota</p>
</div>
OV
ER
RID
ESD
EFA
ULT
@eamodeorubio
¡ Todo junto ! → “Plugins”
.email { ...}
.tfno { ...}
.cool_skin { ...}
.cool_skin .email { ...}
.cool_skin .tfno { ...}
<div class="cool_skin">
<span class="email">
eamodeorubio@gmail.com
</span>
<span class="tfno">
+34 563 564 567
</span>
</div>
@eamodeorubio
¡ Todo junto ! → “Plugins”
.email { ...}
.tfno { ...}
.cool_skin { ...}
.cool_skin .email { ...}
.cool_skin .tfno { ...}
<div class="cool_skin">
<span class="email">
eamodeorubio@gmail.com
</span>
<span class="tfno">
+34 563 564 567
</span>
</div>
Estilos básicos, abstractos y semánticos
@eamodeorubio
¡ Todo junto ! → “Plugins”
.email { ...}
.tfno { ...}
.cool_skin { ...}
.cool_skin .email { ...}
.cool_skin .tfno { ...}
<div class="cool_skin">
<span class="email">
eamodeorubio@gmail.com
</span>
<span class="tfno">
+34 563 564 567
</span>
</div>
Valores por defecto globales para el plugin 'cool_skin'
@eamodeorubio
¡ Todo junto ! → “Plugins”
.email { ...}
.tfno { ...}
.cool_skin { ...}
.cool_skin .email { ...}
.cool_skin .tfno { ...}
<div class="cool_skin">
<span class="email">
eamodeorubio@gmail.com
</span>
<span class="tfno">
+34 563 564 567
</span>
</div>
El plugin 'cool_skin' extiende las clases base. Sus reglas
son más específicas
@eamodeorubio
Organizar reglas CSS en niveles de abstracción
Cuanto 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é?
.email { ...}
.tfno { ...}
.cool_skin { ...}
.cool_skin .email { ...}
.cool_skin .tfno { ...}
<div class="cool_skin">
<span class="email">
eamodeorubio@gmail.com
</span>
<span class="tfno">
+34 563 564 567
</span>
</div>
Esto déjaselo a los diseñadores
@eamodeorubio
Soy desarrollador, ¿y a mi qué?
.email { ...}
.tfno { ...}
.cool_skin { ...}
.cool_skin .email { ...}
.cool_skin .tfno { ...}
<div class="cool_skin">
<span class="email">
eamodeorubio@gmail.com
</span>
<span class="tfno">
+34 563 564 567
</span>
</div>
En esto ponéos de acuerdo
@eamodeorubio
Soy desarrollador, ¿y a mi qué?
jQuery('.email').makeEditableField();
// Not specially good code!
jQuery('.email').change(function() {
if(!isValidEmail(jQuery(this).val()))
markAsInvalid(jQuery(this), "Invalid email");
});
// Etc..
Y esto es todo tuyo
@eamodeorubio
Soy desarrollador, ¿y a mi qué?
Arquitectura HMVC● Bajo acoplamiento
HTML ↔ JS● Selectores CSS
actúan como interface
● Desacoplarnos del DOM → HTML/CSS/JS
JS Frontend Application Logic
Model
Controller
Logic View
DOM View (a.k.a. Widget)
HTML(Model)
CSS(View)
JQuery (Controller)
@eamodeorubio
¿Nos hacemos unos frameworks?(tenía que pasar...¿será un framework evil?)
@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
<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>
From @stubornella (https://github.com/stubbornella/oocss/wiki/Grids)
@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
<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>
From @stubornella (https://github.com/stubbornella/oocss/wiki/Module)
@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>
<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?