En mode projet : Emmet, et coder devient zen

En mode projet, épisode 1

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.

---

Qu’est-ce qu’Emmet ?

Puisque nous sommes passés en mode projet, vous allez devoir réécrire vos pages et vos CSS de zéro, je vais vous présenter un outil génial pour écrire rapidement du code propre et sans faute : Emmet.

Emmet est une extension pour les principaux éditeurs de code, et nous avons la chance que Brackets en fasse partie. Le premier nom d’Emmet était Zen Coding, et il était tellement bien nommé que je ne comprends toujours pas pourquoi ses auteurs ont changé de nom.

Le propos d’Emmet est de faciliter l’écriture du code en proposant des raccourcis clavier, avec une syntaxe inspirée du CSS.

Mais le mieux est que vous voyiez une démo:

Impressionnant, non?

Si
1. vous vous sentez à l’aise avec votre code HTML,
2. vous avez bien suivi mes conseils et préfiguré votre code HTML à partir de votre wireframe ou de votre maquette,

vous allez trouver très ludique d’écrire le code de votre page en quelques minutes.

Installer Emmet

Emmet fait partie des extensions populaires sur Brackets. De ce fait, le package d’installation est déjà en place et vous n’avez qu’à aller le chercher en suivant le chemin habituel: Brackets>Fichier>Gestionnaire d'extension>taper Emmet dans le champ de recherche>cliquer sur le bouton Activer, puis sur le bouton Fermer. Et voilà, Emmet est installé sur votre Brackets (vous pourrez reproduire la manœuvre en cours si vous utilisez un des ordinateurs de la salle info).

Utiliser Emmet

Pour débuter

Pour débuter dans l’utilisation d’Emmet, je vous conseille de commencer par une série simple en HTML, qui va correspondre à la structuration de votre page.
Par exemple, vous pouvez commencer par la structure de premier niveau (à l’intérieur de votre body)¹.
Au premier niveau, on peut imaginer que vous voulez un header, une nav, un main, et un footer.
Avec Emmet, vous n’avez qu’à taper, juste en dessous de header+nav+main+footer, puis tabulation (⇥) après la balise ouvrante du body pour obtenir le résultat suivant:

<header><header>
<nav>/nav>
<main></main>
<footer></footer>

Ensuite, dans le header, à supposer que vous vouliez un titre et un sous-titre, tapez h1+h2 pour obtenir

<h1></h1>
<h2></h2>

Vous avez compris le principe ? OK, on peut entrer dans le vif du sujet.

Intégrer les niveaux de profondeur

Emmet permet d’écrire des balises sœurs (de même niveau), mais aussi des balises enfants. Pour la navigation, par exemple, vous pouvez écrire dans nav: ul>li pour obtenir

<ul>
  <li></li>
</ul>

Mais un menu de navigation intègre plusieurs éléments, et ça serait chouette de pouvoir les écrire en une fois; et bien, Emmet le fait, en utilisant * comme multiplicateur. Ainsi, en écrivant ul>li*4, j’obtiens

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Là, ça devient intéressant, d’autant qu’on peut aussi remonter dans l’arborescence avec le signe ^ (l’accent circonflexe).

Par exemple, je veux

• 3 articles
• avec chacun un titre, un sous titre, et trois paragraphes,
• et en plus, je veux un pied de page au même niveau que mes articles à la fin ?

Rien de plus simple avec Emmet:

• je tape article*3>h1+h2+p*3^footer, puis tabulation,
• et j’obtiens

<article>
  <h1></h1>
  <h2></h2>
  <p></p>
  <p></p>
  <p></p>
</article>
<article>
  <h1></h1>
  <h2></h2>
  <p></p>
  <p></p>
  <p></p>
</article>
<article>
  <h1></h1>
  <h2></h2>
  <p></p>
  <p></p>
  <p></p>
</article>
<footer></footer>

Elle est pas belle, la vie ?

Emmet de la classe et des id dans son code?

Oui, je l’admets, c’est un jeu de mots vraiment capilotracté.

Et si on ajoutait aussi les ID et les classes dans son HTML avec Emmet ? Là aussi, les développeurs ont trouvé un moyen ingénieux d’intégrer classe et id aux raccourcis :

• pour obtenir une div avec une classe (“desc”, par exemple, pour description), il suffit de taper… .desc; Emmet propose une div par défaut lorsqu’il est dans un contexte libre;
• sinon, il suffit de nommer la balise et de lui ajouter sa classe ou son id: li#chanson pour obtenir <li id="chanson"></li>, ou h2.recette pour obtenir <h2 class="recette"></h2>.

Plus encore, on peut numéroter les éléments en utilisant $. 

Pour un menu, ça devient vraiment intéressant : en écrivant nav>ul>li#chanteur$*4>a, on obtient

<nav>
 <ul>
  <li id="chanteur1"><a href=""></a></li>
  <li id="chanteur2"><a href=""></a></li>
  <li id="chanteur3"><a href=""></a></li>
  <li id="chanteur4"><a href=""></a></li>
 </ul>
</nav>

Y a plus qu’à remplacer les chanteurs par leur vrai nom, mettre les url ou les ancres qui vont bien, et hop, votre menu est terminé… C’est beau non?

Aller plus haut

A peu près à l’époque où vous naissiez, vos parents écoutaient peut-être malgré un tube qui passait en boucle à la radio, d’une chanteuse “à voix” un peu tombée dans l’oubli aujourd’hui.
Ça s’appelait “Aller plus haut »

Bon ok, c’est un gros détour pour justifier mon titre 😉 (j’avais pensé à aller plus loin, mais c’était plus marrant comme ça…).

Maintenant que vous connaissez Emmet, et que vous commencez à le prendre en main, ça vaut le coup d’apprendre les quelques raccourcis qui vous le rendront essentiel et qui augmenteront sensiblement votre efficacité.

Trois sources en français peuvent vous être extrêmement utile pour cela:

• l’article de La Cascade intitulé Raccourcis et astuces Emmet,
• un autre article de La Cascade focalisé sur l’écriture de CSS avec Emmet (Emmet, un turbo dans votre CSS)),²
• le tuto vidéo de Grafikart sur Emmet – à mon avis le meilleur tuto sur Emmet en français.

Pour finir, Emmet a aussi une documentation et une cheatsheet (un aide-mémoire) consultable en ligne et cherchable (CMD+F sur mac, Ctrl+F sur PC pour chercher dans le navigateur), ou téléchargeable au format PDF. Si vous ne trouvez pas intuitivement un raccourci, il suffit de le chercher dans l’aide-mémoire.

Mais pourquoi vous ne nous en parlez que maintenant ?

D’ici, j’entends râler certain·e·s d’entre vous: « mais pourquoi nous montrer ça seulement maintenant, alors qu’on aurait pu gagner un temps de dingue ?”

Parce qu’Emmet est inutile tant qu’on n’a pas assez de connaissances en HTML et CSS pour savoir ce qu’on veut obtenir. C’est la raison pour laquelle je ne vous ai pas présenté ce plug-in avant que vous ayez un certain niveau en HTML et CSS.

C’est aussi pourquoi Emmet ne va pas à tout le monde. IL peut vous faire gagner du temps, mais si vous n’arrivez pas à l’utiliser, il vaut mieux continuer à taper votre code comme avant.

Allez, à mardi, en mode projet !

---

1. On va partir du principe que votre page est déjà enregistrée, et qu’elle contient déjà sa balise html englobante, à l’intérieur de laquelle vous avez déjà écrit la balise head et son contenu, et la balise body, qu’on va commencer à remplir. ↩
2. Les articles de la Cascade sont des traductions en français d’articles importants de développeurs anglophones. ↩