Organización en los CSS

0 - - 30/08/2005 00:00:00

Una de las cosas que a veces me obsesionan es mantener las cosas organizadas. Es un verdadero quebradero de cabeza. Cómo catalogar las tipografías, los recursos gráficos, los archivos fuente de Flash, ... En estos tiempos en el que la información está al alcance de la mano (o de Google), la gestión de la misma puede ser determinante. Hasta ahora he sido un poco caótico con respecto a los CSS, así que hoy me he puesto a definir unas normas para estructurar de una manera homogénea y lo más clara posible esta información. Supongo que con el tiempo o con lo que lea por ahí acabaré por modificar las normas y categorías de algún modo, pero básicamente mi forma de organizar un CSS va a ser:

1.- Delimitar áreas en función del contenido con comentarios. Las áreas contendrán la parte del css que definen o caracterizan el rótulo de la misma. Por ejemplo, dentro del área "LAYOUT" se definirán los diferentes IDS que maquetarán la interface de la web. Las áreas podrían ser: GENERAL, LAYOUT, CLASES, ENCABEZADOS, LISTAS, IMAGENES, LINKS, FORMULARIOS, TABLAS y OTRAS REDIFINICIONES.
2.- En el caso de que dentro de un área haya demasiada información sacar todo el contenido en otro CSS y poner únicamente el enlace al mismo (@import url("clases.css"))
3.- Dentro de un área y a fin de evitar duplicaciones o posibles redundancias seguir un orden jerárquico o alfabético. Por ejemplo, primero redefinir "form" y luego "textarea" en el caso de que haya jerarquia y primero redefinir la clase ".cuerpotexto" y luego ".titulo".

Así un ejemplo de lo que me gustaría lograr a partir de ahora sería:

/* ----- GENERAL ----- */
Body{
}
html {
}
...
/* ----- LAYOUT (IDS) ----- */
#contenedor {
}
#menu {
}
#contenido {
}
#pie {
}
...
/* ----- CLASES ----- */
.parrafo {
}
.titulo {
}
...
/* ----- ENCABEZADOS ----- */
h1{
}
h2{
}
...
/* ----- LISTAS ----- */
ul{
}
ul li{
}
...
/* ----- IMAGENES----- */
img{
}
img a{
}
img a:hover{
}
...
/* ----- LINKS ----- */
a{
}
a:hover{
}
...
/* ----- FORMULARIOS ----- */
form{
}
input{
}
textarea{
}
...
/* ----- TABLAS----- */
table{
}
thead{
}
td{
}
...
/* ----- OTRAS REDIFINICIONES ----- */
abbr{
}
blockquote{
}
strong{
}
....

Esta sería mi clasificación, por si a alguien le es de ayuda o le sirve de orientación. Se admiten sugerencias y otros puntos de vista.

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha