Préprocesseur CSS

Ajouter des liens
Un article de Wikipédia, l'encyclopédie libre.

Un préprocesseur CSS est un outil (ou programme) informatique permettant de générer dynamiquement des fichiers CSS. L'objectif est d'améliorer l'écriture de ces fichiers, en apportant plus de flexibilité au développeur web.

Principe[modifier | modifier le code]

Comme son nom l'indique, un préprocesseur CSS intervient avant le traitement des fichiers CSS par les navigateurs web. Il se situe soit côté serveur, soit côté client[1]. Il permet de générer dynamiquement un fichier CSS standard (aux normes W3C) à partir d'un ou de plusieurs fichiers source qui disposent d'une syntaxe plus étendue que le CSS[2].

Il existe plusieurs préprocesseurs CSS, chacun possédant une syntaxe et un langage qui leur est propre. Bien qu'ils étendent la structure du CSS, ils restent indépendants des normes CSS existantes. Parmi les plus connus se trouvent Sass, LESS et Stylus[3]. L'objectif des préprocesseurs CSS est d'ajouter des fonctionnalités qui permettent au développeur de mieux structurer son code, fonctionnalités qui pour beaucoup manquent au CSS[4]. En créant une couche d'abstraction, elles visent à améliorer la maintenabilité et la clarté du code, à améliorer sa structure, à éviter les répétitions (philosophie de programmation "DRY"), et ainsi à augmenter la productivité du développeur[5]. Quelques-unes des fonctionnalités offertes par les préprocesseurs CSS incluent généralement : les variables, l’imbrication (hiérarchisation) du code, les mixins, les opérations mathématiques et logiques, les conditions, les boucles et les importations[3].

Exemples[modifier | modifier le code]

Pour des exemples sur les fonctionnalités et la syntaxe d'un préprocesseur CSS, voir l'article sur le langage LESS.

Traitements complémentaires[modifier | modifier le code]

Certains préprocesseurs CSS fournissent des traitements complémentaires sur les fichiers CSS. Par exemple, les Google Stylesheets proposent la minification du code, la vérification syntaxique, l'inversion RTL (Right-To-Left en anglais), et le renommage de classe[6]. Ces opérations sont assimilées à du post-traitement CSS, travail dédié généralement aux "postprocesseurs" CSS[7].

Avantages et inconvénients[modifier | modifier le code]

Tout le monde ne plaide pas forcément en faveur de l'utilisation des préprocesseurs CSS. Voici quelques arguments qui peuvent être avancés à leur encontre[8] :

  • "Ils complexifient CSS", la syntaxe des préprocesseurs étant plus complexe que le CSS de base.
  • "Ils n'ajoutent pas de fonctionnalités CSS aux CSS", les préprocesseurs ne pouvant générer que du CSS standard.
  • "Ils ne font pas (toujours) gagner de temps", leur utilisation ne se justifiant pas pour des projets de taille modeste.
  • "Ils peuvent être dangereux pour le standard CSS", leurs fonctionnalités risquant de faire stagner l'évolution du CSS.

Pour d'autres, de telles raisons ne sont pas suffisantes, le niveau d'abstraction et la flexibilité obtenus par les préprocesseurs CSS s'avérant plus bénéfiques que toute autre considération[9].

Liste de préprocesseurs CSS[modifier | modifier le code]

Nom Site officiel Dernière version Licence
Sass http://sass-lang.com 3.5.6 () MIT
LESS http://lesscss.org 3.8.1 () Apache 2
Stylus http://stylus-lang.com 0.54.2 () MIT
Closure Stylesheets https://github.com/google/closure-stylesheets 1.2.0 () Apache 2
CSS Preprocessor http://csspp.org 1.0.9 () GNU GPL v2
CSS-Crush http://the-echoplex.net/csscrush 2.4.0 () Libre
Myth http://www.myth.io 1.5.0 () MIT
Rework https://github.com/reworkcss/rework 1.0.1 () MIT
xCSS (Andrey Popp) https://github.com/andreypopp/xcss 1.2.5 () MIT
Clay http://fvisser.nl/clay Libre
DtCSS https://code.google.com/p/dtcss 1.2.6 () GNU GPL v3
Turbine https://github.com/TurbineCSS/Turbine 1.1.0 beta1 () GNU GPL v3
xCSS (Anton Pawlik) http://xcss.antpaw.org/ 1.0.1 () MIT
CSS Cacheer http://retired.haveamint.com/archive/2008/05/30/check_out_css_cacheer v003 () BSD
Switch CSS http://switchcss.sourceforge.net 1.01 () GNU GPL v2
DRY-CSS https://www.npmjs.com/package/drycss 1.0.1 ISC
xCSS Sygnal http://docs.xcss.sygnal.com ? Propriétaire ?

Références[modifier | modifier le code]

  1. ↑ « Les préprocesseurs CSS, c'est quoi ? », sur L'ami du développeur (consulté le )
  2. ↑ « Qu’est ce qu’un préprocesseur CSS ? - agence AntheDesign », sur Agence web Oise, création et refonte de site Internet, référencement (consulté le )
  3. ↑ a et b (en-US) « An Introduction to CSS Pre-Processors: Sass, LESS and Stylus | HTML Mag », sur HTML Mag (consulté le )
  4. ↑ « LESS - Alsacreations », sur www.alsacreations.com (consulté le )
  5. ↑ Kaelig Deloumeau-Prigent, CSS maintenables : avec Sass & Compass, Paris, Eyrolles, , 237 p. (ISBN 978-2-212-13640-1, lire en ligne), p. 131
  6. ↑ « google/closure-stylesheets », sur GitHub (consulté le )
  7. ↑ « Les postprocesseurs CSS », sur iamvdo.me (consulté le )
  8. ↑ « Pourquoi je n'utilise pas les préprocesseurs CSS? », sur iamvdo.me (consulté le )
  9. ↑ « Les idées reçues sur les préprocesseurs CSS (Sass, Less...) - Human Coders Blog », sur Human Coders Blog (consulté le )

Articles connexes[modifier | modifier le code]

Ce document provient de « https://fr.wikipedia.org/w/index.php?title=Préprocesseur_CSS&oldid=176532409 ».