Alberto Fortes, in love with css

Hoy he descubierto la presentación de Nicole Sullivan-Hass: OO CSS.
La verdad es que nunca se me ocurrió hablar de Objetos cuando hablo de maquetación modular, que igual tampoco es un adjetivo muy acertado, pero muestra algo que llevo mucho tiempo haciendo, y que me ha valido más de una discusión con algún paleto con aires de grandeza.
Los CSS orientados a objetos se basan en dos pincipios básicos:
1. separar la estructura de la presentación,
y 2. separar contenedor de contenido.

A la práctica esto no quiere decir otra cosa que definamos módulos u objetos como contenedores, atendiendo a su forma, no a su presentación (colores, tipo, backgrounds, etc), son los que Nicole llama Legos, las piezas del puzzle que estammos montado (web). A su vez estos módulos deberían ser dependientes de la estructura general del sitio, a la que también definimos por su forma y no por su contenido (A loos que usais clearfix en vez de darle overflow:hidden a la capa flotante, ¿os va sonando la cosa?).

Sullivan habla de 10 buenas prácticas:

1. Crear una librería básica con elementos comunes. Yo por ejemplo, en las reset.css también icluyo clearfix, el grid system y f-l, f-r, t-r, para floats y text aligns.
2. Nombra semánticamente a tus estilos.
3. Diseña módulos transparentes, o lo que es lo mismo, que la presentación (colores, imágenes de background, etc estén definidos en otra clase)
4. Que nuestras capas sean flexibles y puedan usarse en cualquier parte de la web
5. Usa retícula. Los diseñadores que no maquetan, por favor usad retícula.
6. No uses selectores en tus css. NO pongas nunca: span.small {} pon simplemente .small{}
7. Separa estructura de presentación
8. Separa contenedor de contenido
9. No tengas miedo de usar varias clases dentro de un elemento, una para la estructura principal, otra para presentaciones determinadas, para eso están.
10. Usa reset css (ella dice que use las de la YUI).

Veamos un ejemplo:

[...]
<div id="main_content" class="grid6">
   <div class="block roundedCorners patrocinado">
      <p>En este caso definimos un módulo, block, con ciertos elementos estructurales comunes, tales como el margen, relleno, etc.</p>
      <p>Su tamaño va a ser heredado de un módulo padre que funciona como elemento de la estructura, grid6, que define el número de columnas que tiene la capa main_content dentro de la retícula, en este caso 6 columnas.</p>
       <p>De esta forma vemos que block es un elemento puramente modular, ya que se comporta igual esté en el sidebar o en el main_content, ya que su tamaño lo hereda, no lolleva implícito, y además su presentación está completamente separada de su forma, ya que tanto el hecho de que tenga los bordes redondeados (roundedCorners) y tenga un diseño especial más destacado (patrocinado) es dado por objetos diferenciados</p>
</div>
[...]

En este caso definimos un módulo, block, con ciertos elementos estructurales comunes, tales como el margen, relleno, etc.
Su tamaño va a ser heredado de un módulo padre que funciona como elemento de la estructura, grid6, que define el número de columnas que tiene la capa main_content dentro de la retícula, en este caso 6 columnas.
De esta forma vemos que block es un elemento puramente modular, ya que se comporta igual esté en el sidebar o en el main_content, ya que su tamaño lo hereda, no lolleva implícito, y además su presentación está completamente separada de su forma, ya que tanto el hecho de que tenga los bordes redondeados (roundedCorners) y tenga un diseño especial más destacado (patrocinado) es dado por objetos diferenciados.

¿Qué conseguimos con esto? crear una maquetación perfectamente escalable para sitios vivos, como pueden ser las web 2.0 o comunidades web. Este es el principio que se sigue en la maquetación del próximo diseño de MySofa.es, con ello lograremos que nuevas secciones no definidas en un principio y que todavía puede que ni imaginemos (es un sitio vivo), crezcan de manera natural, no reduplicando estilos, ya que con unas piezas mínimas o legos debe construirse todo el sitio, y como mucho, se extenderán capas que definan la presentación, por las nuevos artes que puedan surgir.
Otra consecuencia importantísima de esta forma de maquetar es la de facilitar a los desarrolladores de lado de servidor (o back end) la creación de nuevas funcionalidades sin la necesidad de crear ellos html o css, sin la necesidad de pedir maquetas previas (ya luego entran los front end para darle la capa de chapa y pintura) y sobre todo sin romper la estructura y tener que pegar sus famosos gritos de auxilio al maquetador cuando todo se descoloca y el footer se pone en la cabecera y otros gajes del oficio.

Otra cosa importantísima, es en cuanto al diseño.
Para mi existen dos tipos de diseñadores web: los que saben (aunque sea poco) de html/css y los que no. Y son estos últimos los que más retrasan y más trabas ponen a una buena maquetación escalable. En principio todo buen diseñador web debería pensar en el contenido y tratar de adaptar las imágenes, la longitud de los textos, etc, a la realidad. además deberían tratar de no multiplicar los entes y aplicar la navaja de Ockham, aplicar una retícula, etc

Ya sin más enrolle os dejo la presentación de Nicole (en inglés):