Geek the Planet


CSS no image

Published on agosto 19th, 2008 | by Angelfire

0

How To: Optimizar nuestras CSS

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).

Desde hace ya algún tiempo las CSS han venido cogiendo una fuerza impresionante y podria atreverme a decir que los sitios hechos en XHTML están construidos un 70% en base a las CSS, por esta razón es importante tener nuestras CSS, limpias, organizadas y optimizadas.

Via Smashing Magazine me encuentro con estos 7 tips para tener nuestras CSS optimizadas.

  1. Use Abreviaciones: Diria yo este es el primer tip a tener en cuenta, es la manera más básica a tener en cuenta a la hora de empezar una buena codificación, además de ayudarnos con una codificación eficiente nos ayuda a reducir sustancialmente las líneas de código.
    Margin, border, padding, background, font, list-style, e incluso outline son las propiedades que permiten usar abreviaciones. Un ejemplo de como usar abreviaciones:

    
    {
    margin-top: 10px;
    margin-right:  20px;
    margin-bottom: 30px;
    margin-left: 40px;
    }
    

    La manera de abreviar estas cuatro líneas es:

    
    {
    margin: 10px 20px 30px 40px;
    }
    

    Un par de tips más, sacados de mi baraja personal, que estoy seguro que muchos usan:

    
    {
    background-color: #ffffff;
    color: #ffccbb;
    }
    

    La manera optima sería:

    
    {
    background-color: #fff;
    color: #fcb;
    }
    

    En las propiedades margin, padding, line-height, etc, es posible ahorrarse un par ahorrarnos un par de bits cuando la distancia es 0.

    
    {
    margin: 10px 0px;
    padding: 0px 0px 0px 0px;
    }
    

    Optimizado sería:

    
    {
    margin: 10px 0;
    padding: 0;
    }
    

    Este es sólo un ejemplo de como podemos mejorar nuestro código, una guía mucho más completa la podemos encontrar en CSS Shorthand Guide gracias a Dustin Diaz.

  2. Hacks para los navegadores: Estos hacks son comunmente usados para IE, el navegador más problematico de toda la internet. Debido a la diversidad de navegadores y las diferencias entre versiones es muy útil hacer uso de estos si queremos que la apariencia de nuestras páginas en IE, sea igual que en el resto de los navegadores que soportan los estándares. El uso de comentarios condicionales para la inclusión de hacks IE es apliamente aceptado e incluso recomendado por el equipo de desarrollo de IE microsoft. Algunos ejemplos de la Utilización de hacks:
    Gracias a este primer hack, es posible incluir una hoja de estilo unica y exclusivamente para IE 6.

    
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" mce_href="ie.css"><![endif]-->
    

    Con este otro hack es posible incluir propiedades para 3 navegadores diferentes:

    
    {
    background: #FFFFFF   /* Firefox y los demás */
    *background: #000000 	/* IE7 e inferiores */
    _background: #CCCCCC; 	/* Sólo IE6 */
    }
    

    Una explicación mucho más amplia de como utilizar Hacks CSS la podemos encontrar gracias a Maestros del Web.

  3. Usar sabiamente los espacios en blanco: Usar sabiamente los espacios en blanco, tabulaciones y saltos de línea es bueno si queremos que nuestros códigos sean facilmente entendibles, sin embargo debemos tener en cuenta que todo esto ocupa espacio y agrega peso a nuestra CSS. Según esta breve explicación todos los ejemplos de CSS que mostré anteriormente no están optimizados, yo recomendaria diagramar de esta manera en un comienzo, pero después de tener todo funcionando lo ideal es eliminar los espacios en blanco, saltos de líneas y tabulaciones de la siguiente manera:
    
    {
    background:#184574 url(image.png) repeat-x top left;
    color:#333;
    text-align:center;
    font: 12px arial,helvetica,verdana,sans-serif;
    margin: 0;
    padding: 0;
    }
    

    La manera optimza de presentar este código es:

    
    {background:#184574 url(image.png) repeat-x top left; color:#333; text-align:center; font: 12px arial,helvetica,verdana,sans-serif; margin: 0; padding: 0;}
    

    Usar los espacios en blanco es una buena práctica si queremos administrar rapidamente nuestra CSS, sin embargo y como dije anteriormente todos estos espacios ocupan espacio que aumentan el peso de nuestro archivo.

  4. Optimizar los frameworks y resets: Como explique en un post anterior los frameworks CSS son una buena opción para realizar facilmente nuestros proyectos, si optaste por usar alguno, lo recomendable es leerte concienzudamente la documentación, además también es bueno leerse cada línea de código para buscar pequeños errores, incoherencias y tal vez duplicación de algunas reglas.
    Si vas a utilizar CSS reset también es recomendable leerte y entender como funciona, recordemos que un CSS reset lo que hace es formatear los valores que por defecto guardan los navegadores como margin, padding, line-height, etc, es muy util sin embargo es posible encontrar declaraciones que nunca usaremos como <pre>, <code>, <sub>, <dfn>, <var>.
    Usar frameworks y resets css ayuda a mantener nuestro trabajo optimizado, sin embargo no podemos dejar todo el trabajo a los desarrolladores de estos, debemos hechar una revisada a cada línea de codigo.
  5. Separar nuestra CSS: Otra de las maneras de optimizar nuestra CSS en varias partes, esta “técnica” la use para la creación de este theme, lo que hice basicamente fue tener dividir la CSS en porciones, general.css, reset.css, plugins.css, de esta manera es posible tener nuestro código absolutamente optimizado para una reutilización en el futuro, como experiencia puedo comentar que con la división que hice, fui capaz de hacer otro theme con la misma estructura pero diseño gráfico totalmente diferente en tan solo 20 minutos. Sin embargo y como casi todo, tiene un pero, el hacer esta división hace que la carga sea mucho mas lenta que si todo estuviese en 1 sólo archivo. Un ejemplo de como hacer esta división (esta división no lleva una regla en específico, así que el ejemplo que mostraré la hice a la medida):
    Esto va en la hoja style.css

    
    {
    font-size:12px;
    font-family: "Lucida Grande", Lucida, Arial;
    }
    

    Y esto va en la hoja del theme, donde van las imagenes, colores, backgrounds, etc

    
    {
    background: #f3f3f3 url(images.png) repeat-x;
    color: #333;
    }
    

    De esta manera cuando quiero realizar un cambio en el diseño, sólo tengo que modificar 1 hoja de estilo y así no tocar la hoja que lleva la estructura principal.

  6. Documentar el trabajo: Este tip deberia aplicarse en todo, no hay nada más tedioso que encontrarse con un trabajo que no ha sido documentado, esto es practicamente como empezar desde cero, por esta razón es muy importante documentar tanto nuestra CSS como el HTML, todo proyecto está sujeto a cambios, además de eso, es posible que no seamos las unicas personas que vayamos a tocarlo y trabajar con él. Incluso, lo más seguro es que en un futuro haya que hacerle modificaciones y sin lugar a dudas nadie quiere sentirse como un extraño trabajando con su propio código, así que lo más recomendado para tener nuestro código optimizado es incluir comentarios breves explicando que es cada cosa.
    Acostumbro normalmente hacer comentarios en el html cuando abro y cierro determinado DIV, y en el CSS marco claramente cuando voy a empezar a definir las propiedades de cada elemento, así:

    
    <!-- WRAP -->
    <div id="wrap"><!-- CONTENT -->
    <div id="content">contenido</div>
    <!-- /CONTENT --></div>
    <!-- /WRAP -->
    

    Y para el CSS los comentarios son más sencillos:

    
    /*GENERAL*/
    @import "css/reset.css";
    body{
    font-size:12px;
    font-family: "Lucida Grande", Lucida, Arial;
    }
    

    De esta manera no me confundo a la hora de cerrar los divs y cuando quiero realizar alguna modificación sólo tengo que dirigirme a la porción de código deseada marcada con el comentario.

  7. Hacer uso de compresión: Con el crecimiento y la masiva utilización de CSS las hojas de estilo han pasado de pesar un pesar un par de KB a pesar muchisimo más, incluso llegar a cientos de KB, gracias o debido a esto, se han creado herramientas que permiten optimizar y comprimir nuestras CSS. Aplicaciones como CSSTidy y YUI Compressor permiten hacer algunas de las optimización que mencione anteriormente como: quitar tabulaciones, espacios en blanco, propiedades repetidas, incluso buscan posibles propiedades donde es posible aplicar abreviaciones.
    Como es claro estas aplicaciones no son perfectas, sin embargo reducen al mínimo nuestros errores; personalmente no puedo recomendar al 100% estas aplicaciones, hace poco días probé una de estas, y pues son realmente buenas comprimiendo, pero por alguna razón trabajan mal con las imagenes y te las botan del documento, si haces uso del tip número 5, de seguro todo andará bien, definiendo todas la propiedades estructurales en una sola CSS y usando uno de estos compresores, obtendrás el máximo de optimización.

Estoy seguro que teniendo en cuenta los anteriores tips, podrán tener un diseño mucho mas limpio y optimizado, además podrá ser reutilizado en un futuro, son altamente recomendables, yo hago uso casi a diario de ellos. Muchos pensarán que tanto para ahorrar un par de KBs… creanme, ese par de KBs son importantes, teniendo en cuenta que muchos usuarios visitan nuestros sites y es importante que la carga sea rápida.

Leer Más: 7 Principles Of Clean And Optimized CSS Code
List of CSS Tools
Ask the CSS Guy

Tags: , , ,


About the Author

Systems Engineering, Computer Systems Specialist, Social Engineering Specialist. Social Media Analyzer. Usability and SEO enthusiasm (Este es mi perfil de Twitter...)



Comments are closed.

Back to Top ↑