Manutenibilidade
Dentro de um determinado projeto de desenvolvimento web, muitas vezes estaremos reutilizando certos valores de propriedade CSS. Muitas vezes, reutilizamos cores, alturas de linha, margens, tamanhos de fonte e assim por diante.
Aqui está um exemplo de quatro regras de estilo que podem se beneficiar das variáveis CSS:
h1 { margin-bottom: 20px; font-size: 42px; line-height: 120%; color: gray; } p { margin-bottom: 20px; font-size: 18px; line-height: 120%; color: gray; } img { margin-bottom: 20px; border: 1px solid gray; } .callout { margin-bottom: 20px; border: 3px solid gray; border-radius: 5px; }
O problema surge quando precisamos alterar determinados valores de propriedade posteriormente. Se alterarmos manualmente nossos valores, pode levar muito tempo, e há uma grande chance de cometermos um erro em algum lugar, especialmente se nossa folha de estilo for enorme. Da mesma forma, se realizarmos uma localização e substituição em lote, podemos afetar involuntariamente outras regras de estilo para criação de sites profissionais.
Podemos reescrever o exemplo acima usando variáveis CSS:
:root { –base-bottom-margin: 20px; –base-line-height: 120%; –text-color: gray; } h1 { margin-bottom: var( –base-bottom-margin ); font-size: 42px; line-height: var( –base-line-height ); color: var( –text-color ); } p { margin-bottom: var( –base-bottom-margin ); font-size: 18px; line-height: var( –base-line-height ); color: var( –text-color ); } img { margin-bottom: var( –base-bottom-margin ); border: 1px solid gray; } .callout { margin-bottom: var( –base-bottom-margin ); border: 1px solid gray; border-radius: 5px; color: var( –text-color ); }
Agora imagine que seu cliente lhe diz que o texto na tela é difícil de ler porque a cor do texto é muito clara. Nesta situação, precisamos apenas atualizar uma linha em nosso CSS:
–text-color: black;
Isso é -66% menos linhas de código que temos que editar, no contexto do conjunto anterior de regras de estilo (uma linha versus três linhas). Da mesma forma, usar variáveis CSS nos facilita quando queremos experimentar nossos designs.
Enquanto desenvolvemos o projeto, podemos testar rapidamente valores de cores, alturas de linha e valores de margem inferior em um só lugar, e poderemos ver os efeitos de maneira holística.
Melhor legibilidade do CSS
Propriedades personalizadas podem ajudar a tornar nossas folhas de estilo mais fáceis de ler. Isso poderia tornar nossas declarações de propriedade CSS mais significativas também.
Compare isso:
background-color: yellow; font-size: 18px;
Para isso:
background-color: var( –highlight-color ); font-size: var( –base-font-size );
Os valores de propriedade gostam yellowe 18pxnão nos fornecem nenhuma informação contextual útil. Mas quando lemos nomes de propriedades personalizadas como –base-font-sizee –highlight-color, mesmo quando estamos lendo o código de outra pessoa, sabemos instantaneamente o que o valor da propriedade está fazendo.
Coisas a ter em mente
Diferenciação de maiúsculas e minúsculas
As propriedades personalizadas diferenciam maiúsculas de minúsculas (diferentemente das propriedades CSS comuns).
:root { –main-bg-color: green;–MAIN-BG-COLOR: RED; } .box { background-color: var( –main-bg-color ); /* green background */ } .circle { BACKGROUND-COLOR: VAR(–MAIN-BG-COLOR ); /* red background */ border-radius: 9999em; } .box, .circle { height: 100px; width: 100px; margin-top: 25px; box-sizing: padding-box; padding-top: 40px; text-align: center; }
No exemplo acima, existem, na verdade, duas propriedades personalizadas que foram definidas: –main-bg-colore –MAIN-BG-COLOR.
Resolução do valor da propriedade personalizada
Quando uma propriedade personalizada é declarada mais de uma vez, a atribuição segue as regras normais de cascata e herança de CSS. No exemplo a seguir, o link receberá a cor de redporque o .containerseletor tem maior especificidade em comparação com :roote body.
HTML
<body> <div class=”container”> <a href=””>Link</a> </div> </body>
CSS
:root { –highlight-color: yellow; } body { –highlight-color: green; } .container { –highlight-color: red; } a { color: var( –highlight-color ); }
No entanto, se removermos a .containerregra de estilo do nosso código, o link receberá a cor de greenporque bodyagora se torna o próximo seletor que corresponde aos nossos links.
Valores de reserva
Você pode atribuir um valor de propriedade de fallback ao usar a var()notação de função. Basta fornecer o valor da propriedade de fallback como um argumento adicional delineado com uma vírgula ( ,).
No exemplo a seguir, o .boxelemento deve ser renderizado com um fundo preto. No entanto, como há um erro de digitação ao fazer referência ao nome da propriedade personalizada, o plano de fundo será renderizado usando o valor de fallback (ou seja, red).
HTML
<div class=”box”>A Box</div>
CSS
div { –container-bg-color: black; } .box { width: 100px; height: 100px; padding-top: 40px; box-sizing: padding-box; background-color: var( –container-bf-color, red ); color: white; text-align: center; }
Valores inválidos
Cuidado ao atribuir propriedades CSS com o tipo errado de valor. No exemplo a seguir, como a –small-buttonpropriedade customizada recebe uma unidade de comprimento, seu uso na .small-buttonregra de estilo é inválido.
:root { –small-button: 200px; } .small-button { color: var(–small-button); }
Uma boa maneira de evitar essa situação é criar nomes de propriedades personalizadas descritivas.
Por exemplo, nomear a propriedade personalizada acima –small-button-widthtorna improvável seu uso indevido.
