Usando a propriedade CSS currentColor para contruir componentes extensíveis

Nota: apenas traduzi o texto abaixo e postei aqui.

Antes, assista esse vídeo.

No vídeo, Steve compartilha como você pode usar a propriedade CSS currentColor para que qualquer outra propriedade que use uma cor selecione o valor da currentColor do element que você está estilizando. Se nenhuma cor for definida, ele herdará esse valor da árvore DOM.

Por exemplo, digamos que temos dois elementos de texto explicativo.

<div class="callout">
    Olá aí!
</div>

<div class="callout callout-danger">
    Atenção!
</div>

Queremos que o .callout standard tenha texto azul e uma borda azul, e o elemento .callout-danger tenha texto vermelho e uma borda vermelha.

Você pode estilizá-los assim:

.callout {
    border: 1px solid #0074d9;
    color: #0074d9;
    margin-bottom: 1em;
    padding: 1em;
}

.callout-danger {
    border-color: #ff4136;
    color: #ff4136;
}

Em vez de especificar a mesma cor para a borda, podemos usar currentColor.

.callout {
    border: 1px solid currentColor;
    color: #0074d9;
    margin-bottom: 1em;
    padding: 1em;
}

Então, em nosso elemento .callout-danger, podemos descartar a propriedade border-color porque ela herdará automaticamente esse valor da propriedade color.

.callout {
    border: 1px solid currentColor;
    color: #0074d9;
    margin-bottom: 1em;
    padding: 1em;
}

.callout-danger {
    color: #ff4136;
}

Fonte

Newsletter de Go Make Things