Estilos que Reagem ao Estado

Estilos estáticos não são suficientes. Um botão precisa ter aparência diferente quando desabilitado. Um cartão precisa ser destacado quando selecionado. Um campo de formulário deve indicar erros. O Svelte facilita o uso de classes dinâmicas.

O que Você Vai Aprender

Aplicar classes condicionalmente com class:
Usar expressões em atributos de classe
Combinar classes estáticas e dinâmicas
Criar padrões comuns de interface

A Diretiva `class:`

O que é uma Diretiva?

No Svelte, uma diretiva é um atributo especial que fornece instruções ao framework sobre como tratar um elemento. As diretivas sempre começam com um prefixo como on:, bind: ou class:.

A diretiva class: diz ao Svelte: "Adicione ou remova esta classe CSS dinamicamente dependendo se uma condição é verdadeira ou falsa."

Como Funciona

Pense nisso como um interruptor de luz automático. Quando selected é true, a classe é ativada. Quando selected é false, a classe é desativada. O Svelte cuida de toda a adição e remoção para você.

Sintaxe básica:

<div class:className={condition}>

className - A classe CSS que você deseja aplicar
condition - Um booleano (verdadeiro/falso) que determina se a classe deve estar ativa

Se condition for true, a classe é adicionada. Se condition for false, a classe é removida.

Sintaxe Abreviada

Quando o nome da sua variável corresponde exatamente ao nome da classe, você pode usar uma forma abreviada:

<!-- Long form -->
<div class:selected={selected}>

<!-- Shorthand (same thing!) -->
<div class:selected>

Ambas fazem a mesma coisa: quando a variável selected é verdadeira, a classe selected é aplicada.

Um Exemplo Completo

A maneira mais simples de aplicar uma classe condicional:

<!-- example -->
<script>
	let { selected = false } = $props()
</script>

<div class:selected>Content</div>

<style>
	.selected {
		background: lightblue;
	}
</style>

Quando selected é verdadeiro, a classe selected é adicionada. Quando falso, ela é removida.

A sintaxe é class:className={condition}. Quando o nome da variável corresponde ao nome da classe, você pode usar a forma abreviada class:className.

Condições Explícitas

Quando os Nomes Não Coincidem

Às vezes o nome da sua variável e o nome da classe CSS são diferentes. Talvez sua variável se chame isActive, mas sua classe CSS seja .active. Nesses casos, você precisa informar explicitamente ao Svelte qual condição controla qual classe.

Sintaxe:

<div class:className={variableName}>

O nome da classe fica no lado esquerdo do =, e a variável/condição fica no lado direito entre chaves.

Exemplo Básico

<script>
	let isActive = $state(false)
</script>

<!-- Variable name: isActive, Class name: active -->
<button class:active={isActive}>Click me</button>

Quando isActive é verdadeiro, a classe active é aplicada. A variável e a classe têm nomes diferentes, então precisamos da sintaxe explícita ={isActive}.

Usando Expressões

Você pode usar qualquer expressão que resulte em verdadeiro ou falso:

<script>
	let count = $state(0)
</script>

<!-- Apply 'warning' class when count exceeds 10 -->
<span class:warning={count > 10}>Count: {count}</span>

A expressão count > 10 é avaliada. Se o contador for 11 ou maior, warning é verdadeiro e a classe é adicionada. Se o contador for 10 ou menor, a classe é removida.

Outros exemplos de expressões:

class:visible={items.length > 0} - Exibe quando há itens
class:valid={email.includes('@')} - Verificação básica de e-mail
class:even={index % 2 === 0} - A cada dois itens

Múltiplas Condições em um Elemento

Você pode aplicar múltiplas diretivas class: ao mesmo elemento:

<script>
	let isActive = $state(false)
	let hasError = $state(false)
	let count = $state(0)
</script>

<div class:active={isActive} class:error={hasError} class:disabled={!isActive && hasError}>
	Status
</div>

O que está acontecendo aqui:

class:active={isActive} - Adiciona a classe active quando isActive é verdadeiro
class:error={hasError} - Adiciona a classe error quando hasError é verdadeiro
class:disabled={!isActive && hasError} - Adiciona a classe disabled quando AMBAS as condições são verdadeiras:
- !isActive significa "não ativo" (o ! inverte o booleano)
- && significa "E" (ambos os lados devem ser verdadeiros)
- Portanto: "desabilitado quando NÃO está ativo E tem um erro"

As três classes podem ser aplicadas simultaneamente se todas as suas condições forem verdadeiras. Elas são avaliadas independentemente.

Combinando Estático e Dinâmico

O Melhor dos Dois Mundos

Em aplicações reais, você normalmente precisa de ambos:

Classes estáticas - Sempre aplicadas, definem a aparência base
Classes dinâmicas - Aplicadas condicionalmente, modificam a aparência com base no estado

Pense nas classes estáticas como a base e nas classes dinâmicas como as decorações que entram e saem.

Como Funciona

Você pode usar o atributo class comum E múltiplas diretivas class: no mesmo elemento:

<button
	class="btn btn-primary"          <!-- Static: always present -->
	class:loading={isLoading}        <!-- Dynamic: only when loading -->
	class:disabled={!isValid}        <!-- Dynamic: only when not valid -->
>

O Svelte mescla tudo junto. O atributo class final será:

Quando ocioso e válido: "btn btn-primary"
Quando carregando e válido: "btn btn-primary loading"
Quando não está carregando e inválido: "btn btn-primary disabled"
Quando carregando e inválido: "btn btn-primary loading disabled"

Exemplo Completo

<script>
	let isLoading = $state(false)
	let isValid = $state(true)
</script>

<button class="btn btn-primary" class:loading={isLoading} class:disabled={!isValid}>
	{isLoading ? 'Saving...' : 'Save'}
</button>

<style>
	/* Base button styles - always applied */
	.btn {
		padding: 0.5rem 1rem;
		border-radius: 4px;
		border: none;
		cursor: pointer;
		transition: all 0.2s;
	}

	/* Primary variant - always applied */
	.btn-primary {
		background: #3b82f6;
		color: white;
	}

	/* Loading state - applied conditionally */
	.loading {
		opacity: 0.7;
		cursor: wait;
	}

	/* Disabled state - applied conditionally */
	.disabled {
		opacity: 0.5;
		cursor: not-allowed;
		background: #9ca3af;
	}
</style>

Por que Combiná-los?

Separação de responsabilidades:

Classes estáticas definem o que o elemento é (um botão, um cartão, um emblema)
Classes dinâmicas definem mudanças de estado (carregando, selecionado, erro)

Reusabilidade:

Estilos base (.btn, .btn-primary) podem ser reutilizados em vários botões
Modificadores de estado (.loading, .disabled) funcionam com qualquer variante

Manutenibilidade:

Fácil de identificar quais estilos são permanentes versus condicionais
Alterações nos estilos base não afetam a lógica de estado

Padrão Comum: Base + Variante + Estado

<div class="card card-large" <!-- Base + Size variant -->
	class:selected={isSelected}
	<!-- State: selection -->
	class:featured={isFeatured}
	<!-- State: featured -->
	>
	<!-- content -->
</div>

Isso cria um sistema flexível onde você pode combinar estilos base, variantes e estados de forma independente.

Expressão de Classe

Nomes de Classe Dinâmicos com Template Literals

Às vezes você não quer apenas adicionar/remover uma classe — você quer calcular o próprio nome da classe. Isso é ideal para variantes como badges de status, tamanhos de botões ou temas.

Como Funcionam as Expressões de Template

Usar chaves {} dentro de um atributo de classe cria uma expressão de template:

class="badge-{status}"

O Svelte avalia a variável dentro de {} e insere seu valor na string. Se status for 'pending', o resultado é "badge-pending".

Exemplo Completo

<script>
	let status = $state('pending') // 'pending' | 'confirmed' | 'cancelled'
</script>

<span class="badge badge-{status}">
	{status}
</span>

<style>
	.badge {
		padding: 0.25rem 0.5rem;
		border-radius: 4px;
		font-size: 0.875rem;
		font-weight: 600;
		text-transform: uppercase;
	}

	.badge-pending {
		background: #fef3c7;
		color: #92400e;
	}

	.badge-confirmed {
		background: #d1fae5;
		color: #065f46;
	}

	.badge-cancelled {
		background: #fee2e2;
		color: #991b1b;
	}
</style>

Como funciona:

A classe badge é sempre aplicada (estilos base)
A expressão de template badge-{status} cria dinamicamente:
- badge-pending quando status === 'pending'
- badge-confirmed quando status === 'confirmed'
- badge-cancelled quando status === 'cancelled'

Múltiplas Variáveis

Você pode combinar múltiplas variáveis:

<script>
	let size = $state('large')     // 'small' | 'medium' | 'large'
	let theme = $state('dark')     // 'light' | 'dark'
</script>

<!-- Generates: "button-large-dark" -->
<button class="button-{size}-{theme}">
	Click me
</button>

Quando Usar Expressões de Template vs. `class:`

Use class: quando:

Adicionar/remover uma única classe com base em um booleano
Exemplo: class:active={isActive}

Use expressões de template quando:

O nome da classe depende do valor de uma variável
Trabalhando com enums ou valores de string
Exemplo: class="btn-{variant}" onde variant pode ser 'primary', 'secondary', etc.

Ternário no Atributo de Classe

Situações de Um ou Outro

Às vezes você precisa escolher entre dois nomes de classe completamente diferentes com base em uma condição. O operador ternário (? :) é ideal para isso.

O que é um Operador Ternário?

O operador ternário é uma instrução if/else abreviada:

condition ? valueIfTrue : valueIfFalse

Lendo em voz alta: "Se a condição for verdadeira, use valorSeVerdadeiro, caso contrário use valorSeFalso."

Exemplo Básico

<script>
	let isExpanded = $state(false)
</script>

<div class={isExpanded ? 'panel expanded' : 'panel collapsed'}>
	<button onclick={() => (isExpanded = !isExpanded)}>
		{isExpanded ? 'Collapse' : 'Expand'}
	</button>
	<p>Content here...</p>
</div>

<style>
	.panel {
		overflow: hidden;
		transition: max-height 0.3s ease;
		border: 1px solid #e5e7eb;
		padding: 1rem;
		border-radius: 4px;
	}

	.expanded {
		max-height: 500px;
	}

	.collapsed {
		max-height: 50px;
	}
</style>

Detalhando:

Quando isExpanded é true: class="panel expanded"
Quando isExpanded é false: class="panel collapsed"

Por que Não Usar `class:`?

Você poderia usar diretivas class::

<div class="panel" class:expanded={isExpanded} class:collapsed={!isExpanded}>

Mas o ternário é mais limpo quando as condições são mutuamente exclusivas (um OU o outro, nunca ambos).

Múltiplas Classes no Ternário

Você pode incluir múltiplas classes em cada ramo:

<script>
	let mode = $state('edit') // 'edit' | 'view'
</script>

<div class={mode === 'edit' 
	? 'container editable border-blue' 
	: 'container readonly border-gray'
}>
	<!-- content -->
</div>

Combinando com Classes Estáticas

Misture classes estáticas e ternário para máxima flexibilidade:

<script>
	let isOnline = $state(true)
</script>

<div class="user-status {isOnline ? 'online' : 'offline'}">
	<span class="indicator"></span>
	{isOnline ? 'Available' : 'Away'}
</div>

<style>
	.user-status {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
	
	.indicator {
		width: 8px;
		height: 8px;
		border-radius: 50%;
	}
	
	.online .indicator {
		background: #10b981;
	}
	
	.offline .indicator {
		background: #6b7280;
	}
</style>

Múltiplas Classes Dinâmicas

Quando as Coisas Ficam Complexas

Quando você tem muitas classes dinâmicas para gerenciar, construir uma string de classes manualmente se torna confuso. Você precisa de uma abordagem programática.

Usando $derived com Arrays

A rune $derived do Svelte 5 cria valores computados que atualizam automaticamente:

<script>
	let size = $state('medium')
	let variant = $state('primary')
	let isLoading = $state(false)

	let buttonClasses = $derived(
		['btn', `btn-${size}`, `btn-${variant}`, isLoading && 'loading']
			.filter(Boolean)
			.join(' ')
	)
</script>

<button class={buttonClasses}> Click me </button>

Detalhando:

Array de classes: ['btn', 'btn-medium', 'btn-primary', false]
.filter(Boolean): Remove valores falsy (false, null, undefined, strings vazias)
- Resultado: ['btn', 'btn-medium', 'btn-primary']
.join(' '): Une os itens do array com espaços
- Resultado: "btn btn-medium btn-primary"

Como isLoading && 'loading' funciona:

Se isLoading for true: Avalia para 'loading' (a string)
Se isLoading for false: Avalia para false (é filtrado)

Isso é chamado de avaliação de curto-circuito em JavaScript.

Abordagem com Função Auxiliar

Crie uma função reutilizável para gerenciar classes:

<script>
	// Utility function
	function classNames(...classes) {
		return classes.filter(Boolean).join(' ')
	}

	let isActive = $state(true)
	let isDisabled = $state(false)
	let hasError = $state(false)
</script>

<button class={classNames(
	'btn',
	isActive && 'active',
	isDisabled && 'disabled',
	hasError && 'error'
)}>
	Click
</button>

Por que isso é melhor:

Código limpo e legível
Fácil de adicionar/remover classes
Pode ser extraído para um arquivo utilitário e reutilizado

Avançado: Objetos Condicionais

Para cenários ainda mais complexos:

<script>
	function cn(baseClasses, conditionalClasses) {
		const all = [
			baseClasses,
			...Object.entries(conditionalClasses)
				.filter(([_, condition]) => condition)
				.map(([className]) => className)
		]
		return all.join(' ')
	}

	let isActive = $state(true)
	let isLoading = $state(false)
	let hasError = $state(false)
</script>

<button class={cn('btn btn-primary', {
	'active': isActive,
	'loading': isLoading,
	'error': hasError
})}>
	Submit
</button>

Benefícios:

Classes base são sempre incluídas
Classes condicionais são claramente mapeadas às suas condições
Muito legível para componentes complexos

Exemplo do Mundo Real: Card Dinâmico

<script>
	let { 
		size = 'medium',
		variant = 'default',
		interactive = false,
		selected = false,
		disabled = false 
	} = $props()

	let cardClasses = $derived(
		[
			'card',
			`card-${size}`,
			`card-${variant}`,
			interactive && 'interactive',
			selected && 'selected',
			disabled && 'disabled'
		].filter(Boolean).join(' ')
	)
</script>

<article class={cardClasses}>
	<slot />
</article>

<style>
	.card { /* base styles */ }
	.card-small { padding: 0.5rem; }
	.card-medium { padding: 1rem; }
	.card-large { padding: 1.5rem; }
	
	.card-default { background: white; }
	.card-primary { background: #eff6ff; }
	
	.interactive { cursor: pointer; transition: transform 0.2s; }
	.interactive:hover { transform: translateY(-2px); }
	
	.selected { border: 2px solid #3b82f6; }
	.disabled { opacity: 0.5; pointer-events: none; }
</style>

Esse padrão escala muito bem conforme seu componente cresce em complexidade.

Aplicar ao BookIt

Vamos aplicar tudo o que você aprendeu a componentes reais do BookIt. Esses exemplos mostram como classes dinâmicas criam UIs polidas e interativas.

Seleção de Card de Serviço

Um card de serviço que os usuários podem selecionar, com estilização especial para serviços em destaque:

<!-- filename: src/lib/components/ServiceCard.svelte -->
<script>
	let { service, selected = false, featured = false, onclick } = $props()
</script>

<article 
	class="card" 
	class:selected 
	class:featured
	role="button"
	tabindex="0"
	{onclick}
>
	{#if featured}
		<span class="badge">Popular</span>
	{/if}
	
	<h3>{service.name}</h3>
	<p class="description">{service.description}</p>
	<p class="price">${service.price}</p>
	<p class="duration">{service.duration} minutes</p>
</article>

<style>
	.card {
		position: relative;
		padding: 1.5rem;
		border: 2px solid transparent;
		border-radius: 8px;
		background: white;
		cursor: pointer;
		transition: all 0.2s ease;
	}
	
	.card:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	/* Selected state - shows user's choice */
	.card.selected {
		border-color: #3b82f6;
		background: #eff6ff;
	}

	/* Featured state - highlights popular services */
	.card.featured {
		border-color: #f59e0b;
		box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
	}
	
	/* Both selected AND featured */
	.card.selected.featured {
		border-color: #3b82f6;
		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
	}
	
	.badge {
		position: absolute;
		top: -8px;
		right: 1rem;
		background: #f59e0b;
		color: white;
		padding: 0.25rem 0.75rem;
		border-radius: 12px;
		font-size: 0.75rem;
		font-weight: 600;
	}
	
	.price {
		font-size: 1.5rem;
		font-weight: 700;
		color: #1f2937;
		margin-top: 1rem;
	}
</style>

Funcionalidades principais:

class:selected - Feedback visual para a escolha do usuário
class:featured - Destaca serviços populares
Ambos podem estar ativos simultaneamente
Transições suaves para uma aparência profissional

Erros em Campos de Formulário

Um campo de texto que exibe erros de validação com feedback visual claro:

<!-- filename: src/lib/components/TextField.svelte -->
<script>
	let { 
		label, 
		error = '', 
		value = $bindable(''),
		required = false,
		...rest 
	} = $props()
	
	// Derived state: has an error if error string is not empty
	let hasError = $derived(error.length > 0)
</script>

<div class="field" class:has-error={hasError}>
	<label>
		{label}
		{#if required}
			<span class="required">*</span>
		{/if}
	</label>
	
	<input 
		bind:value
		{...rest} 
	/>
	
	{#if hasError}
		<span class="error-message">
			<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
				<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
				<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
			</svg>
			{error}
		</span>
	{/if}
</div>

<style>
	.field {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin-bottom: 1rem;
	}
	
	label {
		font-weight: 500;
		color: #374151;
	}
	
	.required {
		color: #ef4444;
	}
	
	.field input {
		padding: 0.5rem 0.75rem;
		border: 1px solid #d1d5db;
		border-radius: 4px;
		font-size: 1rem;
		transition: all 0.2s;
	}
	
	.field input:focus {
		outline: none;
		border-color: #3b82f6;
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	}

	/* Error state - only applied when hasError is true */
	.field.has-error input {
		border-color: #ef4444;
		background: #fef2f2;
	}
	
	.field.has-error input:focus {
		box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
	}

	.error-message {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		color: #ef4444;
		font-size: 0.875rem;
	}
</style>

Como funciona:

$derived calcula automaticamente hasError quando error muda
class:has-error={hasError} aplica o estilo de erro condicionalmente
Borda e fundo vermelhos aparecem apenas quando há um erro
A mensagem de erro inclui um ícone para melhor UX

Estados de Botão

Um componente de botão versátil com múltiplas variantes, tamanhos e estados:

<!-- filename: src/lib/components/Button.svelte -->
<script>
	let {
		variant = 'primary',
		size = 'medium',
		loading = false,
		disabled = false,
		fullWidth = false,
		onclick,
		...rest
	} = $props()
</script>

<button 
	class="btn btn-{variant} btn-{size}" 
	class:loading 
	class:full-width={fullWidth}
	disabled={disabled || loading}
	{onclick}
	{...rest}
>
	{#if loading}
		<span class="spinner"></span>
	{/if}
	<slot />
</button>

<style>
	/* Base button - always applied */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		border: none;
		border-radius: 6px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
	}
	
	.btn:hover:not(:disabled) {
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	.btn:active:not(:disabled) {
		transform: translateY(0);
	}

	/* Variants - dynamic via template expression */
	.btn-primary {
		background: #3b82f6;
		color: white;
	}
	
	.btn-primary:hover:not(:disabled) {
		background: #2563eb;
	}
	
	.btn-secondary {
		background: #6b7280;
		color: white;
	}
	
	.btn-secondary:hover:not(:disabled) {
		background: #4b5563;
	}
	
	.btn-outline {
		background: transparent;
		color: #3b82f6;
		border: 2px solid #3b82f6;
	}
	
	.btn-outline:hover:not(:disabled) {
		background: #eff6ff;
	}

	/* Sizes - dynamic via template expression */
	.btn-small {
		padding: 0.25rem 0.75rem;
		font-size: 0.875rem;
	}
	
	.btn-medium {
		padding: 0.5rem 1rem;
		font-size: 1rem;
	}
	
	.btn-large {
		padding: 0.75rem 1.5rem;
		font-size: 1.125rem;
	}

	/* State modifiers - conditional via class: directive */
	.btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		transform: none;
	}

	.loading {
		cursor: wait;
		pointer-events: none;
	}
	
	.full-width {
		width: 100%;
	}

	/* Loading spinner */
	.spinner {
		width: 1em;
		height: 1em;
		border: 2px solid currentColor;
		border-top-color: transparent;
		border-radius: 50%;
		animation: spin 0.6s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}
</style>

Exemplos de uso:

<!-- Primary button, medium size (defaults) -->
<Button onclick={handleSave}>Save Booking</Button>

<!-- Secondary variant, large size -->
<Button variant="secondary" size="large">Cancel</Button>

<!-- Loading state -->
<Button loading={isSubmitting}>Submit</Button>

<!-- Disabled state -->
<Button disabled={!isValid}>Continue</Button>

<!-- Full width button -->
<Button fullWidth>Book Now</Button>

O que torna isso poderoso:

Expressões de template (btn-{variant}, btn-{size}) criam nomes de classe dinâmicos
Diretiva class: (class:loading, class:full-width) gerencia estado
Classes estáticas (.btn) fornecem estilos base
Tudo funciona junto de forma integrada

Erros Comuns

1. Esquecer os Dois Pontos

O Problema:

<!-- ❌ This sets a STATIC class named "selected" -->
<!-- It's always there, doesn't change -->
<div class="selected">
	Content
</div>

A Solução:

<!-- ✅ This conditionally applies the class -->
<!-- It appears/disappears based on the variable -->
<script>
	let selected = $state(false)
</script>

<div class:selected>
	Content
</div>

Por que isso importa: Sem os dois pontos, você tem apenas uma classe CSS comum. A mágica do class: é que ele é reativo — ele atualiza quando seu estado muda.

2. Condições Conflitantes

O Problema:

<script>
	let hasSuccess = $state(false)
	let hasError = $state(false)
</script>

<!-- ❌ Both could be true at the same time! -->
<div class:success={hasSuccess} class:error={hasError}>
	Message
</div>

Se ambas forem verdadeiras, o elemento recebe class="success error". Seu CSS pode conflitar:

.success { color: green; }
.error { color: red; }  /* Which color wins? */

A Solução:

<script>
	let status = $state('idle') // 'idle' | 'success' | 'error'
</script>

<!-- ✅ Only one can be true at a time -->
<div 
	class:success={status === 'success'} 
	class:error={status === 'error'}
>
	Message
</div>

Ou use expressões de template:

<div class="message message-{status}">
	Message
</div>

3. Definições de Estilo Ausentes

O Problema:

<script>
	let active = $state(false)
</script>

<!-- ❌ Applying a class that isn't styled -->
<div class:active>
	Content
</div>

<style>
	/* Oops! .active is never defined */
	div {
		padding: 1rem;
	}
</style>

A classe é aplicada ao DOM, mas nada acontece visualmente porque não há estilos para .active.

A Solução:

<script>
	let active = $state(false)
</script>

<div class:active>
	Content
</div>

<style>
	/* ✅ Define the styles */
	div {
		padding: 1rem;
		transition: background 0.2s;
	}
	
	.active {
		background: #eff6ff;
		border-left: 4px solid #3b82f6;
	}
</style>

Nota: O Svelte emitirá avisos sobre seletores CSS não utilizados, mas classes dinâmicas geradas via expressões de template (class="btn-{variant}") não acionarão avisos, pois o Svelte não consegue rastreá-las em tempo de compilação.

4. Erros de Digitação em Nomes de Classes

O Problema:

<div class:isActive>  <!-- Variable name: isActive -->
	...
</div>

<style>
	.is-active {  /* ❌ Class name: is-active (with dash) */
		/* Won't match! */
	}
</style>

A Solução:

<!-- Either match exactly -->
<div class:is-active={isActive}>  <!-- ✅ Explicit mapping -->

<!-- Or rename the variable -->
<script>
	let is_active = $state(false)  /* Can't use dashes in JS */
</script>
<div class:active={is_active}>  <!-- ✅ Simpler -->

5. Complicar Demais Casos Simples

O Problema:

<!-- ❌ Too complex for a simple boolean -->
<script>
	let selected = $state(false)
	let classes = $derived(selected ? 'card selected' : 'card')
</script>

<div class={classes}>...</div>

A Solução:

<!-- ✅ Much cleaner -->
<script>
	let selected = $state(false)
</script>

<div class="card" class:selected>...</div>

Regra geral: Use class: para booleanos simples, use classes computadas para lógica complexa.

Resumo

Classes dinâmicas permitem que os estilos reajam ao estado. Use class:name para condicionais simples, expressões de template para nomes de classes computados, e funções auxiliares para combinações complexas.

Principais aprendizados:

class:name={condition} para classes condicionais
Abreviação class:name quando a variável corresponde ao nome da classe
class="btn-{variant}" para nomes de classes computados
Combine classes estáticas e dinâmicas livremente

Próximos Passos

O ServiceCard está com boa aparência. Continue com Estilizar o Formulário de Reserva para criar uma experiência de formulário refinada.

Estilos que Reagem ao Estado

O que Você Vai Aprender

A Diretiva class:

O que é uma Diretiva?

Como Funciona

Sintaxe Abreviada

Um Exemplo Completo

Condições Explícitas

Quando os Nomes Não Coincidem

Exemplo Básico

Usando Expressões

Múltiplas Condições em um Elemento

Combinando Estático e Dinâmico

O Melhor dos Dois Mundos

Como Funciona

Exemplo Completo

Por que Combiná-los?

Padrão Comum: Base + Variante + Estado

Expressão de Classe

Nomes de Classe Dinâmicos com Template Literals

Como Funcionam as Expressões de Template

Exemplo Completo

Múltiplas Variáveis

Quando Usar Expressões de Template vs. class:

Ternário no Atributo de Classe

Situações de Um ou Outro

O que é um Operador Ternário?

Exemplo Básico

Por que Não Usar class:?

Múltiplas Classes no Ternário

Combinando com Classes Estáticas

Múltiplas Classes Dinâmicas

Quando as Coisas Ficam Complexas

Usando $derived com Arrays

Abordagem com Função Auxiliar

Avançado: Objetos Condicionais

Exemplo do Mundo Real: Card Dinâmico

Aplicar ao BookIt

Seleção de Card de Serviço

Erros em Campos de Formulário

Estados de Botão

Erros Comuns

1. Esquecer os Dois Pontos

2. Condições Conflitantes

3. Definições de Estilo Ausentes

4. Erros de Digitação em Nomes de Classes

5. Complicar Demais Casos Simples

Resumo

Próximos Passos

A Diretiva `class:`

Quando Usar Expressões de Template vs. `class:`

Por que Não Usar `class:`?