Accélérer la génération de code HTML et CSS

Le HTML est un langage plutôt verbeux et de plus lors le création d’un nouveau site, on est souvent amené à créeer des blocs préremplis avec du texte bidon « lorem ___ » et des styles avec 4 ou 5 préfixes propriétaires forts ressemblant pour le reste. La seule solution, jusquà présent est le copier-coller laborieux et souvent source d’erreur.

On aimerait un petit « truc pour accélérer ses tâches répétitives.

Emmet

Emmet (anciennement Zen Coding) est un plugin compatible avec la plupart des éditeurs de texte et IDE connus qui vous permettra  simplifier considérablement le codage en HTML et CSS.

téléchargement

Téléchargements

Comme on peut le voir dans l’image extraite de la page de téléchargement de Emmet,
on peut l’installer dans komodo Edit. On va récupérer un fichier « emmet-1.0.4-ko.xpi » et on l’ouvre avec Komodo. Lorsqu’il est installé, il suffit de redémarrer Komodo Edit.

exemple de code

div#corps>(h1{Tester Emmet}^p>lorem50)

Appliquons

expandAbrev
de qui donne

<div id="corps">
    <h1>Tester Emmet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non animi mollitia iusto rem explicabo hic ea nostrum maiores facilis eos magni impedit dolor amet. A quisquam labore natus quasi veniam at laudantium doloribus numquam earum iste modi libero molestiae odio quidem dicta! Eum quisquam quibusdam quas numquam obcaecati quos quis!
</p> 
</div>

un autre:
div#page>div.logo+ul#navigation>li#item$*3>a
donne
<div id= »page »>
<div class= »logo »></div>
<ul id= »navigation »>
<li id= »item1« ><a href= » »></a></li>
<li id= »item2« ><a href= » »></a></li>
<li id= »item3« ><a href= » »></a></li>
</ul>
</div>

Plus intéressant encore les racourcis pour les feuilles de styles et la génération automatique des préfixes propriétaires

exemple: un simple
trs
donne

-webkit-transition: prop time;
-moz-transition: prop time;
-ms-transition: prop time;
-o-transition: prop time;
transition: prop time;

Impressionnant, non  ! Et ce n’est qu’un petit aperçu.

Pour aller plus loin, la documentation d’Emmet.
Les explications de  Josh Medeski sur le site La cascade pour le html  et le même site pour le CSS
et aussi honkiat.com (en anglais mais très visuel)