Cuando nos enfrentamos a archivos CSS y JavaScript cada vez más grandes en proyectos de sitios web, ya sea para desarrollo secundario o análisis del navegador, sus códigos deben optimizarse, pero la optimización no significa simplemente comprimir o reducir el tamaño del archivo. Una organización clara y una alta eficiencia operativa son los resultados que queremos. Entonces, ¿qué métodos existen para mejorar nuestro código CSS? Echemos un vistazo a algunas sugerencias a continuación.
1. El uso
de abreviaturas puede acortar su tiempo de trabajo y reducir el tamaño de sus archivos.
Establezca valores diferentes para diferencias similares:
¿Ver copia simple en el portapapeles?
pag {
margen superior: 10px;
margen derecho: 20px;
margen inferior: 30px;
margen izquierdo: 40px;
}
pag {
margen superior: 10px;
margen derecho: 20px;
margen inferior: 30px;
margen izquierdo: 40px;
}
Utilice abreviaturas:
¿Ver copia simple en el portapapeles?
px
40 px;
Echemos un vistazo a las abreviaturas de fuentes de uso común.
Consulte la Guía de taquigrafía CSS (inglés) y CSS eficiente con propiedades taquigráficas (inglés) para obtener más información sobre las propiedades taquigráficas.
2. Evite el uso de trucos
Blog de Jon Hick hicksdesign.co.uk/journal Usar comentarios condicionales del navegador
Hack es algo malo, definirá el mismo código para diferentes navegadores, lo que hará que CSS sea engorroso. Ahora sabemos usar comentarios condicionales en lugar de hacks, se aceptan en IE6 e IE7, e incluso el equipo de IE recomienda su uso. Utilice comentarios condicionales para servir código CSS que sea específico de las funciones del navegador. Por lo tanto, se utiliza un código CSS central más pequeño para servir a los navegadores que cumplen con los estándares. Solo se descargará cuando se produzcan las condiciones requeridas (como archivos CSS adicionales). !
Echemos un vistazo a un ejemplo de código que utiliza comentarios condicionales en IE6:
¿Ver copia simple en el portapapeles?
<!--[si IE 6]>
<enlace rel="hoja de estilo" tipo="texto/css" href="ie6.css">
<![endif]-->
<!--[si IE 6]>
<enlace rel="hoja de estilo" tipo="texto/css" href="ie6.css">
<![endif]-->
Este código hace que IE6 descargue ie6.css adicional para analizar su código CSS dedicado. De manera similar, si su objetivo es IE7, simplemente reemplace 6 y 7 anteriores.
3. Utilice espacios en blanco,
ya sea para su propia lectura o desarrollo secundario, debe mantener una buena legibilidad del CSS.
No le recomendamos que elimine todo el formato de los espacios en blanco, como tabulaciones, saltos de línea, espacios, etc., para obtener un archivo CSS más pequeño. Se recomienda que el código anidado tenga una sangría con una tabulación y que todos los atributos estén en una línea separada.
Comparando las imágenes de arriba y de abajo, ¿qué formato puede ayudarle a ahorrar más tiempo en las modificaciones? Los espacios en blanco le facilitarán la gestión de su código.
4. Eliminar marcos redundantes y restablecimientos
Restablecer las reglas utilizadas por el marco CSS 960 Grid System de Nathan Smith.
Si elige utilizar un marco CSS, incluido uno que escribió usted mismo, si verifica el código, definitivamente encontrará que algunas de las reglas contenidas en el marco no se aplican a su actual. El archivo se puede eliminar.
Lo que se puede pensar es restablecer. El restablecimiento utilizado por YUI Grid CSS y el restablecimiento de Eric Meyer son actualmente muy populares. Los restablecimientos pueden eliminar los estilos predeterminados de diferentes navegadores para que la página se comporte de manera consistente en todos los navegadores. Pero generalmente contienen todos los atributos que necesita un sitio web grande. Algunos atributos como pre, code, sub, dfn, var, etc. no se utilizan en absoluto para sitios web normales. Elimine aquellos que no pueda utilizar. ¡Eric Meyer te animaría a hacer lo mismo!
Framework y reset le ayudarán mucho en su trabajo, pero si no elimina aquellos usos que no necesita, reducirá la eficiencia y legibilidad de sus páginas.
5. CSS extendido
Stopdesign.com CSS por Doug Bowman Utilice selectores especiales para capas
Otra forma de optimizar su código es declarar propiedades específicas para cada capa.
6. Documenta tu trabajo
En la colaboración en equipo, es extremadamente importante comunicar los estándares de escritura, los estándares de codificación, los métodos de anotación y el estilo. Las reglas se basan en un enfoque coherente de las normas. Esto evitará que otros dupliquen el trabajo que usted ya ha realizado y evitará la expansión del código.
7. Utilice la compresión
Para ahorrarle al navegador más tiempo de descarga y carga, la compresión es una buena solución, pero solo al publicar. YUI Compressor y CSSTidy son expertos en esta área. Pueden eliminar código redundante y verificar errores cuando las propiedades se superponen entre sí.
Muchos editores populares, como BBEdit, TextMate y TopStyle, pueden ayudarle a formatear su código CSS como desee. También puedes usar PHP para procesar tu CSS a través de la tecnología de compresión del servidor. Puede encontrar más herramientas CSS de optimización y compresión de CSS.
En un momento dado, estos procedimientos minimizaron la aparición de errores, pero no fueron perfectos. Del mismo modo, es mejor no utilizarlos en archivos que contengan hacks de CSS. Ésta es otra razón para almacenar los hacks en archivos separados.
Finalizar
------------------------------------------------- ----------------------------------
El código limpio y optimizado no se trata sólo del tamaño del archivo, sino también de mantenibilidad y usabilidad. Los principios anteriores no son sólo para CSS, también se pueden aplicar a HTML, Javascript y otros lenguajes de programación. Los archivos CSS no son sólo para presentarlos al usuario final de su sitio web. Los principios anteriores pueden ayudar tanto a la experiencia del usuario como a la experiencia del desarrollador. Aplique estos principios a sus proyectos futuros y seguramente obtendrá resultados significativos.