Choses à faire

24h dans une journée, et tant de choses à faire !

Introduction à XCSS, compilateur de feuilles de styles

publié le 26 novembre 2009 par Pierre Quillery

Chosesafaire.fr devrait bientôt changer d’apparence, car j’ai décidé de remplacer le thème wordpress un peu passe-partout que j’avais choisi dans un premier temps. À cette occasion, j’ai décidé d’utiliser un nouvel outil pour en faciliter son développement. Il s’agit de XCSS, qui n’est pas à proprement parler un framework CSS (comme Blueprint), mais d’un genre de pré-compilateur.

Il consiste en fait en une classe PHP et un fichier de configuration très simple. Son action se décline en trois parties sur lesquelles je vais m’attarder dans l’ordre : une syntaxe plus souple que le CSS « standard », une organisation rationalisée des fichiers, une compilation vers un fichier unique éventuellement compressé.

Une syntaxe plus souple

Je ne vais pas m’étendre à ce sujet, car la documentation sur le site officiel du projet est déjà très bien conçue, mais voici un exemple qui illustre les possibilités offertes par la syntaxe de XCSS. Voici tout d’abord le contenu classique d’un fichier CSS :

.article {
	margin: 10px;
	color: blue;
}

.article h1 {
	font-size: 3em;
	color: red;
}

.article p {
	line-height: 1.2em;
	/* etc. */
}

Nous venons de définir quelques classes d’éléments contenus dans les articles … Notez que nous sommes obligés de répéter intégralement le contexte pour adresser la classe d’élément visée, ce qui est plutôt fastidieux. XCSS nous permet par exemple de factoriser de la façon suivante :

.article {
	self {
		margin: 10px;
		color: blue;
	}
	h1 {
		font-size: 3em;
		color: red;
	}
	p {
		line-height: 1.2em;
		/* etc. */
	}
}

Intuitivement, le code gagne bien sûr déjà en clarté. Nous pouvons également définir des variables, qui vont nous permettre de limiter la répétition de code, et même faire des opérations mathématiques avec. Par exemple :

vars {
	/* Nous pourrons ainsi facilement changer les polices */
	$font_family_standard: 'Arial', 'Verdana', sans-serif;
	/* Nous allons calculer la taille en pixels des deux colonnes de notre
	blog en fonction du nombre d'or. */
	$taille_totale = 1000px;
	$ratio_nombre_or = 1.618033989;
	$taille_colonne_gauche = [$taille_totale / $ratio_nombre_or];
	$taille_colonne_droite = [$taille_totale - $taille_colonne_gauche];
}

Il est également possible de faire des opérations sur des nombres hexadécimaux, ce qui est idéal pour rendre une couleur plus claire ou plus foncée, créer facilement un dégradé etc. Ces variables seront utilisables par la suite de façon transparente dans n’importe quel fichier XCSS.

Dernier exemple, il est possible de faire hériter une classe d’une autre ; par exemple, si nous voulons avoir à disposition un article spécial dont le fond sera d’une couleur différent des articles normaux :

.articleSpecial extends .article {
	self {
		background-color: #eee;
	}
}

Une organisation rationnelle

Si jusqu’à présent, pour éviter de multiplier les fichiers CSS vous n’en utilisiez au maximum que deux ou trois, vous pourrez oublier cette habitude grâce à XCSS : créez autant de fichiers « sources » que vous le souhaitez, renseignez-les dans votre fichier de configuration, et XCSS en compilera automatiquement un fichier unique.

Ainsi pour reprendre notre exemple de blog, on pourrait imaginer avoir un fichier article.xcss, un fichier commentaire.xcss, etc. Cela rapproche beaucoup l’implémentation du métier, c’est donc une excellente chose pour la maintenabilité de nos fichiers.

Compilation vers un fichier unique

Dernière fonctionnalité importante de XCSS, la compilation vers un fichier master.css qui va contenir (sous forme compressée ou non) l’intégralité de nos styles CSS : cela va nous permettre d’améliorer la vitesse de chargement de la page et faciliter la mise en cache des données par le navigateur. Bien sûr, l’utilisation de cette fonction est facultative, vous pouvez également lui faire compiler un à un vos fichiers et les inclure comme bon vous semble au final.

Voiçi à quoi va ressembler l’entête de vos fichiers HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>

		<!-- Uniquement utile en environnement de développement, cela permet d'appeler le fichier index.php qui va régénérer le fichier master. Une fois que le fichier est stable, on peut supprimer ou désactiver cette ligne. -->
		<script type="text/javascript" src="/styles/xcss/"></script>
		<!-- Chargement de l'unique fichier feuille de style -->
		<link rel="stylesheet" href="/styles/master.css" type="text/css" />

		<!-- (...) -->

Un petit bémol

Pour nuancer quelque peu mon propos, je dirais en guise de conclusion que si XCSS présente de nombreux attraits, il a parfois tendance à nous pousser à aller un peu contre la logique même de CSS – il faut donc prendre garde en utilisant ses fonctionnalités et faire un choix éclairé parmi celles qu’on utilise … Ou pas.

Par exemple, j’aime beaucoup la compilation, les sélecteurs qui s’imbriquent ainsi que les variables, mais l’ « héritage » de classe CSS me semble difficile à utiliser en pratique et beaucoup plus lourd de conséquences que ce dont il à l’air : si j’étends la classe article juste pour en changer le fond, cela va avoir pour effet de dupliquer tous mes sélecteurs et donc d’alourdir le fichier final … Alors que j’aurais pu me contenter de donner une nouvelle classe à mon article spécial, ce qui m’aurait permis de moins générer de code. C’est ce que j’aurais fait si je n’avais pas eu XCSS à ma disposition, et j’aurais bien fait !

En somme, la programmation objet est un mécanisme puissant pour représenter les structures et les données, mais ce n’est pas pour autant qu’il faut chercher à en mettre partout : laissez vos CSS en dehors de tout ça 😉 !

J’espère en tous cas que cette petite introduction vous aura donné envie d’en savoir plus, rendez-vous sur le site officiel pour télécharger la dernière version et consulter la doc (qui est vraiment très courte/efficace) …

Les textes, illustrations et démonstrations présents sur ce site sont la propriété de leurs auteurs respectifs, sauf mention contraire (photo de la bannière).
Chosesafaire.fr, un site propulsé par Wordpress, vous est proposé par Pierre Quillery & Killian Ebel.

Valid XHTML 1.0 Strict