Algunos consejos cuando uses CSS
Quería dejaros unos consejos particulares que utilizo -o al menos intento- cuando tengo que utilizar CSS.
Separa el CSS
Tres posibilidades: por estructura y colores, por secciones o por tipos de clases. Cada uno encajará mejor que otro en nuestro proyecto.
Por estructura y colores.
/***** Estructura *****/
div.contMenu{
height:40px;
width:300px;
border-width:1px;
border-style:solid;
}
/*** Fin Estructura ***/
/***** Colores *****/
div.contMenu{
border-color:#999999;
color: #999999;
}
/*** Fin Colores ***/
Por secciones
/***** Cabecera *****/
#header{}
#menuHeader{}
/*** Fin Cabecera ***/
/***** Contenido *****/
#contenedor{}
#contenido{}
#rightCol{}
/*** Fin Contenido ***/
/***** Pie *****/
#pie{}
/*** Fin Pie ***/
Por tipos de clases: Genéricas, id y clases.
/***** Genericas *****/
body{}
h1{}
h2{}
h3{}
p{}
/*** Fin Genericas ***/
/***** Id *****/
#id1{}
#id2{}
#id3{}
/*** Fin Id ***/
/***** Clases *****/
.clase1{}
.clase2{}
.clase3{}
/*** Fin Clases ***/
Tabula el código
Si ya lo haces en XHTML, por qué no hacerlo también en CSS. Cuando tengas alguna clase que dependa de otra, puedes tabular la segunda de manera que quede por encima de la primera.
Ej:
.clasePadre{
atributo1=valor1;
atributo2=vaor2;
}
.clasePadre hijo{
atributo1=valor1;
atributo2=valor2;
}
Comenta el código
Mucho más fácil si tienes que cambiar algo en un futuro.
Agrupa propiedades
En lugar de usar varias propiedades, usa la propiedad general. Ahorrarás bastantes líneas de código
Ej:
Usa…
body{
background: #FFFFFF url(../img/bgImg.gif) no-repeat fixed center center;
}
…en lugar de…
body{
background-color: #FFFFFF;
background-image: url(../img/bgImg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
Utiliza mayúsculas a la hora de poner los colores
Ej:
Usa…
body{
color: #CCDDEE;
}
…en lugar de…
body{
color: #ccddee;
}
Usa minúsculas al escribir todas las clases
No hay norma como tal que indique que las clases deben de estar en minúscula, pero dado que las etiquetas XHTML deben de ir en minúsculas, apliquemos el mismo criterio a nuestro CSS.
No uses la paleta de colores de Windows VGA en beneficio de los colores hexadecimales
No estás maquetando solamente para Windows, ¿qué pasa con los usuarios de Linux y Mac?. Olvídate de usar aqua, black, blue, fucshia, gray, green, lime, marron, navy, olive, purple, red, silver, teal, white, y yellow.
Utiliza el formato extenso de colores hexadecimal
Muchas veces he visto que se utiliza el código abreviado #RGB cuando los dos caracteres de cada color son iguales #RRGGBB. Particularmente no me gusta, prefiero utilizar los seis caracteres.
Utiliza rutas relativas para las imágenes de fondo
Hay gente que pone la trayectoria absoluta en relación al dominio, en lugar de relativa. ¿Qué ocurriría si tuviéramos que cambiar todos los archivos a uno o dos directorios hijos?
Estructura tus clases
Buscando la limpieza y estructura en el documento, ¿por qué no estructuras las propiedades de tus clases según el tipo?.
a) Propiedades exclusivas de cada clase. Ej.: list-type-type para listas.
b) Propiedades de Fuentes
c) Propiedades de Texto
d) Propiedades de Colores y Fondos
e) Propiedades de Cuadro y Estructura
f) Común para todos los puntos anteriores: Ordenarlos alfabéticamente descendente
Cierra la declaración de las propiedades con punto y coma ‘;’
No hay cosa que me fastidie más que se acabe una propiedad o línea de código sin punto y coma, cuando exista la posibilidad/obligación de ello.
Tabula las propiedades
Mejor usar las propiedades tabuladas una bajo la otra en lugar de todo en línea. Una excepción que podíamos contemplar sería cuando tenemos una clase o varias con pocas propiedades.
Divide los estilos en varias líneas
Cuando aplicamos varios estilos a muchas clases, ¿por qué no separamos éstas en varias líneas en lugar de tenerlas en una sola?
body, h1, h2, h3, h4, h5, h6, p, .clase1, .clase2, .clase3,
.clase4, #id1, #id2, #id3, #id4, #id5, #id6{}
Coíncido en casi todo,… excepto en “Utiliza el formato extenso de colores hexadecimal” yo prefiero usar la versión abreviada RGB cuando es posible,……. De todas maneras son solo formas de trabajar,……..
Saludos
[…] Algunos consejos para cuando uses CSS En el blog de MartÃn Pulido, nos deja unos interesantes consejos que cumple —o al menos intenta cumplir— cuando tiene que utilizar CSS. […]
Acabo de darme cuenta de lo desordenado que soy con CSS. La unica cosa que coincide con lo que hago yo, es lo de comentar y organizar por secciones/ids/class
A ver si aprendo (esto va directo a los Tricks de mis Marcadores)
Un saludo!
[…] martinpulido.com - Algunos consejos cuando uses CSS […]