En mode projet : Emmet plus de CSS ?¹

En mode projet, épisode 2

La série EN MODE PROJET inaugure de nouveaux types de billets, principalement des tutoriels, permettant de réaliser une des opérations dont vous pourrez avoir besoin pour votre projet. Le billet est publié en parallèle des fichiers HTML et CSS sur la dropbox.

Un turbo dans votre CSS

Hello les bricodeurs et les bricodeuses ! Pour celles et ceux d’entre vous qui ont trop aimé l’article sur Emmet, je me permets un petit one more thing…

J’allais vous écrire un article sur Emmet et le CSS à la suite de l’article de présentation, qui montre le fonctionnement d’Emmet en HTML. Sachant que vous allez principalement écrire du CSS, en mode projet, c’était la suite logique. Et voilà que je tombe sur cet article de La Cascade² qui a déjà fait tout le job ! C’est accessible en cliquant sur son titre, et ça s’intitule : Emmet, un turbo dans votre CSS (comme c’est une traduction, je ne suis même pas sûr qu’ils ont perçu le jeu de mots…).

Et, cerise sur le cheesecake, les raccourcis sont accompagnés d’exemples visuels :

Enjoy !³

Monsieur Plus, encore plus d’Emmet !

Quand j’étais gamin, il y avait un personnage récurrent dans les publicités pour des petits gâteaux, Monsieur Plus: il ajoutait des ingrédients dans la pâte des gâteaux pour qu’ils soient meilleurs.

Hé ben à mon tour de jouer les Monsieur Plus :

• je vous met un des premiers tutos vidéo que j’avais trouvé sur Emmet, quand je découvrais encore le plug-in; j’ai coupé la partie sur le HTML, le tuto démarre directement au CSS (mais vous pouvez le remettre au début, sur Youtube, si vous voulez passer 13 minutes d’émerveillement codique ;-)).

• En prime, un article qui recense les principaux raccourcis d’Emmet, ceux que vous pouvez facilement retenir et qui vous seront toujours utiles : Raccourcis et astuces Emmet
• Enfin, les développeurs d’Emmet ont eux-mêmes écrit une documentation complète téléchargeable : si vous cherchez un raccourci d’Emmet, il s’y trouve !

Allez, j’arrête, faudrait pas que vous en arriviez à une indigestion, non plus !

---

1. Je persiste dans le jeu de mots pourri, mais… j’aime trop ça ! ↩
2. La Cascade, c’est ce site qui s’est donné pour mission de traduire en français des articles importants pour comprendre le développement web initialement parus en anglais. ↩
3. Rappel: si vous n’êtes pas trop à l’aise avec votre CSS, Emmet peut vous embrouiller au lieu de vous aider. Ne vous forcez pas: soit la magie opère, et vous écrivez beaucoup plus vite et avec beaucoup moins d’erreur votre CSS, soit vous ne comprenez pas ce que vous faites et (1) vous avez l’impression que Brackets vous en veux vraiment, (2). vous vous dites qu’un Ghost in the machine écrit le code à votre place. Dans ce cas, abandonnez Emmet et revenez à une écriture traditionnelle, plus lente, mais où vous comprenez tout ce que vous faites. ↩