CSSComb est un outil vous permettant de réorganiser de manière automatique les propriétés de vos fichiers CSS, dans le but d'être plus facilement lisibles. Découvrons comment l'utiliser.

Quand on écrit du CSS, si on ne suit pas de règle précise, on déroule les propriétés les unes à la suite des autres, sans vraiment de logique. Plus concrètement, il est plus sympa d'avoir font-size dessous font-family, par exemple. De plus, quand on travaille à plusieurs sur un CSS, chacun à sa façon d'écrire du code : accolade à la fin du sélecteur ou après un saut de ligne ; tabulation sous forme de 2 espaces ou 4 espaces, ...

Partant de ce constat, le tchèque Tony Ganch a créé CSSComb.

Cet outil va nettoyer votre CSS et ordonner ses propriétés. Parmi la liste des options disponibles, voici ce qu'il est capable de réaliser :

  • la dernière propriété doit toujours finir par ";"
  • l'indentation doit être de n espaces/tabulations
  • les valeurs du style 0px sont remplacées par 0
  • ajouter un espace avant l'accolade d'ouverture
  • ...

Consultez cette documentation pour plus de détails.

D'ailleurs, pour vous aider à concevoir votre configuration, le site de CSSComb vous met à disposition un assistant de création de config. Chaque propriété est expliquée de manière explicite avec un exemple à la clé. A la fin, vous aurez un fichier .json contenant votre configuration pour CSSComb.

Utilisation

Vous avez plusieurs moyens d'utiliser CSSComb.

Via le navigateur

Le site de CSSComb met à disposition un formulaire pour convertir votre code CSS. Renseignez votre code d'origine "tout pourri" et cliquez sur le bouton "Comb it!" pour le rendre plus agréable.

Dommage qu'on ne puisse pas gérer sa configuration...

En ligne de commande

Pour utiliser CSSComb dans vos projets en ligne de commande, il va bien sûr falloir l'installer sur votre machine.

Pour cela, il vous faut au préalable Node.js. Ensuite, ouvrez un terminal et tapez cette commande pour installer CSSComb en global :

npm install csscomb -g

Pour transformer votre fichier CSS :

csscomb fichier.css

Par défaut, CSSComb utilise sa propre configuration. Pour utiliser la vôtre générée plus haut via l'assistant du site, précisez le fichier avec le paramètre -c :

csscomb -c csscomb.json fichier.css

Dans Sublime Text / Brackets

Un plugin CSSComb est disponible pour Sublime Text et Brackets.

Pour Sublime Text, installez-le via le Package Control. Une fois le plugin installé, vous n'avez plus qu'à faire la combinaison de touches ctrl + maj + c pour transformer votre fichier CSS.

Comme pour la ligne de commande, le plugin utilise la configuration par défaut de CSSComb. Pour la personnaliser, rendez-vous dans "Preferences > Package settings > CSSComb > Settings - User".

Il faut que vos options de configuration soit dans le tableau "config". Exemple de configuration :

{
    "config": {
        "remove-empty-rulesets": true,
        "always-semicolon": true,
        "color-case": "lower",
        "block-indent": "  ",
        "color-shorthand": false,
        "element-case": "lower",
        "eof-newline": false,
        "leading-zero": false,
        "quotes": "double",
        "sort-order-fallback": "abc",
        "space-before-colon": "",
        "space-after-colon": " ",
        "space-before-combinator": " ",
        "space-after-combinator": " ",
        "space-between-declarations": "\n",
        "space-before-opening-brace": " ",
        "space-after-opening-brace": "\n",
        "space-after-selector-delimiter": " ",
        "space-before-selector-delimiter": "",
        "space-before-closing-brace": "\n",
        "strip-spaces": true,
        "tab-size": true,
        "unitless-zero": true
    }
}

Ainsi, CSSComb utilisera votre configuration pour transformer les fichiers CSS.

Avec Grunt

Un plugin pour Grunt existe même ! Et ça, c'est bien pratique. Vous allez pouvoir rendre vos CSS plus "normalisés" et effectuer d'autres tâches en même temps !

Tous les détails sont dans le Github du plugin Grunt : https://github.com/csscomb/grunt-csscomb.

Conclusion

CSSComb est donc un outil très pratique pour ceux et celles qui souhaitent avoir des fichiers CSS propres et normalisés.