CSS: 5 consejos para optimizar tus estilos

Existen mil y una formas de utilizar CSS… Es por eso que, en muchas ocasiones, llegamos a hacerlo de manera tal que simplemente cumpla con lo que se adecúe a nuestro diseño, sin pensar realmente cómo optimizarlo, sólo porque “así funciona”. Sin embargo, hay que tener en cuenta que si no lo mejoramos, será difícil reutilizarlo, y en el peor de los casos podemos causar que nuestro sitio web sea lento y la experiencia de quienes nos visitan no sea la mejor. Por eso, a continuación te mostraré cinco casos y consejos que puedes tener en cuenta al momento de empezar a crear tus estilos.

Declaraciones y Reglas

Es muy común ver varias declaraciones asignadas a un sólo selector, o un conjunto de reglas. Por ejemplo:

.btn-login {
  background: green;
  padding: 1em;
  display: inline-block;
  color:white;
}

En el código anterior, se presentan una serie de problemas que podemos solucionar de una forma más eficiente. Primero, la clase .btn-login describe un caso específico que hace que sea difícil reutilizarlo en un futuro, pues sólo tenemos un botón de login en nuestro sitio. Por otro lado, el conjunto de declaraciones es demasiado monolítico: se encarga de todo lo relacionado con este botón, mezclando responsabilidades estructurales y cosméticas. Lo ideal sería crear tres conjuntos de reglas, más pequeñas, con un menor número de declaraciones bien definidas y encapsuladas; esto las hará combinables, y podrás componer con ellas de forma modular. Así, si tenemos pensado utilizar más botones en nuestro sitio, podemos reutilizar estas mismas clases sin tener que crear nuevos selectores con sus propias reglas, y ahorrarnos código.

.btn {
  display: inline-block;
}
.btn--small {
  padding: 1em;
}
.btn--positive {
  background: green;
  color: white;
}

Selectores por Regla

 

/* 1 selector por regla */
.btn {
  display: inline-block;
}
/* 2 selectores por regla */
h1, .u-h1 {
  font-size: 3em;
}

Tener muchos selectores por regla significa que estamos aplicando exactamente los mismos estilos a selectores diferentes. Si queremos que nuestro código sea manejable, te recomiendo que el número de selectores por regla sea tan cercano a uno como sea posible. Para que esto se cumpla, una posible solución sería crear un selector con clase única para manejar todas las eventualidades, haciendo que de esta manera nuestro CSS sea más pequeño y contemos con selectores reutilizables.

input type[text],
input type[email],
input type[password],
textarea {
  background: #fff;
}

Dicho esto, el siguiente ejemplo sería una mala práctica, puesto que mientras más inputs se agreguen al sitio, la lista de selectores seguirá creciendo a un punto que tal vez se vuelva inmanejable. La solución sería asignar todos estos estilos a una sola clase reutilizable. De esta manera, no importa si es un input de correo electrónico, texto o password: no necesitamos mantener una implementación específica de una lista de selectores.

.c-input-text {
  background: #fff;
}

En ocasiones, utilizar muchos selectores por regla es por miedo a utilizar clases. Esto hace que como desarrollador crees y mantengas largas listas de selectores encadenados exactamente a las mismas declaraciones. Sin embargo, hay que tener en cuenta que si adoptamos una arquitectura basada en clases, se pueden empezar a reciclar reglas de una manera mucho más concisa y práctica.

Selectores descendentes

No es muy recomendable utilizarlos y, de ser necesario, lo ideal es hacerlos tan cortos como sea posible, debido a que nos puede traer una serie de problemas. El primero de ellos es que mientras más largo sea, la especificación se verá incrementada; lo mejor es que la especificación se mantenga tan baja como sea posible. Por otro lado, disminuye la portabilidad, pues es difícil mover estilos alrededor de una vista cuando están fuertemente ligados a una estructura DOM específica.

Selectores de Id (#)

El número de selectores de Id que debe existir en tu código debe ser exactamente igual a cero, ya que no hay ninguna buena razón para utilizar Id's en CSS. Son infinitamente más específicos que las clases, y al instante son imposibles de reutilizar. Es por esto que, al emplearlos, no podemos manejar CSS modular y reutilizable.

!important

El keyword !important se utiliza al final de una propiedad CSS para obligar a que se ignore una declaración y forzar un cambio. El utilizar este keyword no es tan malo como en muchas ocasiones podemos creer; sólo ten cuidado y asegúrate de que todas las instancias de !important se encuentren solamente en clases que sean de utilidad. Como puedes ver, existen muchas formas de utilizar CSS en tu sitio web, pero nunca está de más analizar lo que quieres lograr antes de lanzarte a crear código. De esta forma, podemos encontrar una solución eficiente que a futuro podrá serte útil y te hará ahorrar tiempo en tu desarrollo. ¡Espero tus comentarios!