Less_logo

Comment optimiser le développement du design de son site web, alors que de plus en plus d’outils, toujours plus performants apparaissent tous les jours ? Si vous souhaitez optimiser le développement de votre design de site web, découvrir davantage de fonctionnalités tout en gagnant de temps, cet article est fait pour vous !

Dans un univers technologique toujours en expansion, il existe une multitude d’outils pour le développement, le graphisme et le design d’une création de site internet, cependant un nom ressort fréquemment : CSS. C’est un  langage informatique conçu pour développer le design et les aspects graphiques des fichiers HTML ou XML d’un site internet. Il en est rendu aujourd’hui à sa troisième version, plus connue sous le nom de CSS3, qui permet un incroyable éventail de fonctionnalités autorisant la création d’éléments graphiques complexes. Dans un soucis de simplification et de structuration de CSS, un nouveau langage appelé LESS, fait son apparition.

Less logo
Qu’est ce que LESS ?

LESS est un langage de développement très proche de CSS. En réalité, il utilise la même sémantique que CSS, c’est à dire qu’il reprend la même structure, les mêmes termes et les même propriétés. En d’autres termes il permet de continuer à développer en CSS en ajoutant de nouvelles fonctionnalités et en modifiant l’organisation du code généré.

Pour utiliser LESS, il vous faut :

  • Créer différents fichiers avec une extension .less. Chaque fichier correspondra à un module de design de votre site que vous souhaitez développer (note : il est également possible de tout mettre en un seul fichier de type .less).
  • Créer un fichier de compilation (avec une extension .less) et spécifier son lien dans votre structure HTML/PHP.
  • Appeler dans ce même fichier la liste des éléments LESS à compiler. Ces éléments peuvent être groupés dans différents répertoires, situés à différents emplacements. L’appel se fera selon la forme suivante : « @import « repertoire_du_fichier/fichier.less; ».
  • Appeler le script JavaScript dans votre structure HTML/PHP. Vous pouvez le faire soit en incluant le lien CDN de LESS, soit en téléchargeant le fichier directement sur votre serveur.
Quel cadre d’utilisation ?

LESS s’utilise dans des projets de génération de feuilles CSS lors de la création ou de la refonte de site internet. Son objectif est de rendre le développement de CSS plus fluide et plus rapide, et d’apporter un complément grâce à ses fonctionnalités d’organisation. Vous pouvez donc utiliser LESS dès lors que votre que votre projet va nécessiter une structuration et une clarté dans le cadre de votre site web.

Pourquoi utiliser LESS ?
  • Une organisation plus claire

LESS permet de répondre à des besoins d’organisation CSS. Il est possible de répartir les différents éléments de votre projet en plusieurs fichiers séparés, eux-mêmes organisés en plusieurs répertoires qui, à la compilation, seront assemblés de manière à obtenir un fichier unique. Vous pouvez donc l’utiliser pour répondre à des problématiques d’organisation d’un développement CSS conséquent, ou si vous disposez à l’avance d’une feuille de route connue de développement CSS, ou dans le cadre d’un développement mutualisé du projet.

  • De nouvelles fonctionnalités

Ce langage informatique permet d’utiliser des variables, des opérations et des fonctions, qui n’étaient pas possibles sous CSS3. LESS conserve également la même sémantique que CSS, ce qui signifie que vous allez pouvoir coder aussi bien en utilisant un langage LESS que CSS tout cela sur une même page ! Très pratique notamment lors d’opérations répétitives ou similaires. Le temps et la facilité de développement sont donc optimisés.

  • Un choix dans la méthode de compilation

La compilation de LESS peut être effectuée par le navigateur de l’internaute, ou bien côté serveur par une unité de gestion indépendante. En d’autres termes, l’assemblage final de vos différents fichiers LESS peut se faire soit par le navigateur de la personne qui consulte votre site internet, soit par un ordinateur distant, ce qui permet de décharger la tâche au navigateur de l’internaute qui visualise votre site. Il peut aussi générer un fichier CSS classique, utilisé par la suite par la page web consultée. Selon votre besoin, vous pouvez donc choisir le juste milieu entre un gain de rapidité d’exécution, de praticité de développement, ou encore de sécurité.


LESS fait aujourd’hui partie des nombreux outils de génération de feuilles de style, et est utilisé par de plus en plus de développeurs.
Il existe d’autres outils de génération de feuilles de styles CSS, comme notamment SASS, qui utilise lui aussi une sémantique CSS, mais une méthode de compilation différente.
Nous avons choisi de mettre en avant LESS car il apporte de réels avantages tels que l’organisation et le gain de temps de développement, il nous serait difficile de ne pas vous le conseiller. Et en prime il est implémenté Open Source, vous n’avez donc plus aucune excuse pour ne pas l’essayer !

Si vous souhaitez en savoir plus sur LESS, n’hésitez pas à nous contacter 😉

En bref, grâce à LESS il est désormais possible d’en faire plus avec moins, et comme disait le célèbre architecte Ludwig Mies :

LESS is MORE !

David
David
Chef de Projet Web et Freelance Web Design. Retrouvez moi sur mon site http://davidaubertin.fr

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *