[SOLUCIONADO] Archivos CSS

[lvfp]

Hola:

He visto comentarios en el foro sobre el tema, pero no me queda claro qué combinación es mejor respecto a los archivos CSS de una web:

1- Un sólo archivo para todas las páginas

2- Un archivo general y otro específico para cada página

3- Uno específico para cada página


Gracias.

[pzin]

La tercera opción se descarta porque ahí vas a repetir código de la estructura general —cabecera, menú, pie y demás.

Luego depende. Si es una página pequeña te basta con un archivo para todo. Aunque si lo seccionas tampoco pasa nada, yo creo que ya podemos decir que las conexiones a Internet son suficientemente poco malas para el tema de las cargas.

Yo prefiero tener uno general y luego por secciones —o páginas. Queda todo más organizado.

De las cosas que más gustan de usar lenguajes de precompilado —al menos en Sass— es que puedes tener los archivos seccionados como quieras en el momento del desarrollo y luego compilarlos como quieras en producción, uno, varios, o como gustes. Lo comento porque más o menos está relacionado con la pregunta.

[lvfp]

Yo usaba la segunda opción pero en muchos sitios te dicen que cuantas menos llamadas al servidor mejor y a su vez cuando haces una auditoria con chrome te dice que elimines las partes de css que no usas en esa página, con lo que un archivo general no parece buena opción.

Gracias por tu respuesta

[temerariomalaga]

Yo he usado siempre una única hoja de estilos para todas las páginas y manteniendo más o menos la misma estructura de estilo para todas las páginas y añadiendo las correspondientes clases e identificadores para cada etiqueta para así darle un estilo específico a alguna etiqueta en concreto.

[ArturoGallegos]

yo opino igual que @Bonez, todo depende del tamaño de las paginas y la cantidad de clases que tengan en común, si es pequeño con un solo archivo para todo basta, pero si el sitio es grande donde cada pagina puede tener muchas clases o ID que no se repiten en el resto del sitio... es mejor crear un archivo general que contenga todos los estilos que tengan en común las paginas y un archivo independiente que contenga las clases especificas de cada pagina que lo necesite.

[lvfp]

Bien, gracias a todos. Parece que seguiré como lo hacía hasta ahora.

[Tecna]

Buenas,

teniendo como meta conseguir que la página cargue lo más rapidamente posible, lo que se aconseja es cargar al principio sólo las partes necesarias para la primera visualización de la página y que ésta funcione correctamente. Aunque a veces la mejora obtenida con esta optimización no compensa, como por ejemplo en ficheros css con pocas reglas como ya se ha dicho antes. Caso distinto es el de los scripts, ya que la carga normal de los scripts paraliza la carga del resto de recursos de la página y bloquea la visualización de todo lo que esté por debajo. Por este motivo es importante cargar las hojas de estilo antes que los scripts.

Otra cosa importante a tener en cuenta es la eficiencia de los selectores, los selectores muy genéricos obligan al navegador a hacer muchas comprobaciones para aplicar el estilo con lo que se ralentiza la carga, y esto se acentúa si se modifican estilos con javascript. Además causaría un gran impacto en páginas con muchos elementos el tener que recorrer todo el DOM para buscar a que elementos aplicar cada estilo. Cuanto más específico sea el selector clave mejor. Por eso en cuanto a css es más importante este tema, creo, que dividir el código ya que la carga de ficheros CSS se hace en paralelo y no habría mucha diferencia, en cuanto a tiempo, de ser 2 a 1 fichero, ni el ahorro en kb sería mucho si el fichero css no tiene muchas reglas.

[Tedel]

Un solo CSS por sitio web, por favor. Lo he dicho antes varias veces.

¿Por qué?

1. Porque un solo CSS se descarga completo una sola vez y queda guardado en el caché del disco del visitante hasta que este decida eliminarlo.

2. Porque, ya que está descargado, no necesita descargarse nuevamente en la visita a una nueva página de la web.

3. Porque simplifica la edición de cada una de las partes del sitio.

Manejar varios CSS podría parecer más ordenado, pero al final resulta ser todo lo contrario. Lee estas dos preguntas y sabrás a qué me refiero:

- ¿En qué archivo habías ordenado el formato de los párrafos de las tablas?
- ¿Cómo ordenó el CSS el diseñador anterior?
- ¿Hay que editar un archivo para el CSS del navegador de escritorio y otro para el CSS del navegador móvil? ¿Cuál es cuál?

Siempre, siempre, siempre ten un solo archivo para el CSS de tu web. Es lo mejor que puedes hacer.

[pzin]

Iniciado por Tedel

1. Porque un solo CSS se descarga completo una sola vez y queda guardado en el caché del disco del visitante hasta que este decida eliminarlo.

Bueno, y varios archivos también se descargan una sola vez.

Iniciado por Tedel

2. Porque, ya que está descargado, no necesita descargarse nuevamente en la visita a una nueva página de la web.

Lo mismo ocurre si tienes varios archivos...

Iniciado por Tedel

3. Porque simplifica la edición de cada una de las partes del sitio.

Esto no tiene sentido. Cualquiera que use Sass o less, te dirá que una de las mayores ventajas es poder tener una gran cantidad de archivos —que luego se compilan de la forma que uno quiera, incluso si es todo es uno solo— para mantener un orden mucho más cómodo.
¿O acaso en tu cocina tienes todos los trastos, vajilla, cubiertos y demás todos dentro de una sola cosa?.

Iniciado por Tedel

- ¿En qué archivo habías ordenado el formato de los párrafos de las tablas?

Si el párrafo aparece en la tabla de una sección, estará en el archivo CSS de esa sección. Ahora sabiendo ya el archivo, es más fácil encontrarlo en uno de 600 líneas que en uno de 150.

Iniciado por Tedel

- ¿Cómo ordenó el CSS el diseñador anterior?

Esto no tiene que ver ni con CSS, ni con usar muchos o pocos archivos. Porque esto pasa hasta cuando tu mujer mete fotos en el ordenador.
Además, la misma pregunta te la puedes hacer sea un sólo archivo o varios. No veo yo que tenga mucho que ver con el tema.

Iniciado por Tedel

- ¿Hay que editar un archivo para el CSS del navegador de escritorio y otro para el CSS del navegador móvil? ¿Cuál es cuál?

Yo suelo poner media-queries en el mismo archivo. Aún si no fuese así, los nombres de los archivos tendrán un nombre en referencia a su contenido, digo yo.

Iniciado por Tedel

Siempre, siempre, siempre ten un solo archivo para el CSS de tu web. Es lo mejor que puedes hacer.

¿Sabes de las restricciones de IE en cuanto a archivos .css? Porque "siempre, siempre, siempre" supongo que no dejará sitio para "y síes".