CSS - Propriedades Personalizadas: Um Guia Amigável para Iniciantes

Olá aí, futuros bruxos do CSS! ? Hoje, vamos embarcar em uma emocionante jornada pelo mundo das Propriedades Personalizadas do CSS. Não se preocupe se você é novo em programação – eu vou ser seu guia amigável, e vamos fazer isso passo a passo. No final deste tutorial, você vai impressionar seus amigos com seus superpoderes de CSS!

O que são Propriedades Personalizadas do CSS?

Vamos começar com o básico. Propriedades Personalizadas do CSS, também conhecidas como Variáveis do CSS, são como contêineres mágicos que armazenam valores que você pode usar em todo o seu stylesheet. Imagine它们 como pequenas caixas onde você pode armazenar suas cores favoritas, tamanhos ou qualquer outro valor de CSS.

Por que usar Propriedades Personalizadas?

1. Reusabilidade: Escreve uma vez, usa em todo lugar!
2. Flexibilidade: Muda valores em um lugar, vê mudanças em todo lugar.
3. Manutenção: Fácil de atualizar e gerenciar seus estilos.

Sintaxe: Como declarar e usar Propriedades Personalizadas

Vamos mergulhar em alguns códigos! Aqui está como declarar uma propriedade personalizada:

:root {
--minha-cor-favorita: #ff6347;
}

Aqui, estamos criando uma propriedade personalizada chamada --minha-cor-favorita e atribuindo a ela o valor de um lindo vermelho de tomate. O seletor :root significa que essa variável está disponível em todo o nosso documento.

Para usar essa propriedade, usamos a função var():

.texto-tomate {
color: var(--minha-cor-favorita);
}

Agora, qualquer elemento com a classe texto-tomate terá nossa cor favorita de tomate!

Valores Possíveis: O que você pode armazenar em Propriedades Personalizadas?

Propriedades personalizadas são incrivelmente versáteis. Você pode armazenar quase qualquer valor de CSS nelas:

Tipo de Valor	Exemplo
Cores	--cor-principal: #3498db;
Comprimentos	--espacamento: 20px;
Strings	--familia-fonte: 'Arial', sans-serif;
Números	--indice-z: 100;
Cálculos	--largura: calc(100% - 20px);

Aplica-se a: Onde você pode usar Propriedades Personalizadas?

A resposta curta? Em todo lugar! Você pode usar propriedades personalizadas em qualquer valor de propriedade CSS. Vamos ver alguns exemplos:

:root {
--cor-primaria: #3498db;
--cor-secundaria: #2ecc71;
--fonte-principal: 'Helvetica', sans-serif;
--espacamento: 20px;
}

.botao {
background-color: var(--cor-primaria);
color: white;
font-family: var(--fonte-principal);
padding: var(--espacamento);
margin-bottom: var(--espacamento);
}

.secao {
border: 2px solid var(--cor-secundaria);
}

Propriedades Personalizadas do CSS - Definindo Valores

Você pode definir valores de propriedade personalizada em seu CSS, mas sabia que também pode defini-los em JavaScript? Isso abre um mundo de possibilidades de estilização dinâmica!

// Definindo um valor de propriedade personalizada com JavaScript
document.documentElement.style.setProperty('--cor-primaria', '#e74c3c');

Propriedades Personalizadas do CSS - Dividindo Cores

Aqui está um truque legal: você pode dividir cores em suas componentes e usar propriedades personalizadas para cada parte!

:root {
--vermelho: 255;
--verde: 99;
--azul: 71;
}

.fundo-tomate {
background-color: rgb(var(--vermelho), var(--verde), var(--azul));
}

Propriedades Personalizadas do CSS - Sombras

Propriedades personalizadas tornam propriedades complexas como box-shadow muito mais gerenciáveis:

:root {
--cor-sombra: rgba(0, 0, 0, 0.2);
--deslocamento-x-sombra: 5px;
--deslocamento-y-sombra: 5px;
--desenho-sombra: 10px;
}

.caixa-sombreada {
box-shadow: var(--deslocamento-x-sombra) var(--deslocamento-y-sombra) var(--desenho-sombra) var(--cor-sombra);
}

Propriedades Personalizadas do CSS - Gradientes

Gradientes ficam fáceis com propriedades personalizadas:

:root {
--cor-inicio-gradiente: #3498db;
--cor-fim-gradiente: #2ecc71;
}

.fundo-gradiente {
background: linear-gradient(to right, var(--cor-inicio-gradiente), var(--cor-fim-gradiente));
}

Propriedades Personalizadas do CSS - Grade

Propriedades personalizadas podem tornar seus layouts de grade mais flexíveis:

:root {
--colunas-grade: 3;
--espaco-grade: 20px;
}

.container-grade {
display: grid;
grid-template-columns: repeat(var(--colunas-grade), 1fr);
gap: var(--espaco-grade);
}

Propriedades Personalizadas do CSS - Transformações

Transformações ficam mais legíveis e fáceis de manter:

:root {
--angulo-rotacao: 45deg;
--fator-escala: 1.2;
}

.elemento-transformado {
transform: rotate(var(--angulo-rotacao)) scale(var(--fator-escala));
}

Propriedades Personalizadas do CSS - Concatenação de Tipos de Unidade

Você pode até combinar propriedades personalizadas com unidades:

:root {
--tamanho-base: 10;
}

.elemento-tamanho {
width: calc(var(--tamanho-base) * 1px);
height: calc(var(--tamanho-base) * 2px);
}

Propriedades Personalizadas do CSS - Usando a Cadeia de Estilos

Propriedades personalizadas respeitam a cadeia de estilos CSS, significando que você pode sobrescrevê-las para elementos específicos:

:root {
--cor-texto: preto;
}

.tema-escuro {
--cor-texto: branco;
}

p {
color: var(--cor-texto);
}

Propriedades Personalizadas do CSS - :root

Nós usamos :root muito. É uma pseudo-classe especial que representa o elemento raiz da árvore do documento, geralmente o <html>. É um ótimo lugar para definir propriedades personalizadas globais.

Propriedades Personalizadas do CSS - Combinando com !important

Propriedades personalizadas podem ser combinadas com !important:

.cor-sobrescrita {
color: var(--cor-texto) !important;
}

Propriedades Personalizadas do CSS - Fallbacks

Você pode fornecer valores de fallback caso uma propriedade personalizada não esteja definida:

.exemplo-fallback {
color: var(--undefined-color, azul);
}

Propriedades Personalizadas do CSS - @property

A regra @property é uma nova característica emocionante que permite que você defina as características das propriedades personalizadas:

@property --minha-cor {
syntax: '<cor>';
inherits: false;
initial-value: #c0ffee;
}

Isso define uma propriedade personalizada --minha-cor que deve ser um valor de cor válido, não herda de elementos pais e tem um valor inicial de #c0ffee.

E aí você tem, meus queridos alunos! Cobrimos muito terreno hoje, desde os básicos das Propriedades Personalizadas do CSS até algumas técnicas avançadas. Lembre-se, a chave para dominar esses conceitos é a prática. Então, vá em frente, experimente e crie designs incríveis com seus novos superpoderes de CSS!

Até a próxima vez, feliz programação! ??‍??‍?

Credits: Image by storyset