Taberna del Turco

Yo no soy diseñador, de hecho es algo que se me da bastante mal, pero más de una vez me he tenido que enfrentar al diseño de una página web. Para desarrollar esta parte suelo usar hojas de estilo, como el 90% de personas hoy en día.

Sin embargo, siempre me ha parecido que la forma de hacerlo no es la óptima, porque tenemos que tener en la página web que estamos desarrollando una instancia de los selectores que aparecen en la hoja CSS para ver si el estilo definido es el que queríamos o si nos hemos equivocado en algo. Es decir, si hemos definido un identificador en el CSS tal que así:

#header {
background: #eee;
border: 1px dashed #aaa;
margin: 2px 3px;
}

y lo queremos asociar a un elemento div, hasta que no hayamos escrito en la web <div id=”header”> … </div> no veremos cómo queda definido el fondo y el borde, o si los márgenes son los adecuados.

Lo que yo sugiero, o mejor dicho, lo que a mí me gustaría que existiera es una aplicación que tomara como entrada nuestro fichero CSS, parseara su contenido y lo renderizara mostrando, aproximadamente, claro está, cómo quedará la página web cuando tenga contenido.

Por ejemplo, imaginémos que estamos desarrollando una hoja de estilo para un blog. Si esa hoja de estilo la utilizáramos con el programa que propongo veríamos como resultado una imagen tal que así:

Para que esto funcionara habría que asignar la etiqueta HTML a cada selector de la hoja de estilo según fuera a ser usado. Por tanto, el ejemplo anterior quedaría así:

div#header {
background: #eee;
border: 1px dashed #aaa;
margin: 2px 3px;
}

La idea presenta un problema, y es cómo renderizar lo que ocupará cada sección en altura. Normalmente siempre se indica cuánto ha de ocupar de ancho, pero no de alto, por las características inherentes a nuestra forma de escribir (de izquierda a derecha y de arriba a abajo). La solución yo creo que es aproximarlo a una altura prudencial, lo suficiente para que se viera el estilo de cada sección.

A lo mejor me estoy equivocando y una aplicación así sí que existe. Si es así o alguien conoce algo similar que lo diga.

Por cierto, este post está inspirado en otro de Caótico Neutral sobre Selectores CSS, un gran post que no os deberíais de perder.