Cuando trabajamos con Svelte, una de las formas más potentes y limpias de manejar estilos es aplicando clases condicionales. Esto nos permite cambiar la apariencia de nuestros componentes dinámicamente, dependiendo de ciertas condiciones o estados que definamos en nuestro código. Por ejemplo, en un formulario, podemos querer resaltar los campos que no cumplen con una validación para mejorar la experiencia del usuario.
Una manera inicial que podríamos pensar para aplicar estas clases es usar una expresión JavaScript dentro del atributo class. Por ejemplo, podríamos escribir algo así para un campo de texto:
<input class={value.length > 0 ? 'valid' : 'invalid'} bind:value={value} />
Aquí, si el valor tiene algún carácter, se aplicaría la clase valid, y si está vacío, la clase invalid. Luego, en nuestro CSS, definimos estilos para estas clases, como un fondo verde para valid y rojo para invalid. Esto funciona, pero puede volverse un poco confuso y menos legible cuando las condiciones se vuelven más complejas o cuando queremos aplicar varias clases condicionales.
Svelte nos ofrece una sintaxis mucho más sencilla y expresiva para este caso: los modificadores de clase condicional. En lugar de escribir toda la expresión ternaria, podemos usar el atributo class:nombreDeLaClase={condición}. Por ejemplo:
<input
class:valid={value.length > 0}
class:invalid={value.length === 0}
bind:value={value}
/>
Con esto, la clase valid se aplicará solo cuando la longitud del valor sea mayor que cero, y la clase invalid solo cuando esté vacía. Esto hace que el código sea más claro y fácil de mantener.
Además, podemos aprovechar que Svelte busca variables con el mismo nombre que la clase para aplicar la condición. Por ejemplo, si definimos en el script:
<script>
let value = '';
$: invalid = value.length === 0;
$: valid = value.length > 0;
</script>
Entonces, en el markup, podemos simplemente poner:
<input
class:valid={valid}
class:invalid={invalid}
bind:value={value}
/>
Esto mejora la legibilidad y separa la lógica de la presentación.
Un detalle importante que encontramos es que, a veces, Svelte no actualiza automáticamente la interpretación de estas variables cuando el valor cambia, especialmente con el bindeo. Para forzar la actualización, podemos usar eventos como on:keyup para ejecutar una función que actualice las variables relacionadas. Por ejemplo:
<script>
let value = '';
let valid = false;
let invalid = true;
function actualizarEstado() {
valid = value.length > 0;
invalid = value.length === 0;
}
</script>
<input
bind:value={value}
class:valid={valid}
class:invalid={invalid}
on:keyup={actualizarEstado}
/>
Así, cada vez que el usuario presione una tecla, se recalcularán las variables y se aplicarán las clases correspondientes.
Más adelante, podemos explorar otras técnicas para forzar la actualización de variables en Svelte, pero con estas herramientas ya podemos manejar estilos condicionales de forma sencilla y efectiva, mejorando la interactividad y la experiencia visual de nuestras aplicaciones.