DEV Community

Cover image for Eu <3 cascade!
doug-source
doug-source

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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';
})();
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)