Comment coiffer les applications sveltes

Les frameworks web vont et viennent, mais l’un des plus prometteurs est Svelte. Svelte est une excellente alternative à React et, bien qu’il ait déjà une grande communauté, c’est définitivement un framework à surveiller. Svelte permet de styliser facilement vos applications, avec plusieurs approches disponibles.

Styliser les applications Svelte

Chaque bibliothèque ou framework d’interface utilisateur nécessite une méthode pour styliser ses composants. La plupart des frameworks basés sur des composants prennent en charge la méthode traditionnelle de stylisation des composants : il suffit d’importer le fichier CSS et le tour est joué. Svelte ne fait pas exception. Dans Svelte, il y a trois façons principales de styliser vos applications, chacune avec ses propres avantages et inconvénients.

Mise en place de votre projet Svelte

Pour installer Svelte, vous pouvez utiliser l’outil de construction de front-end ViteJS. Pour mettre les choses en place, assurez-vous que le moteur d’exécution Node.js et le gestionnaire de paquets Node (NPM) sont correctement installés sur votre ordinateur. Vous pouvez vérifier la disponibilité de Node.js et de NPM en exécutant la commande suivante dans le terminal :

Après vous être assuré que Node fonctionne, ouvrez le terminal et exécutez la commande suivante :

Ou bien :

Cela devrait créer un nouveau projet Vite. Définissez le nom du projet comme vous le souhaitez, le framework doit être « Svelte » et la variante doit être JavaScript (mais vous pouvez utiliser TypeScript si vous êtes à l’aise avec cela). Maintenant, passez au répertoire du projet avec l’option cd et exécutez la commande suivante pour installer les dépendances nécessaires :

Ou bien :

Après avoir installé les dépendances, vous pouvez démarrer le serveur de développement en exécutant :

Ou bien :

Définition du balisage du projet

Ouvrez le projet dans l’éditeur de code de votre choix et supprimez le fichier actifs et lib . Veillez également à effacer le contenu du dossier app.css et le fichier App.svelte . Ouvrez le fichier main.js et remplacez le contenu par ce qui suit :

Ensuite, ouvrez le fichier App.svelte et dans le fichier script et créez un tableau qui contiendra différents liens, comme ceci :

Sous la balise script créez une balise principale avec une div « container » qui contiendra toutes les images. Ensuite, il faut parcourir tous les éléments de l’élément imageLinks et rendez un élément image pour chaque itération.

Après avoir défini le balisage, vous pouvez maintenant procéder au style de l’application à l’aide de la première méthode – importations CSS directes.

Styliser les composants Svelte avec des importations CSS directes

L’une des méthodes les plus courantes pour styliser un composant Svelte consiste à écrire un fichier CSS externe et à l’importer directement dans le composant. Au niveau supérieur dans le fichier script importez le fichier app.css comme suit :

Maintenant, ouvrez le fichier app.css et définissez la propriété display de la classe « container » à « grid », et définissez la propriété display de la classe « container » à « grid ». padding de la classe « image-container » à 10px :

Sélectionnez les images et rendez-les réactives, puis ajoutez le style approprié pour les images survolées :

Lorsque vous exécutez le code dans le navigateur, voici ce que vous devriez voir :

Avantages des importations CSS directes

• Réutilisation : En définissant votre CSS dans un fichier externe, il est facile de réutiliser les mêmes styles dans plusieurs composants. Cela peut s’avérer utile lorsque vous souhaitez que plusieurs composants partagent le même style.
• Flexibilité : Si vous décidez de remanier votre site web, vous pouvez mettre à jour le style dans le fichier CSS externe sans avoir à modifier la structure HTML. Cette séparation des préoccupations permet une plus grande flexibilité dans l’adaptation de la conception de votre site.

Inconvénients des importations CSS directes

• Complexité de la cascade: Bien que la définition de votre CSS dans un fichier externe soit puissante, elle peut également entraîner des conflits inattendus et des dérogations lorsque les styles externes interagissent les uns avec les autres. Cela peut entraîner un débogage et un dépannage fastidieux. Vous pouvez éviter les conflits de style inattendus dans Svelte en utilisant des fichiers style directement dans le fichier Svelte.
• Augmentation du temps de chargement: Lorsqu’un utilisateur visite votre site web, il doit télécharger le fichier CSS externe en plus du fichier HTML et, éventuellement, du fichier JavaScript. Cela peut ajouter quelques millisecondes au temps de chargement, ce qui peut sembler peu, mais qui peut s’additionner si vous avez beaucoup de fichiers CSS externes.

Stylisation à l’aide des balises de style Svelte

La deuxième façon de styliser les composants Svelte consiste à utiliser les balises de style style fournies par Svelte. La syntaxe ressemble à ceci :

L’un des avantages de cette méthode est qu’elle limite les styles au composant, ce qui signifie que les styles d’un composant ne peuvent pas affecter les styles d’un autre composant. Il est important de noter que les balises style dans Svelte ont la priorité la plus élevée et remplacent tout style CSS externe pour un élément donné. Pour illustrer cela, ajoutez ce qui suit à la fin de la balise App.svelte fichier

Ensuite, ajoutez ce qui suit à la fin du fichier App.css à la fin du fichier App.css :

Lorsque vous exécutez le code dans le navigateur, vous remarquerez que le fichier h1 a une couleur d’arrière-plan rouge, qui remplace la couleur d’arrière-plan jaune définie dans l’élément App.css dans le fichier App.css.

Styliser avec les préprocesseurs CSS

La troisième méthode la plus répandue pour styliser un composant Svelte consiste à utiliser un préprocesseur CSS dans le fichier style dans la balise style . Les préprocesseurs CSS ont de nombreux avantages, ils vous permettent d’utiliser des fonctions avancées, des mixins, et même de supporter le style imbriqué qui est une fonctionnalité nouvelle pour le CSS natif.

Il existe de nombreux préprocesseurs parmi lesquels LessCSS, Sass, Stylus et bien d’autres. Pour utiliser votre préprocesseur préféré, vous devez l’installer en tant que dépendance de développement, en exécutant :

ou en exécutant :

:

Veillez à remplacer le nom par celui du préprocesseur en question. Par exemple, si vous voulez installer Less et l’utiliser dans votre projet, vous devez exécuter ce qui suit :

Ou bien :

:

Après avoir fait cela, vous pouvez ajouter l’option lang à l’attribut style et lui donne la valeur « less ».

Et avec cela, vous pouvez maintenant utiliser toutes les fonctionnalités étonnantes de Less CSS pour styliser votre composant svelte.

Qu’est-ce qui rend Svelte si étonnant ?

Chaque fichier Svelte se termine par l’extension « .svelte ». Le compilateur Svelte analyse le code écrit dans le fichier « .svelte ».svelte et génère le JavaScript et le CSS appropriés à envoyer au navigateur. Ce processus permet d’obtenir des pages web plus rapides, ce qui améliore l’expérience de l’utilisateur.

Si vous souhaitez utiliser une bibliothèque JavaScript externe dans votre projet, vous pouvez l’importer directement dans votre projet.svelte et l’utiliser sans avoir besoin d’un wrapper (contrairement à React).