Tuto : Écrire rapidement son CSS avec Emmet

Logo Emmet
LESS, SCSS ou SASS peuvent vous permettre d'écrire plus rapidement vos feuilles de style CSS. Emmet révolutionne encore le processus de rédaction : lorsque vous l'aurez essayé, vous ne pourrez plus vous en passer 😉.


Emmet c'est quoi ?



Emmet est un système performant d'abréviations qui convertit quelques lettres en ligne CSS ou HTML complète, directement dans votre éditeur de texte.


Installation



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

Pour Brackets ou Atom, il vous suffit simplement de rechercher "emmet" dans le Gestionnaire d'extensions, d'installer Emmet et de redémarrer.


Tutoriel



Prérequis

  • CSS niveau basique
  • HTML niveau basique

Dans une feuille de style CSS tapez :
w:100

Appuyez sur la touche Tab.

w:100 est devenu width: 100px; !


Quelques exemples :
h:25vw
devient :
height: 25vw;


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


ml20
devient :
margin-left: 20px;


d:n
devient :
display: none;


p:a
devient :
position: absolute;


bg
devient :
background: #000;


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


tt
devient :
text-transform: uppercase;


bd+
devient :
border: 1px solid #000;


bdrs50%
devient :
border-radius: 50%;


trf:r
devient :
transform: rotate(angle);


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>


ul>li*4
devient :
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>


!
devient :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

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

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

Retour aux tutos

Besoin de l'aide d'un professionnel pour créer votre site ou votre publication graphique ? Contactez-moi !

Licence Creative Commons Attribution Vous êtes libre de réutiliser cet article à condition de mentionner qu'il a été écrit par Creavolt.fr

Ces tutos peuvent vous intéresser



Icone image Optimiser vos images pour le web

Logo Apache Cordova Créer une application mobile Androïd en HTML avec Cordova
Contactez-moi !