Organización de CSS para sitios grandes

Question

Tengo una pregunta de diseño más general relacionada con CSS y sitios web. Sé que es una buena informática para normalizar el código tanto como sea posible y evitar la duplicación. Por lo tanto, sería lógico para mí, al menos en teoría que uno haría lo mismo al organizar hojas de estilo para un sitio web.

Así que cuando comencé en mi sitio web más reciente comencé con esta misma filosofía. Funcionó bien para mis primeras páginas y mientras solo estaba probando en Firefox ...

Sin embargo, a medida que mi sitio creció y añadí páginas, diseños múltiples (y navegadores) encontré que esta filosofía se rompió rápidamente. En última instancia, con el tiempo me he trasladado a la siguiente enfoque:

1. Tengo un archivo CSS nivel superior muy limitado para cada diseño de la página principal de mi sitio, que contiene clases de estilos bien conocidos a través de esa disposición, así como css para la página maestra

2. Guardo estilos de CSS específicos para cada página.

3. sigo estilos específicos de CSS para elementos de página integrable/controla

acabé teniendo esta ruta de manera que podía confiar en que los cambios en una página no romper accidentalmente otras páginas en el sitio resultante en muchos errores de regresión.

¿Qué hacen las demás personas cuando se acercan a esto? ¿Es este un enfoque bueno/malo? Veo desventajas en este enfoque, algunas páginas son muy similares, por lo que hacer un cambio significativo significa cambiar más código CSS, también siento que los profesionales superan esto a diario.

¿Qué piensan otros desarrolladores sobre esta filosofía? ¿Bueno? ¿Malo? Sólo curiosidad realmente ...

Para mí es una de esas situaciones en las que sopesé la diferencia entre mis ideales (trato de mantener un código muy ajustado) y la frustración de cambiar los requisitos en una página rompiendo otras 20 páginas porque cambió un ancho de div por unos pocos píxeles (alterando un flotador en otra página, por ejemplo).

Gracias por su entrada

Answer 1

Al igual que cualquier otro tipo de código, si está duplicando su código CSS por todo el lugar, que está buscando problemas. El mantenimiento va a ser cada vez más difícil a medida que pasa el tiempo.

La mejor manera de no tener problemas con un cambio en una página que afecta negativamente a otras páginas es tener una guía de estilo que impulse su diseño y diseño de interfaz de usuario. Si su guía de estilo define las clases de HTML y CSS que se usarán para un elemento de diseño dado, todas aparecerán siempre iguales en todas las páginas. Si es necesario cambiar el elemento de una página específica, cambie el HTML para usar una clase diferente y luego cree un nuevo CSS para esa clase (y agréguelo a su guía de estilo para su reutilización). La guía de estilo también le permite asegurarse de que su HTML sea uniforme para todos los desarrolladores que trabajan en el sitio, lo que significa que hay menos posibilidades de que los cambios CSS causen problemas a medida que desarrolla más.

Otro punto que debe recordar con CSS es que cada uno de esos archivos .css que crea y referencia en una página es una solicitud HTTP. Si cada página y control tiene su propio archivo CSS, realmente está perjudicando la experiencia de sus usuarios en el sitio empantanando el tiempo total de descarga de solicitudes para cada solicitud de página. También hace que sea menos probable que su navegador guarde en caché el.css porque el caché tiene una cantidad limitada de espacio, por lo que si continúa llenándolo con más y más archivos .css, se eliminarán de la caché más rápidamente. Sí, puede combinar archivos .css programáticamente en un controlador para que su página solo realice una solicitud por página, pero luego tiene una sobrecarga adicional del servidor y el problema de almacenamiento en caché aún permanece (a menos que tenga una sola solicitud para todos los archivos .css en su sitio , que de todos modos derrota el propósito de lo que estás tratando de hacer aquí).