Tecnología y Coaching para Emprendedores

Mejores Prácticas para Crear un Código CSS Eficiente

css

Una de las maneras de conseguir sitios web de alto rendimiento es mediante la optimización del código CSS, pues los beneficios se verán tanto desde el lado del cliente, en conexiones lentas y navegadores antiguos, como desde el lado del servidor, en hostings compartidos con un alto volumen de recursos usados.

Es importante tener en cuenta que si trabajamos con un CMS, como WordPress, Drupal o Joomla, cada vez que instalemos un plugin habremos de revisar de que modo afecta al rendimiento de nuestra web, al menos desde el punto de vista del CSS, pues muchos plugins traen incorporado su propio CSS y no siempre está optimizado.

Cómo Optimizar nuestro Código CSS

A continuación vamos a ver algunas reglas básicas a tener en cuenta cara al código CSS para conseguir crear hojas de estilo eficientes desde el punto de vista del rendimiento web.

Especifica el alto y ancho de las imágenes

Uno de los puntos que mejoran notablemente el rendimiento web es el especificar el ancho y alto de nuestras imágenes. Esto lo podemos hacer tanto en nuestra hoja de estilos CSS como en la etiqueta img de HTML con los atributos height y weight.

Los selectores universales son los menos eficientes

Por increíble que parezca, los selectores universales son los menos eficientes de todos, mientras que los IDs son los más eficientes. Aquí puedes ver el orden de más a menos rápidos:


#content  {}              /* ID (el más rápido) */
.index #slider {}         /* ID */
.footer {}                /* Clase */
ul li a.nav {}            /* Clase */
ul {}                     /* Etiqueta */
ul li a }                /*Etiqueta */
* {}                     /* Selector universal (el más lento) */
#content [title='index'] /* Selector universal */

El principio de derecha a izquierda
Es muy importante entender que los navegadores web interpretan el código de derecha a izquierda. Así, si ven ul > li a[title="index"] , lo primero que van a tener en cuenta es a[title="index"].

Cara a temas de eficiencia y rendimiento web, es importante eliminar los selectores que no utilizamos, así como optimizar aquellos que ya están en uso.

Pon las etiquetas style sólo en el header

Soy la primera que a veces por pereza añado style a alguna etiqueta del HTML, lo que a la larga lleva a que el código no esté optimizado y el rendimiento web decaiga. Pon todas las etiquetas style en el header y resiste la tentación de poner algunas sueltas por el body.

Selectores descendientes

Aquí ya ni te cuento como se consumen recursos cara a rendimiento web, evita el uso de muchos selectores descendientes, o verás que el rendimiento de tu web cae en picado. Aquí un ejemplo de malas prácticas:

ul li span a 

Cuidado con el uso de los ID’s

No hagas esto:

li#main_nav

¿Motivo? Porque los ID’s a diferencia de las clases son únicos y no necesitas que te refieras a ellos de este modo. Es más eficiente utilizar directamente #main_nav.

Reduce el uso de los selectores CSS3

Si bien los selectores CSS3, como :first-child, nos facilitan mucho la vida, hay que decir que desde el punto de vista del rendimiento web son pésimos, pues consumen muchos recursos. Mi consejo es usarlos lo mínimo necesario, para conseguir un equilibrio entre rendimiento y código.

Aprovecha las ventajas de cascada del CSS

Otra de las ventajas a tener en cuenta del CSS cara a crear un código optimizado cara a rendimiento web es el uso de las propiedades de cascada. Así, no es necesario usar este código:

nav ul li a {font-weight:700;}

Podemos aprovechar las propiedades de cascada de CSS y escribir directamente:

nav  {font-weight:700;}

Este código es mucho más eficiente que el anterior, al evitar el excesivo uso de los selectores descendientes.

Eficiencia versus semántica

Dicho esto puede parecer que nos hemos de olvidar de las clases y empezar a poner IDs por todas partes. Esto sería un error, pues la eficiencia no se ha de ver reñida con la semántica web, lo importante es encontrar un equilibrio entre ambas y tener en cuenta cuáles son los factores que nos ayudan a crear sitios web semánticos a la vez que eficientes.


Comentarios

  • alberto

    Como siempre de diez tus aportes!

  • V. Edwin

    Excelente aporte!! lo tendre en cuenta…

  • Andrés Ballen

    Hola Sandra, recien descubro este blog, muy interesantes tus aportes, desde hoy tienes un seguidor más!

  • Jordi

    Buen artículo Sandra. Acerca del uso de selectores ID, hay que mencionar que algunos desarrolladores prefieren no utilizarlos por varias razones, hay cierta controversia en el tema.

    Por un lado la guerra de la especifidad (el valor o peso que tiene cada selector), usar ID’s puede contribuir a que hayan “peleas” de selectores; por otro lado usando ID’s cerramos las puertas para que nuestro código sea reutilizable, aun cuando pensamos que solo vamos a aplicar un estilo en un elemento, a veces llega el momento de aplicarselo a otro y nos vemos en el dilema de repetir código o duplicar selectores. Mi opinión personal es que para grandes proyectos es mejor utilizar class siempre que sea posible.

    En cualquier caso, recomiendo utilizar CSSLint para verificar que nuestro css tiene buena pinta (disponible online y en descarga para la mayoría de IDE’s y editores)

  • fabian

    Sandra me gustaria saber como medis el rendimiento de un CSS.
    Cuando afirmas ‘Especifica el alto y ancho de las imágenes’ porque de esa manera es mas eficiente, me gustaria entender el trasfondo o tener una referencia al porque del asunto.
    O cuando hablas de reducir selectores CSS3 (que supongo que en realidad te estas refiriendo a las pseudo clases). Como llegas a dichas conclusiones?

    • Sandra

      Si utilizas GTMetrix verás que estos son puntos que te indica para mejorar el tiempo de carga de la web y con ello el rendimiento del CSS.

  • Nirmal

    Buen post Sandra ;-)

    una cosa,
    “Eficiencia versus semántica”
    El hecho de añadir ids no implica que haya que quitar clases.
    ¿Y si nos ayudamos de los comentarios?

    /* BLOQUES PRINCIPALES (.main_block) */
    #block-notice, #block-image, #block-newsletter {
    background-color: #F8F8F8;
    border: 1px solid #000000;
    }

    Eficiente y semántico, es otra opción más.

  • toni

    Hola, genial el artículo!

    Una duda, si se quiere modificar los enlaces de un elemento ul
    ¿Sería mejor usar, ul a{..}, li a{..} ?

    Y otra duda, con el tema de preprocesadores usa mucho el tema de selectores descendientes, ¿para estos casos vendría mejor poner css directamente?

    Un saludo.