Selectores eficientes: la ley MsN o del "Mínimo Selector Necesario" 25.7.12

Selectores eficientes: la ley MsN o del "Mínimo Selector Necesario"

¿Cómo conformar los selectores de css de la mejor manera posible?
La clave: usa la ley MsN: la ley del mínimo selector necesario en la hoja de estilos para identificar al elemento al que quieras estilizar.
Así de sencillo. No hay más secreto. Creo.

La ley MsN: El Mínimo Selector Necesario

El mínimo selector necesario será aquél selector Css que te permita apuntar inequívocamente y en exclusiva al elemento al que quieras aplicar los estilos utilizando en su nombre la cadena más corta posible.

Ahora sólo es cuestión de tener claro cuál es el selector mínimo para poder estilizar el elemento en cuestión. ¿Unos ejemplos?
Vamos con ellos, pero antes un preámbulo sobre si usar una clase o un id.

Clases o identificadores únicos

Lo primero que debes tener claro para tomar esa decisión son las diferencias entre uno y otro. Si tienes dudas, aquí tienes un artículo al respecto: "Clases o identificadores únicos".

Resumiendo: el uso de uno u otro será una cuestión ajena a Css. Dependerá de si necesitas o no utilizar alguna de las características que los diferencia.

Ejemplos de MSN

Tengamos en el siguiente html, fruto de ese análisis previo, tres enlaces muy diferentes: el título principal de la página en el h1, las opciones de navegación en una lista y un tercer enlace:


<body class="post_completo">
  <header>
    <h1><a...>Título Principal</a></h1>
    <nav>
       <ul id="principal">
         <li><a...>Opción 1</a></li>
         ...
         <li><a...>Opción 2</a></li>
       </ul>
    </nav>
      <a...>Otro enlace</a>
  </header>

Una forma, muy efectiva pero errada de apuntarlos en el Css sería usar toda la cadena de antecesores para diferenciarlos:


.post_completo header h1 a {/* estilos */}
.post_completo header nav ul#principal > li a {/* estilos */}
.post_completo header nav + a {/* estilos */}

Los selectores anteriores son muy específicos y no dejan lugar a dudas a qué elemento se refieren. Pero con un mínimo de atención vemos que se pueden simplificar mucho aplicando la Ley del MsN, tal que así:


header a {/* declaraciones comunes*/}
h1 a {/* estilos */}
#principal a {/* estilos */}
nav + a {/* estilos */}

¿Sencillo, no? Y además añade la facilidad de comprensión del código.
¿Y qué pasa si el marcado html se complica con, por ejemplo, listas enlazadas?
Sencillo.


/* INCORRECTO */
ul li a {/* estilos */}
ul li ul li a {/* estilos */}

/* LEY MSN */
ul a {/* estilos */}
ul ul a {/* estilos */}

Ayudas al MSN

Selectores Css

Para lograr la mayor eficiencia en los selectores es imprescindible conocer y usar el tipo de selector más apropiado.
El consorcio tiene todo un módulo dedicado a ellos: "Selectors Level 3" con estatus de recomendación. Y en proceso de elaboración "Selectors Level 4".

Atributos Html

Otra forma de simplificar, y por lo tanto de mejorar el css a la par que hacemos el marcado html más semántico, es usar los atributos permitidos para cada tipo de elemento y utilizar éstos para estilizarlos.
Supongamos que quieres diferenciar los enlaces internos (que apuntan a páginas de tu dominio) de los externos. Tienes dos opciones:

Usar dos clases diferentes y añadirlas a cada enlace en el html o
Usar el selector por valor de atributo.

El primer caso (utilizar clases) obligada a un esfuerzo mayor y complica el marcado html. Más propenso a errores u omisiones.

En el segundo sólo es cuestión de hacer uso en el Css del selector de atributo (href) sin añadir marcado adiccional:


article a {/* Estilos comunes a los enlaces */}
article a[href|="http://www.misitio.com"] {
  /* estilos propios de los enlaces internos */
}

El segundo selector apunta a todos los enlaces (contenidos en "article") cuyo atributo href comienza por la cadena de texto que está entre las comillas.

Semántica de los selectores

Otro aspecto que mejora la eficiencia de los selectores es el nombre que utilicemos al nombrar las clases o id´s. Es decir, la semántica.
En este caso, la mejora no es por parte del navegador, sino del humano.

Está claro que al navegador le es indiferente que a un elemento lo llames xzsd_320 ul que sidebar ul.
Pero el humano es humano. Y con el segundo selector no tendrá dudas a qué lista se refiere ni tampoco necesitará memorizar y asociar el nombre de un selector incomprensible con el elemento al que apunta.

Hay algún caso paradigmático como:
footer ul li a no será ul.creditos a

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.