Node JS - NPM - Grunt + Less variable

Bonjour à tous,

J'ai une colle pour vous !

J'aimerais automatiser une tâche avec Grunt à partir d'un fichier LESS mais uniquement les balises ou classes. Je m'explique :

Voici le contenu de mon fichier LESS :

@princ1 : #000;
.bandeau{background-color:@princ1;padding:5px;}
.bloc{background:#fff;border-radius:3px}
body{margin:0;padding:0 0 5px;}
.pied{header,>div{background-color:@princ1;}}

Voici ce que j'aimerais obtenir dans le fichier final :

.bandeau,.pied header,.pied>div{background-color:#000}

Pensez-vous que c'est possible ?

Merci d'avance.
Modifié par sHADoX17 (15 Jan 2016 - 16:32)

Bonsoir,

En résumé vous souhaiteriez factoriser votre code CSS avec un script. Sur le principe cela doit être possible... En pratique je doute qu'un dev se soit déjà attelé à proposer un tel script, pour une bonne raison : une factorisation systématique entraînerait des conséquences difficiles à prévoir du point de vue de la cascade du style, avec des bugs difficiles à maîtriser.

Bref, si vous persistez dans cette voie, "préparez-vous à des conséquences imprévues".
Modifié par Olivier C (15 Jan 2016 - 18:01)

Bonjour,

j'ajouterai à la réponse d'Olivier C que la compression gzip avec laquelle est envoyé un fichier CSS au navigateur fait déjà gagner pas mal de ko et que l'optimisation décrite ici n'en fait ensuite gagner que peu (alors que sans gzip, oui ça serait appréciable). C'est sur ce genre de répétition que gzip est performant...

Une stricte application des principes de SMACSS, BEM ou SuitCSS devrait rendre le principe possible mais le risque qu'une modification un jour écrase une déclaration est de 1 (càd que c'est une certitude et juste une question de temps avant d'en voir une...).
Ce qui me chagrinerait presque, c'est qu'un specificity graph http://csswizardry.com/2014/10/the-specificity-graph/ parfait augmente énormément le risque d'une déclaration écrasée par une autre à cause de cette optimisation ! Quand on a des sélecteurs avec 2 id et 5 classes, les déclarations ne sont jamais écrasées par d'autres avec un sélecteur composé d'une seule classe mais j'ai fait mon choix, je veux plus jamais voir ces sélecteurs inécrasables... Vive les modules et blocs indépendants dont les CSS s'appliquent là où on croit qu'elles s'appliquent et pas ailleurs !
Et pour ceux qui ne comprennent pas la beauté et l'efficacité de la cascade CSS, il y a React. :troll: Là il n'y aura plus rien à factoriser !