Estos días se anunció que Google Chrome incluye soporte para CSS Variables, lo que finalmente abre las puertas a que los nuevos features de CSS sean finalmente adquirido por los browsers. Pero una variable poco conocida y con buen soporte crossbrowsing ha existido por años: currentColor. Esta capacidad tiene muchas aplicaciones las que veremos en este artículo.

Uno de las características menos conocidas de CSS es que si defines color en una declaración junto al border (por ejemplo) sin especificar el color, este border va a adquirir el color del texto por defecto, por ejemplo:

p { 
   color: #f00;
   border-bottom: 4px solid; 
}

Ejemplo en JS Bin

Así si cambias el color de texto el color del borde también heredará el cambio del color (y además funciona con propiedades como outline y box-shadow):

Ejemplo en JS Bin

Creo que se entendió el concepto. Veamos ahora un ejemplo práctico: dado un párrafo, es usual que los enlaces se les entregue el mismo color que el texto:

p {
   color: #666;
}
p a {
   color: currentColor;
   font-weight: bold;
}

Ejemplo en JS Bin

Con el valor currentColor podremos reducir las declaraciones de colores de nuestro código CSS, e inclusive podremos construir un conjunto de interfaces (componentes) que dependan y hereden el color automágicamente:

p {
  color: #34495e;
}
p a {
  color: currentColor;
  font-weight: bold;
}
p .btn {
  display: inline-block;
  border-radius: 10px;
  border: 1px solid;
  text-decoration: none;
  padding: .1em 1em;
  line-height: 1.5;
}

Ejemplo en JS Bin