Pues me he quejado de que en Robancomer tienen un asquerocidad con la maquetación de los HTML’s (y JSP’s) y que para los estilos están peor. Por eso he decidido pasarles estos tips que se me hicieron bastante buenos porque pasa muchas cosas que deben perseguirse a la hora de programar: reutilización y modularización (hay más, pero lo que les voy a comentar se me hacen muy relacionados con esto).

Esto lo he sacado de Smashing Magazine que pusó el post de 70 ideas de expertos para la mejora de la codificación de CSS (espero haberlo traducido apropiadamente) con un archivo descargable (no encontre el enlace al archivo) que tiene muchos más tips, pero mi inglés no me dejó avanzar más.

Reset CSS

Lo primero es remediar un poco el problema de estilos entre diferentes navegadores. Para esto hay que resetear los estilos por default de los diferentes navegadores (muy visible entre todos los otros y la basura estandar de facto ie). Para esto en un principio usaba el selector universal:

* {

margin: 0;
padding: 0;

}

pero leí los pormenores hacer esto, pero no recuerdo, sin embargo daban otra solución diferente y que me parece mas adecuada (se especializa en varios serlectores) que han llamado reset css. Como no me dedico a esto pues he usado los estilos reseteados, aquí les dejo una lista de dichos estilos:

Modulariza el CSS

El segundo punto es que a mi me harta hacer una hoja de estilos toda poderosa, es decir, tienes los estilos de todas las propiedades de la página (o peor aun, de la aplicación) en una hoja de estilos, así que cuando me entere de que se podía modularizar dentro de las hojas de estilos me encontó la idea. Para empezar uno debe de hacer referencia a una hoja de estilos que contendra las importaciones de las otras, ¿cómo se hace esto? Bueno supongamos que tenemos un CSS llamado main.css donde cargaremos los estilos para la estructura de la página (_struct.css) y para la presentación de los elementos (_styles.css), sí, suena raro esto, pero la idea de _struct.css es poner solamente tamaños de los div’s, posiciones y margenes y para _styles.css ponemos tamaños de letras, colores y cosas de este estilo. Entonces main.css quedaría de esta manera (suponiendo que las CSS se encuentran en la misma carpeta):

@import url(“reset.css”);/* hoja de estilos para resetear los estilos de los navegadores */
@import url(“_style.css”);
@import url(“_style.css”);

le puedes poner algunos estilos, pero el chiste de esto es modularizar. Es importante que pongas la CSS para resetear los estilos al principio porque si no los estilos definidos por las otras CSS no será aplicado.

Las otras hojas de estilos quedan como normal lo harías, pero yo prefiero separar la funcionalidad de cada una y te presento un ejemplo de como serían:

/* _struct.css */

body {
text-align: center;
}

div {
margin: auto;
width: 750px;
}

div#header {
height: 200px;
}

div#content {
}

div#footer {
text-align: center;
}

Como ves es algo sencillo para explicar la estructura, ahora vienen los estilos (que es lo mismo pero le he puesto este nombre porque no se me ocurrió otro):

/* _style.css */

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
background-color: #FFFFFF;

}

div {
}

div#header {
background-repeat: no-repeat;
background-position: center center;
background-color: #CCCCCC;
}

div#content {
background-image: url(../pix/content_background.png);
background-repeat: repeat-y;
text-align: left;
}

div#content p {
margin: 0;
padding: 0;
}

div#footer {
background-image: url(../pix/footer_back.png);
background-repeat: repeat-x;
color: #FFFFFF;
font-size: 0.8em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

¿Qué se puede hacer con esto? Minimizar el tiempo de busqueda de una propiedad, mantener de una manera mas intuitiva la estructura de los estilos y generar otros estilos de este tipo: para formularios genero un form.css y detro de este llamo a la estructura del formulario y los estilos de formulario.

No sé, tal vez no te convencí, pero deberías de intentarlo y ya sabrás si te sirve esto o no. Bueno esto es de las cosas que hago dentro de la programación (y que siempre hablo y casi no hago nada por aquí) .

Anuncios