Écrire un article
Tea Innovation



Nous vous parlions de LESS dans un précédent article qui vous permettait d'écrire plus rapidement vos feuilles de style. Emmet révolutionne encore le processus de rédaction : lorsque vous l'aurez essayé vous ne pourrez plus vous en passer ! 



C'est quoi ?

Emmet est un système performant d'abréviations qui convertit quelques lettres en ligne CSS ou HTML complète.


Installation

Emmet est disponible pour votre éditeur de textes favori sur cette page :
www.emmet.io/download

Pour Brackets, il vous suffit simplement de rechercher emmet dans Fichier > Gestionnaire d'extensions (finalement Brackets est très pratique pour le CSS, le LESS et le HTML, je préfère Notepad++ pour PHP, JS et txt).

Pour Notepad++, il vous faudra également installer le plugin Python Script (ça ne fonctionne pas chez moi).


Tutoriel

Prérequis
CSS niveau basique
HTML niveau basique

Dans une feuille CSS tapez

w:100


Tapez la touche Tab

w:100 est devenu width: 100px; !


Quelques exemples

h:250

devient

height: 250px;

 

 

ml:20

devient

margin-left: 20px;

 

 

d:n

devient

display: none;

 

 

p:a

devient

position: absolute;

 

 

bg:#ff0

devient

background: #ff0;

 

 

bg+

devient

background: #fff url() 0 0 no-repeat;

 

 

tt

devient

text-transform: uppercase;



et très pratique :

!

devient

!important

 

 

Et ça fonctionne aussi pour html !

toto

devient

<toto></toto>

 

 

#toto

devient

<div id="toto"></div>

 

 

.toto

devient

<div class="toto"></div>

 

 

div>div

devient

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

 

 

html:5

devient

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



Si vous vous trompez de syntaxe Emmet met ce qui lui semble le plus proche.

Les 2 points sont optionnels avec les chiffres lorsqu'il n'y a pas d’ambiguïté. Par exemple :

 

h250

devient

height: 250px;



Vous pouvez jouer à chercher vous-même les syntaxes pour chaque commande ou utiliser la liste des commandes :
docs.emmet.io/cheat-sheet

 

 

Auteur : Nicolas Barré



retour au blog

Posez votre question !

Code de sécurité