Eu <3 cascade!

Nota: apenas traduzi o texto abaixo e postei aqui.

Muitos desenvolvedores, principalmente aqueles que aprenderam JavaScript primeiro, odeiam cascade.

Cascade, se você não conhece, é o C em CSS (Cascading Style Sheets). Em CSS, os estilos são padronizados para a janela e são transmitidos em cascata para os elementos filhos.

/**
 * Isso se aplicará a todos os buttons no UI inteira
 */
button {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}

Para desenvolvedores de JavaScript que estão acostumados a definir o escopo de variáveis, functions e assim por diante em um component, isso parece um bug.

Mas, na realidade, cascade é uma feature.

Cascade me permite manter minhas stylesheets pequenas, enxutas e com bom desempenho. Isso significa que não preciso declarar novamente estilos para o mesmo elemento repetidamente para cada component em que o incluo.

Imagine ter que reescrever os mesmos estilos de botões usados para enviar seu contact form, botões usados para se inscrever em sua newsletter e botões para uma call-to-action box.

/**
 * Button styles para o contact form
 */
.contact button {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}

/**
 * Button styles para o newsletter form
 */
.newsletter button {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}

/**
 * Button styles para o calls-to-action
 */
button.call-to-action {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}

E sim, você poderia combiná-los assim.

.contact button,
.newsletter button,
button.call-to-action {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}

Mas não é um absurdo quando você pode simplesmente estilizar um button uma vez e seguir com sua vida?

button {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}

E toda essa conversa sobre como o CSS está quebrado, mas o JavaScript faz muito mais sentido, ignora a montanha de hacks que existem no JavaScript também.

JS também é global por padrão. Usamos IIFEs e wrapper functions para adicionar escopo.

// Isso é uma variável global
var myName = 'Chris';

// Encapsulando ela em uma function, dá escopo para ela
(function () {
    var myName = 'Chris';
})();

E apesar de toda essa conversa sobre o CSS ser global, você pode definir o escopo dos estilos quando precisar. É mais ou menos a mesma maneira que você faz em JavaScript.

Digamos que você usou um estilo de botão global, mas deseja substituir determinados botões para ter uma background color diferente. Talvez blue em vez de purple.

Você pode fazer isso.

/**
 * Isso se aplicará a todos os buttons no UI inteira
 */
button {
    background-color: rebeccapurple;
    color: white;
    font-weight: bold;
}

/**
 * Isso subscreve os estilos default do button para os .callout components
 */
.callout button {
    background-color: blue;
}

Em vez de reescrever todos os estilos de qualquer component específico, você ajusta apenas os estilos necessários.

Cascade é uma coisa linda!

Fonte

Newsletter de Go Make Things