En la comunidad de desarrolladores, mucho de lo que aprendes viene de foros, charlas, proyectos compartidos… pero, en cuanto buscas “algo más”, ves que hay muchas cosas esenciales de las que no se habla y no se tienen en cuenta actualmente.

(En esta entrada no busco hacer una explicación exhaustiva, pero daré ideas y ejemplos que se pueden expandir en caso de que te interese alguna idea concreta)

La especificidad dentro de un selector descendiente

Depende de como sea de grande nuestra web o aplicación, usar solo elementos sueltos puede salir caro:

#nav a { }

El navegador buscará, en este caso, todos los enlaces que haya en la página antes de ajustarse a aquellos que formen parte de #nav. Una forma mejor de hace esto, sería añadiendo un selector más específico, usando clases o identificadores en nuestro elemento a.

#nav a.navigation-link { }

Los selectores universales

Los selectores universales son: *, [disabled], [type="text"]… Estos hacen que el navegador compruebe todos los elementos del DOM, por lo cual, hay que evitarlos y buscar otras soluciones.

Por ejemplo, el selector * sirve para usar propiedades como box-sizing. Sin embargo, esto puede ser mejorado especificando más, de hecho, usar muchos selectores, en este ejemplo, agiliza la carga de este proceso, aunque pueda parecer lo contrario.

* { box-sizing: border-box; }
tiene una mayor carga que
html, body, div, article, aside... { box-sizing: border-box; }

El navegador lee los selectores de derecha a izquierda

Esto complementa el tema de la especificidad.

Es un punto esencial que no es tan conocido como debería. El navegador tiene una forma de leer los selectores, y es de derecha a izquierda.

body .container ul li a { }

¿Pensabas que primero buscaría todo el body para llegar a ese enlace (a)? Primero busca el elemento de la derecha y sube hasta que el padre es único.

El layout y sus propiedades

El layout dentro de CSS es un término que se refiere al cálculo de cuánto espacio requiere un elemento en pantalla. Modificar alguna propiedad del layout, significa que el navegador comprobará el resto de elementos y recompondrá la página, volviendo a mostrar los elementos modificados y componiéndolos como el resto de elementos.

Las propiedades que afectan al Layout son width, height, top… y, por eso, son calculadas y, sus cambios, recalculados. Esto conlleva tiempo de carga y consumo. Hay propiedades como transform que aligeran este proceso.

Hay propiedades más pesadas que otras

Hay propiedades CSS que son más caras en su uso frente a otras, más pesadas, y que por ello hay que usarlas con moderación.

border-radius

box-shadow

transform

filter

:nth-child

position: fixed

Tengo que aclarar que no hay que dejar de usar este tipo de propiedades, pero sí tener esto en cuenta y pensar en alternativas, en caso de que las haya.

Orden de los selectores

El orden de los selectores en HTML no importa, el orden de los selectores en el archivo CSS o en el <style>, sí.

<style>

.red { color: red; }

.blue { color: blue; }

<style>

<div class="blue red">Este párrafo será azul</div>

<div class="red blue">Este párrafo también será azul</div>

Ambas sentencias serán de color azul ya que el selector .blue se sitúa más abajo dentro del <style>, y por eso tiene una prioridad más alta. El orden de las clases dentro del HTML no afecta.

En Marketing Aparte tenemos en cuenta todas y cada una de las partes de un desarrollo web a medida para que las páginas de nuestros clientes estén optimizadas.

¿Quieres conocer nuestros proyectos? Haz click aquí
¿Quieres ver nuestro departamento Web? Haz click aquí

¿Hablamos?
close slider

¿Hablamos?

Déjanos tus datos y te escribiremos en cuanto tengamos un hueco:




¿Quieres nuestra plantilla comercial?

Con tus datos podremos enviarte nuestra plantilla de plan comercial 2018/19 por correo electrónico

Formatos: Power Point, KeyNote, PDF.