Sublime Text + CSScomb

Mettez de l'ordre dans vos CSS

Sublime Text CSScomb

Comme tout webdesigner, à tendance developpeur, vous aimez l’ordre. CSScomb permet de trier vos propriétés CSS et uniformiser votre style d’écriture.

CSScomb se base sur Node.js pour fonctionner. Auparavant, CSScomb utilisait PHP (déprécié). Mon passage de la version PHP à Node.js m’a posé quelques problèmes de fonctionnement, notamment des path introuvables. La procédure ci-dessous a réglé ces problèmes.

Installer Homebrew

L’installation est simplifiée avec l’utlisation du gestionnaire de packages Homebrew. Il vous servira à installer ultérieurement d’autres applications utiles (Git, Nginx, etc.).

Premièrement installez Homebrew. Pour se faire, ouvrez votre terminal et copiez la ligne :

  $ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Patientez jusqu’à ce que l’installation soit correctement effectuée.

Installer Node et npm

Toujours dans votre terminal, saisissez :

$ brew install node

Ainsi que npm, le gestionnaire de package de Node.js

$ brew install npm

Patientez jusqu’à ce que l’installation de Node.js et npm soit finie. Vérifiez que tout soit correctement installé :

$ node --version
'$ v0.12.0'

$ which node
'$ /usr/local/bin/node'

$ npm --version
'$ 2.5.1'

$ which npm
'$ /usr/local/bin/npm'

Installer CSScomb

Procédez ensuite à l’installation globale de CSScomb :

$ npm install csscomb -g

Et vérifiez qu’il soit correctement installé :

$ csscomb --version
'$ 3.0.4'

Installer CSScomb pour Sublime Text

Ouvrez Sublime Text, via le Package Control, cmd + shift + p, saississez install package et sélectionnez Package Control: Install Package. Dans la liste qui apparait, tapez CSScomb. Fermez Sublime Text et ouvrez le à nouveau.

Configurez CSScomb pour Sublime Text

Dans Sublime Text, ouvrez le fichier CSScomb.sublime-settings situé dans : PreferencesPackage SettingsCSScombSettings - Default

Changez la première ligne avec le path de Node.js, que vous retrouvez ci-dessus, en saississant which node

{
    "node-path" : ":/usr/local/bin"
}

Dans ce même fichier, vous trouverez divers paramètres propres à CSScomb, du nombre de caractères d’indentation de vos propriétés CSS, au formatage hexadécimal des couleurs. Pour se faire, rendez vous sur le Build config.

En exemple, ma configuration personnelle basée sur mes habitudes d’écriture CSS :

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

Placez-vous dans un de vos fichiers CSS/SCSS/Sass et appuyez sur ctrl + shift + c : Magie !

Tips

Pour supprimer les retours à la ligne entre chaque type de propriété CSS, éditer le fichier CSScomb.sublime-settings comme suit :

...
"font-emphasize-style",
"font-smooth",
"line-height"
],
[
"position",
"z-index",
"top",
...

Et remplacez par :

...
"font-emphasize-style",
"font-smooth",
"line-height",

"position",
"z-index",
"top",
...

Enjoy !