Quel est le meilleur préprocesseur CSS?

Préprocesseurs CSS: liens rapides

Toupet
Moins
Style
PostCSS
Plaisir
CSS-Crush
Jardin
Composants de style

Il existe un certain nombre de préprocesseurs CSS sur le marché. Vous avez probablement entendu parler de Less et Sass (sinon, consultez notre article sur qu'est-ce que Sass? ), mais il existe un certain nombre d'autres options qui pourraient être mieux adaptées à vos besoins. Ici, nous examinons de plus près tous les différents préprocesseurs, ainsi que les avantages et les inconvénients de chacun. Utilisez les liens rapides sur la droite pour accéder à une section particulière.

Un mot d'avertissement d'abord. En 2007, Jon Christopher a écrit un article de blog intitulé Veuillez ne pas utiliser de frameworks CSS , et bon nombre de ses commentaires sont vrais aujourd'hui. «Un gros problème avec les frameworks est que les développeurs émergents s'attachent à un framework plutôt qu'au code sous-jacent lui-même. Les connaissances acquises dans ce cas entourent un cadre spécifique, ce qui limite considérablement le développeur. » Alors que les préprocesseurs peuvent sans aucun doute vous faciliter la vie, il y a toujours un risque que le fait de s'appuyer sur un framework réduise votre compréhension du langage de base en dessous.



01. Toupet

«Sass est le langage d'extension CSS de qualité professionnelle le plus mature, stable et puissant au monde». Cela vient des fabricants, mais c’est assez difficile à contester. Depuis plus de 11 ans, l'équipe derrière Sass a travaillé avec diligence pour créer un préprocesseur riche en fonctionnalités, doté d'une grande communauté à prendre en charge et à développer, ainsi que ses utilisateurs, et a été adopté par certains des plus grands noms de l'industrie. Il offre de loin la communauté la plus engagée, avec des forums, des sites dédiés et des tutoriels sur toutes les principales plates-formes d'enseignement du code - jetez un œil à La voie Sass en particulier.

Sass est construit sur Ruby et propose deux types de syntaxe différents selon les préférences de l'utilisateur. Sass n'utilise pas d'accolades autour des sélecteurs ou des points-virgules à la fin des règles, mais en termes de fonctionnalités, il est identique à SCSS (Sassy CSS), qui utilise toujours les deux.

SCSS est le choix de langage le plus courant, principalement parce qu'il ne diffère pas syntaxiquement du CSS simple, ce qui facilite vraiment l'adoption des principes de base. De plus, chaque exécuteur de tâches majeures dispose d'un module à utiliser avec Sass.

Il existe également un port C / C ++ du précompilateur Sass appelé LibSass qui dissocie Sass de Ruby. Il est rapide, portable et facile à créer, et s’intègre à une variété de plates-formes et de langages.

Avantages

  • Barrière à l'entrée la plus basse - vous pouvez exploiter certaines des fonctionnalités les plus puissantes en apprenant simplement quelques nouveaux symboles
  • Les nouveaux collaborateurs ne devraient avoir aucun mal à le récupérer.
  • LibSass (qui dissocie Sass de Ruby) est rapide, portable et facile à construire
  • De loin la communauté la plus engagée, avec beaucoup de soutien et de ressources

Les inconvénients

  • Comme pour tout framework, vous risquez de devenir dépendant de cette approche et de ne pas saisir pleinement le langage sous-jacent

02. Moins

Less est stylistiquement très similaire à Sass dans son ensemble de fonctionnalités, et donc quiconque a utilisé l'un se sentira à l'aise avec l'autre. Sa popularité a considérablement augmenté après son utilisation dans la source Twitter Bootstrap. Depuis, il est passé à Sass dans Bootstrap 5, mais il a laissé beaucoup de gens à l'aise avec sa syntaxe.

Le fait qu'il soit si similaire à Sass rend difficile de préconiser lorsque Sass est plus largement utilisé, développé activement et riche en fonctionnalités - en effet, cette fonctionnalité serait de comparer les deux (comme beaucoup l'ont fait auparavant) s'il y avait plus de différences et de vente unique points sur Less. Il reste cependant un préprocesseur populaire et puissant.

Avantages

  • Écrit en JavaScript, ce qui facilite la configuration
  • Les applications GUI peuvent regarder et compiler du code pour vous (Crunch, SimpLESS, WinLess, Koala, CodeKit, LiveReload ou Prepros)
  • Une documentation très détaillée et une communauté très active
  • Aide facile à trouver ou exemples précédents
  • Les IDE tels que VS Code, Visual Studio et WebStorm prennent moins en charge soit de manière native, soit via des plugins

Les inconvénients

  • Les usages @ pour déclarer des variables, mais en CSS, @ a déjà un sens (il est utilisé pour déclarer @demi requêtes et @keyframes ) qui peut prêter à confusion
  • Le temps pourrait être mieux passé à apprendre Sass, en raison d'une utilisation plus large
  • S'appuie entièrement sur les mixins plutôt que de vous permettre d'utiliser des fonctions qui peuvent renvoyer une valeur, ce qui peut entraîner des cas d'utilisation légèrement restreints

03. Style

Stylus a été créé par TJ Holowaychuk - un ancien programmeur pour Node.js et le créateur du langage Luna. Sa conception initiale a été influencée par Sass et Less, mais elle offre une gamme plus large de fonctionnalités, un système Node.js ultra-rapide sous le capot, et donne aux utilisateurs la plus grande liberté dans la façon dont ils écrivent leur CSS.

Cette liberté a cependant un inconvénient. Comme Declan de Wet dit: 'Il ne fournit au développeur aucune direction définitive ... une fois que vous êtes enraciné dans des variables, des mixins et des fonctions ne nécessitant pas de signe dollar ajouté ( $ ) ou le symbole «at» ( @ ), vous allez bientôt commencer à réaliser que vous ne pouvez plus faire la différence entre eux. Cela rend le code très déroutant ».

Mozilla a utilisé Stylus pour repenser son réseau de développeurs, et il offre la plupart de ce qui est couvert dans la section Sass, mais avec quelques différences de syntaxe mineures.

Avantages

  • Extrêmement puissant fonctions intégrées
  • Peut faire beaucoup plus d’informatique et de «gros travaux» dans vos styles
  • Écrit en Node.js, qui est rapide et s'intègre parfaitement avec une pile JavaScript 2018
  • La syntaxe «pythonique» semble beaucoup plus claire et nécessite moins de caractères

Les inconvénients

  • Trop indulgent, ce qui peut prêter à confusion
  • Ne semble pas être en développement très actif

04. PostCSS

Sur la base de son approche, PostCSS est l’une des plus grandes «alternatives» à Sass, Less et Stylus en matière de prétraitement: il exploite un système de plugins modulaires qui permet à l’utilisateur de personnaliser son ensemble de fonctionnalités et sa compilation autant qu’il le souhaite. Cela signifie qu'au lieu de simplement adopter une bibliothèque dans son intégralité, vous pouvez choisir de quoi elle est composée.

Contrairement à de nombreux autres préprocesseurs, PostCSS ne fait aucune hypothèse sur les fonctionnalités ou la pile que vous utilisez. Au lieu de cela, vous ajoutez simplement les plugins que vous souhaitez en fonction des fonctionnalités que vous souhaitez utiliser. Vous pouvez ajouter des plugins pour lui donner exactement les mêmes fonctionnalités qu'une bibliothèque comme Sass. Cette approche modulaire signifie que vous pouvez même utiliser des plugins complètement par eux-mêmes, tels que le préfixage automatique et la minification, plutôt que de créer une bibliothèque complète.

Avantages

  • Approche modulaire sans opinion - peut être fortement personnalisée
  • Rédigé en CSS pur, pour que les développeurs n'aient pas besoin d'apprendre une nouvelle syntaxe
  • Vitesse (si vous n'utilisez que quelques plugins)

Les inconvénients

  • Vitesse (encore une fois) - Si vous imitez une autre configuration, PostCCS n'a pas l'avantage de performances qu'un outil dédié et optimisé offrira
  • Généralement, plus d'efforts à installer et à maintenir qu'un préprocesseur conventionnel, car vous comptez sur différents plugins gérés par différentes personnes

05. Plaisir

Pleeease adopte une approche légèrement différente du prétraitement en ce sens qu'elle tente de résoudre certains des problèmes les plus pratiques avec CSS plutôt que de se concentrer uniquement sur sa syntaxe ou sa mise en page. Son site Web explique: «Une application Node.js qui peut facilement traiter votre CSS. Il simplifie l'utilisation des préprocesseurs et les combine avec le meilleur des post-processeurs. Il aide à créer des feuilles de style propres, prend en charge les anciens navigateurs et offre une meilleure maintenabilité ».

Pleeease propose des solutions de secours aux problèmes courants avec les navigateurs plus anciens, notamment des pixels de secours lorsque vous utilisez rems comme mesure de choix, et des filtres de secours pour IE8 lorsque vous utilisez l'opacité.

Il a même une fonctionnalité pour vous permettre d'utiliser la syntaxe de votre préprocesseur préféré comme Sass ou Less dans la configuration de Pleeease (ainsi que du CSS pur), bien que cela soit expérimental à ce stade.

Avantages

  • Un autoprefixer intégré ajoute des préfixes de fournisseur, en utilisant les données de caniuse.com
  • Génère des cartes source dans lesquelles vous pouvez voir le code d'origine
  • Un outil plutôt qu'une bibliothèque de syntaxe, vous pouvez donc l'utiliser avec du CSS pur ou avec un autre préprocesseur
  • Utilisations claires et pratiques pour gérer les bizarreries des navigateurs plus anciens

Les inconvénients

  • Peu connu, ce qui peut rendre la recherche de ressources difficile
  • La fonctionnalité qui permet l'inclusion d'autres préprocesseurs est complètement expérimentale à ce stade

06. CSS-Crush

CSS-Crush est un préprocesseur inspiré des normes conçu pour permettre un flux de travail CSS moderne et épuré. Il est écrit en PHP et présente une combinaison des fonctionnalités standard que vous attendez de l'un des préprocesseurs les plus populaires (variables, imbrication, mixins) ainsi que certaines des approches les plus basées sur les outils que nous avons couvertes comme Pleeease (préfixage du fournisseur, minification ).

L'arrière-plan PHP de CSS-Crush signifie qu'il peut être parfaitement utilisé en conjonction avec les systèmes de gestion de contenu PHP populaires tels que WordPress ou Drupal. C'est probablement son plus grand avantage, car si vous êtes confiné à ce que vous pouvez faire à l'intérieur d'un CMS, vous pouvez l'installer en tant que plugin tout en bénéficiant de certains des avantages d'avoir un préprocesseur.

Un bonus est que ses préfixes de fournisseur pour les propriétés, les fonctions, @ -des règles et même des déclarations complètes sont générées automatiquement. Cela signifie que vous pouvez maintenir la prise en charge de plusieurs navigateurs tout en gardant votre code source propre.

Avantages

  • Intégration soignée avec les CMS PHP populaires (WordPress, Drupal, etc.)
  • Open source, vous pouvez donc théoriquement résoudre vos propres problèmes
  • Plugins utiles disponibles, tels que l'utilisation des rôles aria et du canevas HTML
  • Préfixe automatique intégré pour les styles inter-navigateurs

Les inconvénients

  • Malgré un large éventail de fonctionnalités, manque de popularité au-delà de la communauté de programmation PHP régulière
  • Manque de maintenance (au moment de la rédaction)

07. Jardin

Cette option est complètement différente de toutes les autres car elle supprime à peu près le langage conventionnel du CSS tel que nous le connaissons. Garden est une bibliothèque de rendu CSS dans Clojure et ClojureScript. Il utilise des vecteurs pour représenter les règles et des cartes pour représenter les déclarations. Il est conçu pour «les auteurs de feuilles de style qui s'intéressent à ce qui est possible lorsque vous échangez un préprocesseur contre un langage de programmation».

En ce qui concerne les langages de programmation, Clojure est connu pour son architecture propre et son héritage ferme. Pour CSS, cela peut signifier une grande puissance. Cependant, la syntaxe peut être décourageante. Par exemple, pour ne définir aucune épaisseur de police h1 et h2 tags, vous utiliseriez: utilisateur => (css [: h1: h2 {: font-weight 'none'}]) .

Avantages

  • Accès aux fonctionnalités de base d'un puissant langage de programmation dans Clojure
  • Occasion unique de coder un projet entièrement dans le même langage: Clojure pour la programmation backend et Garden pour CSS
  • Le plugin Garden Gnome vous permet de diriger les changements de style directement dans le navigateur sans recharger

Les inconvénients

  • Vous ne pouvez pas simplement copier et coller du CSS ailleurs dans votre travail - chaque extrait de code doit être converti au bon format
  • Syntaxe très différente de celle du CSS standard ou de tout autre préprocesseur, ce qui rend la lecture plus difficile
  • La courbe d'apprentissage pour le jardin est plus raide que les autres options

08. Composants stylisés

Cette dernière option est un pivot des préprocesseurs conventionnels. Je ne le soulève que dans ce contexte car c'est une façon d'écrire vos styles d'une certaine manière et d'une certaine mise en page et de les convertir, parallèlement à la logique de vos composants, en CSS prêt pour le navigateur. Seules les bases sont abordées ici et sa gestion de style.

Styled Components est «CSS-in-JS pour les gens du CSS», comme l’a dit Glen Maddern. Il s’agit de la dernière tentative de création de CSS vraiment modulaire en l’intégrant dans les composants JS que vous écrivez. Il présente un gros avantage par rapport au style React en ligne, car vous n’avez pas à mettre en cache vos attributs et vous déclarez chaque bloc de style directement sur le nom de l’élément sur lequel vous l’utiliserez.

Par exemple, pour créer un composant de titre qui rendra un

tag avec quelques styles, vous écririez ceci:

const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `;

Avantages

  • Vous pouvez réaliser une encapsulation totale de vos composants - chaque élément de balisage, logique Grand suivi, communauté active et propriétaire de projet
  • Représente un changement de direction fascinant
  • Empêcher les 'styles d'ajout uniquement'. Que sont les styles d'ajout uniquement?

Les inconvénients



  • Vous êtes de retour à l'écriture de CSS simple, qui a ses inconvénients
  • Très avisé, car il est conçu pour fonctionner uniquement avec la bibliothèque React JS
  • Vous devez gérer les problèmes et les solutions de secours entre navigateurs à l'aide d'autres méthodes

Cet article a été initialement publié dans le magazine de conception Web créative Web Designer. Acheter le numéro 276 ou s'abonner .

Lire la suite: