Tip CSS: écrivez moins avec LESS !

Publié par Gui dans CSS, Tips

Je vous parlais il y a quelque temps d’avoir une approche orientée objet dans l’écriture des feuilles de styles, voici maintenant un réel framework Javascript « LESS » qui apporte à vos CSS un réel comportement objet.

Le but de LESS est de vous apporter un confort et un gain de temps dans l’écriture des CSS ainsi qu’une réelle logique de développement. L’approche Orientée Objet a déjà fait ses preuves en matière de web, tous les CMS sont basés sur des frameworks orientés objet, alors pourquoi pas le CSS ?

Principe

Il y a deux méthodes pour faire fonctionner ce framework. La première, que nous n’utiliserons pas ici, est de compiler le CSS au format .less directement depuis une console (basé sur Ruby), la deuxième est d’appeler un fichier JS qui va interpréter à la volée ce CSS.

Introduction

Pour démontrer l’éfficacité de LESS, nous allons créer une simple page web – deux colonnes avec un peu de CSS.

Voici notre page HTML :

brewfestgb
<head>
     <title>Ecrivez moins avec Less</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="css/style.less" rel="stylesheet/less" type="text/css" />
	 <script type="text/javascript"
	 src="http://lesscss.googlecode.com/files/less-1.0.35.min.js"></script>
</head>
<body>

<div id="global">

	<div id="header">
		<h1>Mon beau titre</h1>
	</div>

	<div id="container">

		<div id="page">
			<h2>Content</h2>
			<p>Lorem ipsum ...</p>

			<p>Lorem ipsum ...</p>

			<p>Lorem ipsum ...</p>
		</div>

		<div id="sidebar">

			<div class="box">
				<h3>Title</h3>
				<p>Lorem ipsum ...</p>
			</div>

			<div class="box">
				<h3>Title</h3>
				<p>Lorem ipsum ...</p>
			</div>

			<div class="box">
				<h3>Title</h3>
				<p>Lorem ipsum ...</p>
			</div>

		</div>

	</div>

</div>

</body>

Et voici maintenant le CSS classique associé :

body{
	background:#222;
	font-family:Trebuchet MS;
}

p{
	color:#BBBBBB;
	font-size:0.7em;
	margin-bottom:0.5em
}

#header{
	background: #eee;
	-moz-border-radius:0.5em;
	padding:5px 10px
}

#header h1{
	color:#777;
	margin:0
}

#container{
	overflow:hidden;
	padding:10px
}

#page{
	width:70%;
	float:left;
}

#page h2{
	color:#888;
}

#page p{
	color:#fff;
}

#sidebar{
	float:right;
	width:30%
}

#sidebar .box{
	padding:10px;
	background:#777;
	-moz-border-radius:0.3em;
	margin-bottom:1em
}

#sidebar .box h3{
	color:#111;
	margin:0
}

#sidebar .box p{
	color:#eee
}

Ce qui donne une page comme celle-ci :

Transformation

Nous allons à présent transformer cette feuille de style en un fichier .less. La liste des fonctionnalités est disponible sur le site officiel.

Parmi celles-ci, j’ai particulièrement apprécié :

  • La gestion de variables
  • La nouvelle forme d’héritage objet (ou nested rules)
  • La gestion de fonctions (ou mixins)
  • Les opérations mathématiques

Voici donc notre nouveau fichier CSS : style.less

/* Définition de variables */
@primary_color: #777;
@secondary_color: #bbb;
@width: 960px;

/* Fonction pour les coins arrondis */
.rounded(@radius: 0.5em) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

body{
	/* Eclaircissement de la couleur de fond
	Grâce à la fonction de division */
	background:@primary_color/4;
	font-family:Trebuchet MS;
}

p{
	color:@secondary_color;
	font-size:0.7em;
	margin-bottom:0.5em
}

#header{
	background: @secondary_color*1.2;
	/* On applique la fonction de coins arrondis */
	.rounded(.5em);
	padding:5px 10px;

	/* Héritage objet */
	h1{
		color:@primary_color;
		margin:0
	}
	width: @width;
	margin:0 auto;
}

#container{
	overflow:hidden;
	padding:10px;
	margin:0 auto;
	width:@width
}

#page{
	width:70%;
	float:left;
	p{
		color:@secondary_color*2
	}
	h2{
		color:@primary_color*1.1
	}
}

#sidebar{
	float:right;
	width:30%;
	.box{
		padding:10px;
		background:@primary_color;
		.rounded(.3em);
		margin-bottom:1em;
		p{
			color:@secondary_color*1.2;
		}
		h3{
			color:#111;
			margin:0
		}
	}
}

Le grand atout de ce framework est la visibilité et l’accessibilité du code css qui rend la feuille de style beaucoup plus « propre » pour une future modification. Il y a même beaucoup moins de paramètres à remplacer (fini le rechercher/remplacer !).

L’héritage objet est très pratique et permet de gérer tout notre markup convenablement et sans s’y perdre.

Vous pouvez consulter la page web et les sources ici: tuts.guillaumevoisin.fr/css/less/

Le mot de la fin

J’ai été très séduit par cette librairie LESS, à tel point que je ne comprends pas pourquoi ces fonctionnalités ne sont pas inclues de base dans le CSS. Peut être avec CSS 4 ?

En attendant, cela reste une manière très intelligente, évolutive et maintenable de coder ses feuilles de style.

Que pensez-vous de cette approche et l’avez-vous déjà utilisée ?

4 commentaires

  1. Anthony

    Roooooh ça faisais un moment qu’on attendais ce type de framework !

    C’est cependant dommage de voir ce type de système en JS, ça ajoute de la charge coté client, c’est étrange de ne pas avoir ce type de système en PHP avec gestion du cache.

    Il y as peut être un projet à monter.

  2. Kalonji

    Bonjour,

    ça l’air interessant tous ça, mais je ne comprends pas vraiment l’interet encore ?

    Pour les variables, ne pouvions-nous pas faire cela déjà en PHP ?
    Pour les héritage, à part imbriquer des style dans d’autre mais ça en revient au même non ?
    Pour les fonctions, c’est un peu comme faire une class et l’appliquer ensuite ?

    Les opérations , ça c’est la class !!!!!!!!!!

    Merci de ta réponse 😉

    Bonne journée.

    • Gui

Laisser une réponse


Post shadow