Accueil Nos publications Blog Emmet, facilitez vos développements de pages web
Web Front
Niveau
27/04/2015 5 min

Emmet, facilitez vos développements de pages web

EmmetEmmet, anciennement Zen Coding, est votre prochain plugin d’IDE préféré pour le HTML et le CSS.
Fini le copier/coller pour créer des listes, finie l’écriture fastidieuse de la structure globale d’un document HTML, finie l’écriture des vendors prefixes, maintenant il y a Emmet.


J’aime gagner du temps – j’aime surtout ne pas trop en perdre – et même si les IDE d’aujourd’hui offrent (presque) tous de l’auto-complétion pour le HTML et le CSS, il reste toujours beaucoup de choses à taper, taper et retaper. Pour augmenter votre productivité, Emmet transforme de simples abréviations en des fragments de code complexes et vous donnera l’impression de faire de la magie noire avec votre IDE. Vous verrez, l’essayer c’est l’adopter.

Emmet est tellement simple à utiliser, munissez-vous de votre éditeur préféré, téléchargez le plugin Emmet si votre IDE ne l’a pas déjà et c’est parti, je vous montre les possibilités.

NB : Pour étendre vos abréviations, vérifiez bien que votre curseur est bien positionné sans espace après votre abréviation et utilisez ctrl+e ou ‘Tab’ ou autre suivant votre IDE/plugin pour transformer ce bout de code en un magnifique fragment de code HTML ou CSS parfaitement indenté !

HTML

Commençons par le début, plus besoin de taper les nombreuses lignes nécessaires à l’obtention du doctype HTML5, maintenant il y a :
html:5 ou son alias encore plus court : !



<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

Maintenant que vous avez votre gabarit minimal, passons aux contenus.

La syntaxe utilisée par Emmet est relativement proche de la syntaxe CSS, vous verrez.

 

id, class, attributs et texte

– id

div#foo 



<div id="foo"></div>

 

– class

p.bar



<p class="bar"></p>

 

– attributs

h1[title=”heeelllloooo”]



<h1 title="heeelllloooo"></h1>

 

– texte

span{coucou je suis un contenu}



<span>coucou je suis un contenu</span>

 

Vous aurez compris, vous pouvez tout mixer et ça donne à peu près ça :
div#foo.bar.otherClass.again[data-type=”txt”]{et encore du texte}



<div id="foo" class="bar otherClass again" data-type="txt">
  et encore du texte
</div>

Oui, c’est magique mais ce n’est pas fini !

 

Imbrication

Vous connaissez probablement les sélecteurs CSS enfants (>) et adjacent (+). Si ce n’est pas le cas, je vous invite à voir la spec, c’est particulièrement pratique.

C’est ici le même principe.
Pour avoir un bloc qui contient un paragraphe (p enfant de div) :
div>p



<div>
  <p></p>
</div>

 

Et pour avoir un bloc suivi d’un paragraphe (div et p adjacents) :
div+p



<div></div>
<p></p>

 

Et là, ce n’est pas fini, vous pouvez utiliser l’opérateur qui permet de remonter un niveau de l’arbre (^)
div.container>p+p+p^div.footer



<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>
<div class="footer"></div>

Oui, on espère tous pouvoir faire ça bientôt avec du CSS… Normalement prévu pour CSS4!

 

Groupe

Que serait la possibilité d’imbriquer sans la possibilité de regrouper nos abréviations ?
Ici, c’est comme en maths à l’école, on utilise des parenthèses et on peut ainsi écrire par exemple :
(div.foo>p+p+p)+(div.bar>ul>li+li+li)



<div class="foo">
  <p></p>
  <p></p>
  <p></p>
</div>
<div class="bar">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

qui est quand même plus lisible, mais équivalent à :
div.foo>p+p+p^div.bar>ul>li+li+li

 

Tags implicites

Emmet vous propose des tags implicites pour vous faciliter encore plus la vie :

  • div (div est implicite , .foo suffit, plus besoin d’écrire div.foo)

  • li pour ul et ol (ul>.item est bien équivalent à ul>li.item)

  • tr pour table, tbody, thead et tfoot

  • td pour tr

  • option pour select et optgroup

 

Répéter

Vous pouvez décider du nombre de fois que vous voulez répéter un (ou plusieurs) éléments grâce à l’opérateur *
Par exemple :
table>.row>.col*5



<table>
  <tr class="row">
    <td class="col"></td>
    <td class="col"></td>
    <td class="col"></td>
    <td class="col"></td>
    <td class="col"></td>
  </tr>
</table>

 

Numérotation

Pouvoir répéter un certain nombre de fois un élément est particulièrement pratique mais ça l’est d’autant plus quand on peut utiliser $ pour dénombrer des classes (ou autre chose)
Par exemple :
ul>.item${item$}*3



<ul>
  <li class="item1">item1</li>
  <li class="item2">item2</li>
  <li class="item3">item3</li>
</ul>

A noter que $$ numérote sur 2 digits (01, 02,…)…
On peut également utiliser @ pour numéroter dans l’ordre inverse (@-) ou donner le nombre de départ de la numérotation :
ul>.item$@-{item$@25}*3



<ul>
  <li class="item3">item25</li>
  <li class="item2">item26</li>
  <li class="item1">item27</li>
</ul>

 

Bonus

Vous cherchez du texte pour remplir vos éléments lors de votre développement, utilisez un lorem ipsum !

Encore une fois, Emmet est là pour vous faciliter la tâche.
Essayez :
p>lorem



<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
</p>

pour une phrase de 30 mots, où vous pouvez spécifier le nombre de mots, par exemple 10 :
p>lorem10



<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel.
</p>

 

CSS

Forcément, la syntaxe qui permet d’utiliser des sélecteurs similaires au CSS pour écrire du HTML ne sert pas à grand chose pour écrire nos sélecteurs CSS, c’est logique !
Emmet ne réinvente pas la roue mais offre un grand nombre de raccourcis pour les propriétés.

 

Abréviations courantes

Il existe des raccourcis pour toutes les propriétés CSS, but est ici de vous en montrer certains bien pratiques.
Les unités sont en px par défaut sauf si l’abréviation contient des floats, dans ce cas c’est en em.

bxz => box-sizing:border-box;

pos => position:relative;
pos:a => position:absolute;
pos:r => position:relative;

p10 => padding: 10px;
ml-20 => margin-left: -20px;
m1.5-28 => margin: 1.5em 2.8em;
m10–20 => margin: 10px -20px;

t5 => top: 5px;

w100p => width: 100%;

lh1 => line-height: 1;

c#4a8 => color: #44aa88;
bgc#1 => background-color: #111;

m10e! => margin: 10em !important; (même si c’est pas bien de l’utiliser…)

 

Vendor prefixes

Oui, écrire tous ces vendors nécesssaires au bon affichage cross-browser est fastidieux et long, et c’est pourquoi Emmet propose de le faire à votre place. Sympa hein?
Pour cela, il vous suffit de précéder votre abréviation de ‘-‘.
Par exemple, pour la propriété d’opacity vous pouvez essayer :
-op

Et, roulement de tambours :



-webkit-opacity: ;
-moz-opacity: ;
-ms-opacity: ;
-o-opacity: ;
opacity: ;

Vous pouvez bien sûr préciser quels vendors vous voulez en les insérant entre deux ‘-‘ comme ceci :
-wm-op



-webkit-opacity: ;
-moz-opacity: ;
opacity: ;

 

A noter :
– w => webkit
– m => moz
– s => ms
– o => o

Vous en voulez plus ?
essayez :
anim (animations)
trf (transfrmations)
Vous remarquerez qu’il n’y a pas besoin de préciser que nous voulons des vendors prefixes, il le sait !

 

Fuzzy search

Si vous allez faire un tour du côté de la cheat sheet mise à disposition par Emmet, vous remarquerez qu’il y en a beaucoup à apprendre. Mais, toujours plus fort, Emmet a mis au point une technique dite de fuzzy search: dès que vous allez taper une abréviation inconnue, fuzzy search cherchera la définition la plus proche.
Par exemple :

ov:h => overflow: hidden; peut être accessible via ov-h, ovh ou même oh 🙂

 

Customisation

Il est assez aisé de customiser Emmet.

Pour cela, trois fichiers sont disponibles dans le répertoire ‘extensions supports’ :

snippets.json : Vous pouvez ici ajouter ou modifier les abréviations et/ou leur forme développée

preferences.json : Vous pouvez ici gérer vos préférences : par exemple unités pour les float, activer/désactiver fuzzysearch, taille de l’indentation voulue, …

syntaxProfiles.json : préférences en fonctions des syntaxes (HTML, XHTML, XML) : par exemple simples ou doubles quotes, majuscule/minuscule, …

 

Conclusion

Vous l’aurez compris, Emmet n’est pas là pour résoudre vos problèmes mais pour vous faire gagner du temps, c’est un rapide coup de main à prendre mais finalement, l’essayer c’est l’adopter !

Vous pouvez vous rendre sur la documentation officielle et/ou utiliser la cheat sheet pour plus de possibilités.

Pour la route :

!>#container>(.row$>h${titre $$})3+(ul>.item$@1010>{clic : }+a[href=”#anchor$”])

Rédigé par :

Romain Blatrix