Mejores prácticas CSS para el sitio web a gran escala

Question

Hasta ahora, mi experiencia en diseño web ha sido con sitios y blogs de muy pequeña escala (donde no hay mucha diversidad en el diseño de la página). Sin embargo, ahora estoy empezando a abordar algunos sitios web de mayor escala y quiero comenzar con el pie derecho creando un archivo/estructura css escalable y mantenible.

Actualmente, mi método para aplicar estilos a páginas web es dar a cada página web una identificación distinta en el cuerpo, y luego, cuando estoy diseñando una página de mi regla CSS se verá así:

body#news section .top { rules } 

Seguramente hay un enfoque más sostenible para la aplicación de CSS para un sitio web a gran escala?

Answer 1

Evite dar a cada página una etiqueta body con una ID única. ¿Por qué? Porque si una página necesita un estilo único, debe tener su propia hoja de estilo.

que a menudo tienen un main.css hoja de estilo, hojas de estilo para diferentes porciones similares de mi página web (como un administration.css para una sección de administración, asumiendo las páginas en la sección de administración compartieron un aspecto similar), y luego dar ciertas páginas únicas sus propias hojas de estilo (como signup.css).

Luego incluyo las hojas de estilo en orden de menos a más específico, porque si se encuentran dos reglas idénticas, se usará la regla en la hoja de estilo más recientemente incluida.

Por ejemplo, si mi main.css tenían:

a { color: red; } 

... y por alguna razón, yo quería que mi página de registro para tener enlaces azules:

a { color: blue; } 

La segunda regla se sobreponen a los primero si mi signup.css se incluyó después de main.css.

<link rel="stylesheet" href="/stylesheets/main.css"> 
<link rel="stylesheet" href="/stylesheets/signup.css"> 

Answer 2

Lo que debe buscar es que la mayoría de las páginas tendrán aspectos de diseño similares, como la tipografía y formato básico que significa que no necesita aplicar y la identificación de la etiqueta del cuerpo.

Debe probar y usar identificadores que describan la estructura de su página (encabezado, pie de página, barra lateral, etc.) que pueden reutilizarse en cada página donde sea necesario. Solo cuando diseñe áreas específicas para noticias o proyectos, etc., es cuando debería comenzar a usar id = noticias.

Al final del día no hay una respuesta correcta o incorrecta. Intente mantener estilos de CSS resuable mientras trata de no sobrecargar su marcado con etiquetas innecesarias.

Answer 3

Utilice siempre clases para CSS. Esto le permitirá reutilizar más de su código. Como puede tener múltiples clases duplicadas por página, esto le permite crear realmente un código pequeño.

CSS analiza de derecha a izquierda. Así, en el ejemplo anterior se encuentra el selector en este orden:

elementos con el nombre de clase .top elementos con el nombre de clase .top que se encuentran en la etiqueta de sección elementos con el nombre de clase .top que se encuentran en una etiqueta de sección también figura en el elemento #news ... etc.

Mírelo de esta manera, realmente debe tratar de mantener sus selectores lo más cortos posible. Cree un estilo base para .top, luego, si necesita escribir algo personalizado para la sección #news, puede usar #news .top.

Siempre trate de usar las reglas más cortas posibles.

margin:0 5px; 

sobre

margin:0 5px 0 5px; 

Es básico, pero usted se sorprenderá de cómo muchas personas no hacen esto.

también saber lo que puede en corto:

ex: font:bold 12px Helvetica, Arial, sans-serif; 

Una cosa que es muy útil si es Alfabetice sus reglas. Especialmente si usa CSS3 -webkit- y -moz- properties. Tengo un montón de presión de regreso en este caso, pero trabajo con más de 12 desarrolladores y he visto

.myClass { color:#f00; /* more stuff */ color:#fff; } 

Si son alfabético a continuación, usted evitará la duplicación de código.

Answer 4

En resumen las respuestas anteriores y dar algunos comentarios adicionales:

1. Se puso todo en un solo CSS y utilizar los ID de cuerpo único para los ajustes específicos de la página. Este enfoque acelera su sitio porque está guardando solicitudes HTTP (el caché del navegador almacena solo un archivo)
2. Tiene un CSS por página, más uno global para ocuparse de la configuración global, encabezado, pie de página y cualquier otro elemento que aparezca en todos lados. Esto es más amigable si tiene más de un desarrollador trabajando, menos posibilidades de conflictos debido a las actualizaciones del mismo archivo. Incluso si usa un sistema de control de versiones como SVN (y con un gran sitio que debería), siempre es más seguro tener diferentes archivos.
3. Puede obtener lo mejor de ambos mundos al separar en archivos, y luego usar un minificador para combinarlos y comprimirlos todos en un CSS "compilado". Esto es más complicado, debe ajustarse a su flujo de trabajo y dificulta la depuración frontend. Ver Any recommendations for a CSS minifier?.

Answer 5

hay una respuesta muy informativo y detallado aquí: Managing CSS Explosion

también podría retirar orientado a objetos CSS: http://www.slideshare.net/stubbornella/object-oriented-css

o CSS sistemas: http://www.slideshare.net/nataliedowne/css-systems-presentation