OmbuShop Crea Tu Tienda Online

Evitar selectores largos en CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

El uso de selectores largos, con descendencia en profundidad, dificulta la reutilización del código CSS. Veamos por qué no es conveniente y una posible solución.

Es relativamente sencillo generar una hoja de estilos cuyos selectores devienen en largas cadenas de descendencia. Esto no parece un problema al principio, pero a la hora de reutilizar el código esta situación se transforma en una pesadilla. Aquellos elementos que se estilan correctamente siempre que sigan la mentada cadena de descendencia, pierden su diseño en cuanto se los saca de contexto.

Este problema está presente en especial en el diseño de sitios web que funcionan como aplicaciones: por lo general, las aplicaciones web requieren un diseño modular cuyos elementos puedan ser reutilizados aquí y allá. Indicar con exactitud el contexto en una cadena inmensa de descendencia nos coarta esta posibilidad.

El problema

Imaginemos que tenemos un recuadro, dentro del contenido principal de la página. En su interior tenemos una zona para botones y allí dentro uno de los elementos es el botón principal.

Puede que los selectores en el código CSS queden algo así:


/* Ejemplo de selectores largos: NO recomendable */

body {
font-family: Helvetica, Arial, sans-serif;
background: #ccc;
}
#contenido-principal {
padding: 1em;
}
#contenido-principal div.recuadro {
background: #fff;
padding: 1em;
border-radius: 3px;
overflow: hidden;
box-shadow: rgba(0,0,0,0.1) 0 2px 3px;
}
#contenido-principal div.recuadro div.botones {
background: #ffffdf;
padding: 1em;
margin: 2em -1em -1em -1em;
}
#contenido-principal div.recuadro div.botones button.boton-principal {
color: #fff;
font-size: 1.2em;
padding: 0.5em 0.7em;
background: #FF8C2F;
border: 0;
border-radius: 3px;
}

See the Pen bhkej by Lucas Mourelle (@lucasmourelle) on CodePen.
0

El problema salta a la vista de inmediato cuando modificamos el contexto de uso de algún elemento, por ejemplo: probemos quitar el recuadro fuera del contenido principal. Perdemos todo el diseño.

See the Pen rHFnj by Lucas Mourelle (@lucasmourelle) on CodePen.0

Lo mismo ocurriría si tratásemos de utilizar el diseño del botón en algún otro contexto. El código se vuelve imposible de reutilizar, lo que nos obligaría a repetir código, algo que siempre debemos evitar.

La solución

Algunas de las técnicas analizadas en otros posts de este blog podrían ayudarnos a tener este problema. Las más populares son OOCSS (Object Oriented CSS) y Atomic CSS.

Pero aún sin ir tan lejos, una rápida recomendación podría ser pensar en cada elemento como un módulo, y diseñarlo sin obligarlo a existir dentro de cierta estructura de etiquetas particular. Veamos un ejemplo


/* Ejemplo de selectores modulares, orientados a objetos */

body {
font-family: Helvetica, Arial, sans-serif;
background: #ccc;
}
#contenido-principal {
padding: 1em;
}
.recuadro {
background: #fff;
padding: 1em;
border-radius: 3px;
overflow: hidden;
box-shadow: rgba(0,0,0,0.1) 0 2px 3px;
}
.botones {
background: #ffffdf;
padding: 1em;
}
.recuadro .botones {
/* modificación del contenedor de botones,
específicamente cuando está dentro del recuadro */
margin: 2em -1em -1em -1em;
}
.boton-principal {
color: #fff;
font-size: 1.2em;
padding: 0.5em 0.7em;
background: #FF8C2F;
border: 0;
border-radius: 3px;
}

See the Pen BntAg by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Como se puede ver, los objetos a no dependen de su ascendencia. Pueden reutilizarse sin la necesidad de repetir el contexto.