CSS agora tem if: Entenda os Estilos Condicionais Nativos
Uma revolução silenciosa chegou ao CSS: agora você pode usar condicionais diretamente em suas folhas de estilo com a nova função if. Saiba como funciona.
Por que isso é importante
O CSS era conhecido por ser uma linguagem de estilo declarativa e limitada quando se tratava de lógica condicional. Porém, com a chegada da função if, agora é possível aplicar lógica diretamente nos estilos, revolucionando como construímos componentes dinâmicos e responsivos sem depender de JavaScript.
Introduzindo lógica no CSS
Durante anos, manipular estilos com base em condições exigia o uso de JavaScript, funções auxiliares como clsx ou troca de classes manual. Mas esse panorama mudou: a especificação de CSS ganhou uma função nativa chamada if, que oferece uma maneira poderosa de aplicar estilos condicionalmente com base em propriedades customizadas e queries de estilo.
Como a função if funciona
A nova função if permite utilizar valores condicionais diretamente em propriedades CSS. Essa possibilidade é destravada com o uso de custom properties em conjunto com style queries, permitindo alterar o estilo de um elemento dinamicamente sem alterar o DOM ou adicionar classes extras.
Exemplo prático com status visuais
Suponha que você tenha um componente Card que recebe um status como pending, complete ou inactive. Agora é possível refletir visualmente esse status direto no CSS usando a função if com propriedades customizadas, como border-color, background-color e grid-column.
Declarando status com atributos
Você pode usar o seletor de atributos para gerar uma propriedade customizada dinamicamente. Por exemplo: --status: ident(attr(data-status));. Isso define uma variável baseada no conteúdo do atributo data-status, que depois será usada nas condicionais.
Aplicando if nos estilos
Com a variável em mãos, você pode escrever algo como: border-color: if(--status = pending, blue, if(--status = complete, green, gray)); Isso aplica a lógica diretamente na propriedade, reduzindo dramaticalmente a necessidade de classes manipuladas via JS.
⚠️Atenção
Nem todos os navegadores ainda suportam essas funcionalidades. O suporte começa no Chrome 137, portanto é fundamental verificar fallback para navegadores antigos.
Customizando posicionamento visual
Além de estilos, é possível alterar layout baseando-se na condição do conteúdo. Por exemplo, a propriedade grid-column agora pode ser definida com lógica condicional conforme o status: grid-column: if(--status = pending, 1, if(--status = complete, 2, 3));
Resolvendo problemas de acessibilidade
Antes, quando alterávamos o posicionamento visual via CSS, podíamos quebrar a ordem de leitura dos leitores de tela. Porém, com a nova propriedade reading-flow, é possível manter a estrutura visual e a semântica de leitura acessível em sincronia.
ℹ️Info útil
O reading-flow permite reordenar visualmente os elementos mantendo uma ordem correta de leitura para tecnologias assistivas. Isso torna componentes dinâmicos mais acessíveis sem comprometer a semântica do DOM.
Evite conflitos de ordem entre propriedades
Tradicionalmente, o CSS aplicava regras com base na ordem dos seletores. Isso muitas vezes causava conflito e bugs sutis. Com a função if, a ordem das condições é explícita e mais previsível, tornando sistemas grandes mais robustos.
Substituindo hover, focus e active com propriedades
Você pode definir variáveis globais como --hover, --focusvisible e --active, e usá-las nas condicionais para definir estados como cor de fundo. Isso elimina a necessidade de pseudo-classes cada vez que o estilo precisar variar conforme o estado.
❌Atenção
Controlar seletores como :hover ou :active por CSS condicional exige cuidado para não quebrar comportamentos inesperadamente. Sempre teste em múltiplos dispositivos e tamanhos de tela.
Combinando condição com queries de tamanho
Através de função style queries + if, agora é possível simular um sistema como Tailwind direto no CSS. Por exemplo, configurar breakpoints com variáveis e retornar estilos diferentes dependendo do tamanho da viewport. Tudo feito de forma declarativa.
Modo Mobile First programável
Você pode usar uma função como size() para retornar diferentes labels (VerySmall, Small, Medium etc) baseadas em breakpoints e ajustá-las nas condições via if, oferecendo comportamento MobileFirst nativo de forma mais clara.
✅Visão técnica
A ordem de avaliação em if substitui diretamente a necessidade de ferramentas como clsx, removendo logicamente a complexidade de gerenciar múltiplas classes por estado.
Impacto na manutenibilidade de componentes
Ao migrar suas lógicas condicionais para dentro das próprias regras CSS com a função if, os sistemas de design se tornam mais legíveis, fáceis de debugar e reduzirão drasticamente problemas de conflito entre estilos overrding.
Esse é o futuro do CSS
Com essa mudança, o CSS se aproxima das capacidades de um sistema de estilos completo. A introdução de lógica abre espaço para criar componentes mais inteligentes, sem frameworks, focando na performance e acessibilidade nativa.