OO CSS

@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: [email protected] Blog: http://eamodeorubio.wordpress.com/ Sígueme, leches: @eamodeorubio

Así parezco un to interesante

mailto:[email protected]

http://eamodeorubio.wordpress.com/

@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

.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




¿Qué ocurre si decidimos cambiar el diseño de las

notificaciones?

@eamodeorubio




¿Qué ocurre si decidimos cambiar el diseño de los

textos importantes?

@eamodeorubio




.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 { ...}


.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


@eamodeorubio

Open Closed



Independizar estlos del contenido de los del

contenedor

@eamodeorubio

Open Closed



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



¿Como lo hacemos para reutlizar código?

@eamodeorubio

Límites del CSS



¿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 { ...}


p { ...}

@eamodeorubio

Especificidad¡ Hay que contar el número de items de cada

categoría!#id1 { ...}

.class1 .class2 { ...}

p.column { ...}


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">


</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">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">

[email protected]

</span>

<span class="tfno">

+34 563 564 567

</span>

</div>


@eamodeorubio


.email { ...}

.tfno { ...}

.cool_skin { ...}





[email protected]

</span>

<span class="tfno">

+34 563 564 567

</span>

</div>

Estilos básicos, abstractos y semánticos


@eamodeorubio


.email { ...}

.tfno { ...}

.cool_skin { ...}





[email protected]

</span>

<span class="tfno">

+34 563 564 567

</span>

</div>

Valores por defecto globales para el plugin 'cool_skin'


@eamodeorubio


.email { ...}

.tfno { ...}

.cool_skin { ...}





[email protected]

</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


• 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


.email { ...}

.tfno { ...}

.cool_skin { ...}





[email protected]

</span>

<span class="tfno">

+34 563 564 567

</span>

</div>

Esto déjaselo a los diseñadores


@eamodeorubio


.email { ...}

.tfno { ...}

.cool_skin { ...}





[email protected]

</span>

<span class="tfno">

+34 563 564 567

</span>

</div>

En esto ponéos de acuerdo


@eamodeorubio


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


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

http://microformats.org/

@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">[email protected]</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?

OO CSS

Technology

Transcript of OO CSS