Propriedade (property)

Um atributo que define como um elemento aparece ou se comporta, tipo cor, tamanho ou espaçamento.

Hard

O que é

Propriedade é um atributo dado a um elemento, seja no design ou no código, que determina como ele se mostra ou se comporta: cor, tamanho de fonte, padding, raio de borda, estado de hover. Ou seja, é a unidade que descreve aquele elemento.

No código, a propriedade é o valor que define a característica de um objeto. No CSS, por exemplo, coisas como font-size, margin e color controlam a aparência. Já na programação orientada a objeto, a propriedade é o atributo de um objeto, como o nome ou o email de um usuário.

Dentro de um design system, a propriedade é justamente o que torna o componente consistente e reutilizável. Quando as regras de tipografia, espaçamento e cor estão definidas como propriedades, todo elemento se alinha ao sistema, e designer e dev passam a falar a mesma língua.

Em uma frase

A cor de fundo do botão é uma propriedade que aponta pro token primário, não vamos cravar o hex na mão.

A pergunta que ele responde

O que exatamente posso ajustar num componente, e como isso se conecta com o token?

Quando usar

Ajuda na hora de montar ou documentar componente, pra deixar claro o que pode ser ajustado em cada elemento.

Como não usar

O cuidado é não deixar a propriedade ajustável demais, porque o excesso de variação complica a manutenção e acaba quebrando a consistência do sistema.

Na prática

No design system, o botão tem propriedades como cor de fundo, raio de borda e estado. Cada uma delas é o que o dev traduz direto pro CSS na hora de construir.

Não confunda com

Vale separar propriedade de token. O token é o valor nomeado e reutilizável, como cor primária ou espaço 8, aquele padrão guardado pra ser usado em vários lugares. A propriedade é o atributo que recebe esse valor: a cor de fundo do botão é a propriedade, e o token primário é o que ela aponta. Um é o valor com nome; o outro, o lugar onde ele entra.

D

Em inglês

Property

Pronúncia

pró-per-tee

Também chamado de

property, atributo, propriedade

Origem

n/a

Fonte

Saiba mais

MDN Web Docs, referência de propriedades CSS