« Artículos « BlogDownloads

No sé si existe ya el concepto “CSS Contextual”, pero si no es así, lo inventaré aquí :). Si el lector está medianamente interesado en CSS, sabrá que las reglas CSS pueden ser escritas para tomar en cuenta la etiqueta (clase, ID, etc) en la cual está inserto el elemento que queremos modificar.

Esta “sensibilidad al contexto” puede ser usada para tener un sistema de nombres de clases mucho más elegante y minimalista. A continuación veremos cómo y porqué conviene hacerlo así.

Primero, El Contexto

Como muchos sabrán, el espacio en los selectores CSS indica descendencia. Por ejemplo, veamos este selector:

pelota comida { }

hace referencia al elemento comida dentro del elemento pelota. Esto significa que si, por ejemplo, usamos el elemento comida dentro de un elemento cocina, este selector no tendrá ningún efecto.

Esto nos permite establecer un selector para el mismo elemento (o clase o id), usado en distintos entornos. Veamos ahora su aplicación práctica.

Usa Menos Clases, Aprovecha los IDs

A veces solemos distinguir con clases una misma etiqueta que es usada en distintos entornos. El ejemplo más clásico es para diferenciar las etiquetas <a> del menú con las del contenido principal:

a {  /* reglas css */ }
a.menuitem { /* reglas css para los links del menú */ }

El HTML correspondiente a este ejemplo sería algo así:

<div id="menu">
    <a class="menuitem"> Item1 </a>
    <a class="menuitem"> Item2 </a>
    <a class="menuitem"> Item3 </a>
</div>

Este ejemplo es también el que con más frecuencia se soluciona de la manera correcta. Generalmente nuestros vínculos de menú van encerrados en una <div> o <ul> con el id menu. Así que a muchos les resultarán familiares estos selectores:

a {  /* reglas css */ }
#menu a { /* reglas css para los links dentro de #menu */ }

Con esto eliminamos una clase, con lo que tenemos que recordar menos cosas en nuestra atochada memoria, y ahorramos un poco de código:

<div id="menu">
    <a> Item1 </a>
    <a> Item2 </a>
    <a> Item3 </a>
</div>

Esto puede ser aplicado en otras situaciones. Por ejemplo, suele suceder que tenemos un blog, donde en la página principal los posts se vean de cierta manera, y al ver cada post individual, se vean de otra manera. En dicho caso, en lugar de hacer esto, que nos deja con dos nombres de clases:

.post-mainpage {/*asi se ven los posts en la pagina principal */}
.post-single {/*y así se ven en su página propia */}

hacemos esto:

#mainpage .post {/*lo específico de .post en la pág. principal*/}
#single .post {/*lo específico de .post en su pág. individual*/}
.post {/*los atributos de .post comunes a todas las páginas */}

En este caso, necesitaremos que todos los posts de la página principal estén encerrados en una gran <div id=”mainpage”>, y encerramos cada post individual con una <div id=”single”>. La ventaja es que todo el resto de estilos que hayamos definido para el interior de los posts sólo debemos definirlos una vez. Y cambiamos dos nombres de clases largos por uno corto.

Usa Nombres de Clases Más Cortos y Generaliza

Este código HTML le resultará familiar a quienes gustan de combinar imágenes de fondo CSS de manera compleja:

<div class="caja">
    <div class="caja-interior">
        ...contenido...
    </div>
</div>

<div class="otracaja">
    <div class="otracaja-interior">
        ...contenido...
    </div>
</div>

Generalmente no nos cuestionamos mucho estos nombres de clases; son una cosa meramente utilitaria. Y el código CSS queda algo así:

.caja { ... }
.caja-interior { ... }
.otracaja { ... }
.otracaja-interior { ... }

Esto puede ser optimizado de la manera siguiente:

<div class="caja">
    <div class="interior">
        ...contenido...
    </div>
</div>

<div class="otracaja">
    <div class="interior">
        ...contenido...
    </div>
</div>

Y el CSS quedaría así:

.caja { ... }
.caja .interior { ... }
.otracaja { ... }
.otracaja .interior { ... }

Con esto, nos ahorramos un par de nombres largos de clases, y generalizamos. En este caso, la div “interior” siempre cumple esa función, independiente de donde esté. El efecto sanador de esta técnica aumenta conforme sea más y más complejo nuestro diseño :)

A grandes rasgos, es eso. Use su ingenio y ahórrese nombres de clases. Un código más elegante significa más bienestar para usted y los suyos, mayor facilidad de mantención, y más Mb de memoria libres en nuestro cerebro :)

Dudas? Opiniones? Sugerencias? A los comentarios, como siempre, y serán bienvenidos.