Inconvénients du CSS

Ce qui rend CSS difficile à écrire

Depuis la création du langage CSS (Cascading Style Sheets), les intégrateurs de pages Web on pu s'en servir pour réaliser des interfaces réussies sans pour autant se soucier de la manière dont leur HTML est présenté (ce qui n'était pas le cas des années avant). L'arrivée de CSS3 a permis de franchir d'autres niveaux de design on se passant du Javascript qui était jusqu'ici le seul moyen qui permettait d'intégrer des effets d'animation et d'interactivité de manière générale. Cependant, un autre problème est apparu. En effet, les feuilles de styles deviennent de plus en plus énormes et peuvent contenir des milliers et des milliers de lignes. Parmi ces lignes il y a sûrement des styles qui se répètent comme les couleurs de polices, les marges internes des conteneurs, les bordures des images... Il est alors évident que si une modification d'un style particulier doit prendre place, cela conduit à des modifications dans plusieurs endroits (souvent par rechercher, copier et coller).

Mis à part le problème des styles qui sont répétés et éparpillés partout dans la feuille, la nature elle même de la déclaration des sélecteurs devient de plus en plus complexe genre:

ce qui signifie les liens externes survolés emboités directement dans des balises <span> déclarés dans l'élément identifié par citation.
Je souligne qu'il y a des expressions pour sélecteurs encore plus complexes.

Je vous invite encore une fois à contempler ce bout de code CSS:

Peu importe le résultat obtenu par ce code CSS, il y a quand même quelques points qui devraient sans doute attirer votre attention:

• Les couleurs #A12520 et #F8F8F8 sont déclarés dans plusieurs endroits.
• Le border-radius est déclaré (avec les préfixes vendeur) dans deux endroits (avec des valeurs différentes bien entendu).
• S'il y a d'autres boutons comme "submit" ou "reset" (ou encore la balise <button>) alors ils devraient probablement s'attribuer le même style déclaré pour le bouton de l'exemple (probablement avec de légères modifications comme la couleur d'arrière-plan).

Le code ci-dessus ne contient que quelques lignes et pourtant il est truffé de redondances. Autrement dit, imaginez qu'il était plus gros que cela, alors on trouverait par exemple la couleur #A12520 dans des dizaines d'endroits. Le jour où cette couleur ne nous plairait plus il faudrait la modifier dans chacun de ces emplacements.

Le border-radius (dont l'effet est très apprécié par les intégrateurs), lui aussi, serait déclaré avec ses préfixes vendeurs dans de nombreux endroits. Ce qui nous mène à conclure que le code résultant serait trop gros et difficilement maintenable.

Heureusement, LESS est là

Le pré-processeur LESS

LESS dont le site officiel est http://lesscss.org est un pré-processeur pour le langage CSS. C'est à dire qu'il permet de générer dynamiquement des styles CSS. On le trouve sur de nombreux frameworks CSS tel que Bootstrap et il a aussi influencé un autre pré-procésseur CSS qui est le langage SASS dont le cours est disponible sur ce lien.

LESS est né en 2009 et ses premières versions étaient écrites en Ruby avant qu'il soit réécrit en Javascript.

Ce langage s'appuie sur les fondements d'un langage de programmation dont il reprend les principales bases comme les variables, les fonctions, les opérations... Sa syntaxe est tellement simple et intuitive surtout pour les personnes qui connaissent déjà le CSS. D'ailleurs l'écriture CSS est syntaxiquement correcte en LESS. Autrement dit, on peut écrire un fichier LESS entièrement en CSS (bien que ça ne servirait pas à grand chose puisque le principe même de LESS c'est de générer dynamiquement le CSS).

Pré-requis

Pour bien profiter de ce petit cours, il est préférable que vous soyez initié en HTML (une évidence).

N'oubliez pas que LESS sert à générer dynamiquement du CSS mais utilise principalement ce langage dans ses déclarations, alors il est recommandé d'avoir de bonnes bases en CSS avant de s'y lancer.

Voilà le lien vers le cours de CSS sur ce site: http://www.chiny.me/css-cascading-style-sheets-5.php.