Muitos aplicativos da web contêm grandes quantidades de CSS, que geralmente contêm valores repetidos. Por exemplo, se uma cor é usada várias vezes em vários componentes, a fim de alterar a cor, uma pesquisa global e substituição é iniciada. Isso pode ser demorado e bastante assustador.
As propriedades personalizadas permitem que os desenvolvedores armazenem valores em um único arquivo e façam referência a esse valor em muitos componentes. As propriedades personalizadas também permitem identificadores semânticos, por exemplo, --main-button-color será melhor compreendido do que # 99efbe se usado em vários componentes. Também é importante observar que as propriedades personalizadas estão sujeitas às regras CSS em cascata.
Neste artigo, darei uma breve visão geral das propriedades personalizadas do CSS e como usá-las, além de discutir sua funcionalidade com JavaScript, APIs e React.
O que são propriedades personalizadas?
Propriedades personalizadas, também conhecidas como variáveis CSS, são valores específicos definidos por um desenvolvedor para serem reutilizados em um aplicativo da web ou documento. Normalmente, as variáveis CSS são definidas usando notação de propriedade.
Um exemplo de propriedade personalizada básica pode ser visto abaixo:
botão { cor de fundo: var (-main-bg-color);
}
No bloco de código acima, o elemento de botão recebe uma cor de fundo de main , que já foi definida em um arquivo separado. Vamos ver como usar uma propriedade personalizada abaixo.
Declaração de propriedades personalizadas
Para declarar uma propriedade personalizada, primeiro declaramos o nome da propriedade adicionando um hífen duplo (-) próximo a um valor CSS válido.
Como qualquer outra variável, escrevemos isso dentro de um conjunto de regras como o snippet abaixo:
elemento
{ --main-color: vermelho;
}
Para usar um valor em uma declaração de propriedade, precisamos chamá-lo com uma função var () como o bloco de código abaixo:
p { cor: var (-cor primária);
}
É importante observar que os seletores fornecidos ao conjunto de regras definem o escopo no qual a propriedade personalizada pode ser usada. Outro uso comum é definir o escopo de sua propriedade customizada como : root , seu global. Isso é feito para que possa ser aplicado globalmente em muitos documentos e componentes.
Casos de uso para propriedades personalizadas CSS
Nesta seção, veremos os casos de uso de propriedades personalizadas e variáveis CSS.
Cores
As cores podem ser definidas como propriedades personalizadas CSS. Este exemplo incluirá escopos para propriedades personalizadas para mudanças de cor.
Em nosso caso, podemos definir uma cor perigo vermelha para um elemento particular, digamos, h2 . No entanto, o aplicativo também usa um elemento h2 para as legendas na barra de navegação
Podemos declarar o valor --color-love em um
em uma legenda será azul em vez de vermelho:
: root { --cor-perigo: vermelho;
} h2 { cor: var (-cor-perigo);
} artigo { --color-love: # 0000FF;
}
Tamanhos de fonte
Os tamanhos das fontes são outra maneira de usar propriedades personalizadas, porque os tamanhos das fontes podem ser alterados usando o escopo CSS.
Um exemplo disso pode ser encontrado da mesma forma que o exemplo acima:
: root { --tamanho do cabeçalho: 24px;
} h2 { tamanho da fonte: var (-tamanho do título);
} artigo { --tamanho do cabeçalho: 18px;
}
No bloco de código acima, o tamanho do cabeçalho global foi definido para 24px . No seletor article , nós o atualizamos para 18px .
Layouts de grade
Os layouts de grade são uma das tendências mais modernas no desenvolvimento da web. Podemos usar propriedades personalizadas CSS para configurar layouts personalizados para nossa grade, como no seguinte bloco de código:
: root { --grid-width: 30%;
} .grid-box { alinhar-itens: flex-end; largura: var (-largura da grade);
} .product-grid { --grid-width: 35%;
}
Botões
Os botões são uma ótima maneira de usar propriedades CSS personalizadas. Um exemplo disso pode ser visto quando um botão é estilizado globalmente e pode ser atualizado com outro valor personalizado, conforme mostrado abaixo:
: root { --button-color: blue; --botão-cor-branco: branco; --botão-cor-perigo: vermelho;
} .botão { cor de fundo: var (-cor do botão); sombra da caixa: 2px 4px 0 var (-cor do botão escuro);
}
.button: hover { cor de fundo: var (-cor do botão escuro); sombra da caixa: 0 0 0 var (-cor do botão escuro);
} .Formato { --button-color: # ff571c; --button-color-dark: # cc5600; --button-color-light: # ffb64f;
}
Alterando um estado de JavaScript
As propriedades CSS personalizadas podem ser alteradas em tempo real usando JavaScript. Isso é bom ao criar temas habilitados para o usuário, alterar ou demonstrar vários layouts ou alterar esquemas de cores para um usuário.
As propriedades personalizadas CSS podem ser usadas para alterar o estado de qualquer aplicativo como o bloco de código abaixo:
const body=document.getElementByTagName ("body") [0];
function change_vars () { if (! body.classsList.contains ('alterado')) { body.style.setProperty ('-color-primary','# ff54ef'); body.classList.add ('alterado'); } senão { body.style.setProperty ('-color-primary','# 13efdc'); body.classList.remove ('alterado'); }
}
Propriedades personalizadas CSS como uma API
As propriedades personalizadas CSS podem ser usadas como API, especialmente se forem hospedadas como CDNs.
Vejamos o bloco de código abaixo:
//o especial de hoje é
.today:: after { conteúdo: var (-todaysSpecial);
}
O bloco de código acima pode ser usado para gostar de uma API, tornando-o fácil de usar, mas isso é desafiador e não é muito acessível.
Propriedades personalizadas CSS com React
As propriedades customizadas CSS podem ser usadas em aplicativos React, o que pode abrir novas possibilidades para desenvolvedores React. Com variáveis CSS, você pode fazer várias coisas que não são possíveis com JavaScript.
Para usar propriedades personalizadas em um aplicativo React, primeiro você precisa de um único arquivo. Em nosso caso, constants.js , para manter todos os nossos tokens de design semelhantes ao que está abaixo:
const SIZES=[ 4, 8, 12, 16, 20, 24, 28, 32, 36
]; CORES constantes={ texto:'preto', fundo:'branco', primário:'roxo', secundário:'azul'
};
A seguir, você importa o arquivo diretamente para seus componentes, conforme visto no bloco de código abaixo:
importar {CORES} de'../constant'; const Button=styled.button` fundo: $ {COLORS.secondary};
`;
Com as variáveis CSS, podemos fazer mais com as variáveis e, em vez de alterá-las, só podemos alterar os valores onde for necessário.
Na próxima seção, falaremos sobre uma biblioteca notável que torna mais fácil para os desenvolvedores executarem propriedades personalizadas em aplicativos React.
React propriedades personalizadas
Propriedades personalizadas React é um componente React para aplicação de variáveis CSS. Com React Custom Properties, os desenvolvedores podem aplicar declarativamente propriedades CSS customizadas.
As propriedades personalizadas do React podem ser instaladas usando um gerenciador de pacotes de nó usando o comando abaixo:
npm install react-custom-properties
A seguir, importe CustomProperties como:
importar CustomProperties de'react-custom-properties';
As propriedades personalizadas do React fornecem um componente propriedades para seus filhos quando montado.
Podemos usá-lo da seguinte maneira:
import React, {Component} de'react';
importar CustomProperties de'react-custom-properties'; class App extends Component { render () { Retorna { ele terá a cor de fundo # 000FFE ); }
}
As propriedades personalizadas do React também suportam aninhamento para que as instâncias pai possam ser substituídas por instâncias filho. Você pode aprender mais sobre React Custom Properties aqui.
Conclusão
As propriedades CSS personalizadas ajudam os usuários não apenas a definir layouts, mas também a atualizar valores e variáveis CSS nos aplicativos.
Embora em fase experimental, as variáveis CSS podem ser utilizadas como API e para controlar o estado do JavaScript. Bibliotecas como React Custom Properties facilitam o uso de variáveis personalizadas em aplicativos React.
A postagem Propriedades personalizadas CSS a partir de 2021 apareceu primeiro no LogRocket Blog .
