ORGANIZAR CSS
Mientras esperas a que te conteste dreagnout, te doy mi opinión.
No conozco un método para ordenar las css que esté consensuado por todo el
mundo. Sí que puedes encontrar en Internet muchas opiniones (y truquillos
como indentar las reglas, usar declaraciones abreviadas, etc.), pero lo más
importante es que sigas un método y seas consistente con él. Piensa, por
ejemplo, en cómo organizar los libros clase. Puedes ordenarlos por materias
(todos los de matemáticas juntos, todos los de física, etc.) o por curso
(todos los de primer curso juntos, todos los de segundo, etc.). Cuando
quieras buscar el libro de inglés del tercer curso, si has seguido un método
lo encontrarás en seguida (en la estantería del tercer curso o en la de
libros de idiomas, según cómo los ordenaste). El problema surge cuando no
sigues ningún orden: ¡Jaime!, ¿me tiraste el libro de tercero de ingles? ¡No
lo encuentro!
Aparte de la clasificación obvia: screen.css, print.css, etc., puedes
organizar las css en la siguiente forma:
- CSS genérica: estilos.css con la estructura básica del sitio (número de
columnas, ubicación de las secciones, etc.) e información general sobre la
tipografía, los colores, los enlaces, etc.
- CSS página de inicio: inicio.css.
- CSS por secciones: menu.css, formulario.css, noticias.css, foro.css.
Respondiendo directamente a tu pregunta, excepto por los estilos genéricos,
ordeno por secciones del documento. Aunque te presento las hojas de estilo
en archivos independientes, en el caso de que estuvieran en un único
archivo, también estarían claramente separadas.
En general, el mantener la apariencia global en el archivo de estilos
generales estilos.css y confiar en la herencia, te puede bastar. Pero si el
sitio empieza a ser grande y es posible que cambies, por ejemplo, el color,
es mejor crear una hoja de estilos aparte llamada color.css. Te evitará
tener que estar navegando por los diferentes archivos css cada vez que
quieras hacer un cambio de color. Piensa, por ejemplo, en una plantilla que
reutilizas en más de un sitio. Seguramente quieras cambiar de forma rápida
la apariencia y tener el color centralizado te será de ayuda. Hay quien hace
esto mismo para las fuentes, pero dado el poco margen de juego que da la
tipografía en html, prefiero tenerlo en el archivo de estilos genéricos.
Si trabajas con un gestor de contenidos te será sencillo adjuntar las hojas
de estilo css a tu proyecto. El gestor se encarga de añadir esa hoja de
estilos a todas las páginas. Algo parecido puedes hacer si trabajas con
lenguaje del lado del servidor. Puedes escribir una única línea de código en
todos tus documentos que incluya un fichero con las hojas de estilos
enlazadas que desees, en la forma:
INCLUIR(FICHERO_DE_CSS);
Así, si quieres añadir o borrar una hoja de estilos, sólo tendrás que editar
FICHERO_DE_CSS y añadir (o borrar) una línea <link rel="stylesheet" ...>. Lo
harás una única vez.
Pero si trabajas con páginas html puras, cada vez que quieras añadir una
hoja de estilos, tendrás que hacerlo en todas y cada una de las páginas.
Para evitarlo, enlaza un único fichero, por ejemplo, estilos.css y, dentro
de él, importa las demás hojas de estilos con la directiva @import.
Dentro de cada fichero, también es importante seguir un orden (a nadie se le
ocurre indicar los estilos del pie antes que el de la cabecera). Es mejor
colocar las reglas con menos especificidad antes. También son importante los
comentarios:
/* -------------------- */
/* ----- NOTICIAS ----- */
/* -------------------- */
#noticias {
}
#noticias p {
}
#noticias p em {
}
/* -- Fin de noticias -- */
Dentro de las reglas, hay quien prefiere colocar las diferentes
declaraciones por orden alfabético de las propiedades. Yo prefiero
ordenarlas según su posición en el formato de caja, de más interior a más
exterior:
#viaja {
width: 100px;
font: ...
color: ...
background: ...
padding: ...
border: ...
margin: ...
}
NOTA. Para evitar llamadas al servidor, hay quien reune todas las hojas de
estilos en un archivo único. Particularmente me parece excesivo, sobre todo
teniendo en cuenta la ingente cantidad de llamadas que realiza cualquier
página con un mínimo de imágenes y otros recursos.
Saludos.
El 26 de febrero de 2009 17:59, Chr5 <chr5ma...@gmail.com> escribió:
> ¿ Qué modo de organizar un CSS es el más eficiente de cara al futuro
> de una aplicación / desarrollo web ?
>
> ¿ Organizarías los estilos por areas en la interfaz ? Header,
> Contenido, Footer....
> ¿ Por módulos de la aplicación? Cajas, mensajes_sistema, parrafos
> especiales
> ¿ Por tipos ? h1, p, ul, del, ins
> ¿ Por propiedades de elementos ? p, h1, ul, ol { margin-left: 1em; }
> ¿ O quizás una mezcla de todos ellos ?
>
> ¿ Separarías los estilos en varias hojas o en cambio los mantendrías
> todo en la misma ?, ¿ sería reutilizable de este modo ?
>
> Espero que te sirvan de algo mis incertidumbres,
> ahul,
>
> carlos
>
> 2009/2/26 dreagnout <dreagn...@yahoo.es>:
> > Hola, quisiera que los usuarios dieran su opinión sobre qué parte de
> > CSS le parece más "avanzada" y complicada, para saberlo y poder
> > ayudarles.
> >
> > Un saludo.
> > _______________________________________________
> > Lista de distribución Ovillo
> > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> > Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
> >
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
