Diseñando (con CSS) aplicaciones web

Estoy haciendo un sistema muy pequeño de subastas inversas. Para el mismo estoy usando una arquitectura Squeak, Seaside y Magma (ah, las cosas divertidas de la vida). Uno de los requerimientos originales era que el sistema fuera fácilmente modificable por un diseñador gráfico, en un momento no determinado del desarrollo (es decir, no lo tenia disponible de entrada).
Por supuesto, se supone que siempre debería ser así, que los programadores no deberían tener nada que ver con el diseño, que los diseñadores no deberían meterse con el código, que blablabla... pero todos los que tenemos alguna experiencia en el desarrollo de aplicaciones web sabemos que no es así nunca, que el diseño de las pantallas tiene repercusiones en el diseño de la aplicación y viceversa.
Bueno, esta tarea, con Seaside se hace bastante trivial (en realidad, con cualquier framework orientado a componentes debería ser posible, pero en particular con Seaside, por algunas características como la capacidad de agregar decorators dinámicamente).
Para probar esto, trabajé durante dos semanas sin consideraciones “artísticas”, pero con algunas decisiones importantes en el armado de los componentes.
Para que se vea cuan cierto es que no me fijé, pueden ver como se veía la aplicación hasta ayer a la tarde:

Poca onda con los diseños

Y miren ahora los resultados de la aplicación con un rato de trabajo (y de robarme asquerosamente estilos de otros sitios), y, sobre todo, sin tocar absolutamente nada del código escrito. Todo a través de CSS:

Así esta mejor

Le falta mucho, pero a pesar de lo poderosos que son los componentes de Seaside y el CSS2, yo sigo siendo un humilde programador, con un talento para hacer el look&feel de las aplicaciones tendiente a cero. Imagínense lo que un verdadero diseñador puede hacer.

Para que esto funcione, hay que desarrollar los componentes siguiendo un par de pautas:

En primer lugar, todos los componentes plausibles de ser tocados por CSS deberían estar englobados en un div. Resolví esto creando un decorator, que se le puede agregar a cada componente que lo requiera.
En segundo lugar, internamente, los componentes también deben estar divididos en secciones, demarcadas por otros tantos divs.
Por ejemplo, un componente tendrá esta forma:


initialize
super initialize.
self addDecoration: SWCustomizableDecoration new.

renderContentOn: html
html heading level1; with: 'Edición de subasta'.
html heading level2; with: 'Datos generales'.
html form: [
html div class: #data; with: [ self renderBasicOn: html ].
html div class: #sheets; with: pliegos.
html div class: #buttons; with: [ self renderButtonsOn: html ] ]