Zen coding – Facilitez vous la vie !

0 Comments Published by Simon August 12th, 2011 in Web

Zen coding est une extension que l’on peut installer sur la presque totalité des éditeurs de texte (comme Dreamweaver, Notepad++ ou KomodoEdit).

C’est sans l’ombre d’un doute un des outils les plus utile que j’utilise.

Son fonctionnement

Son fonctionnement de base est très simple, en utilisant des sélecteurs CSS avancés, on écrit une ligne directement dans notre code HTML, par exemple:

table>tr>td

(notez que le sélecteur css “>” sélectionne l’enfant direct d’un élément)

En appuyant sur la touche tab (ou le bouton relatif à l’extension Zen coding sur votre propre éditeur), la ligne précédente produira le code suivant :

<table>
    <tr>
        <td></td>
    </tr>
</table>

Zen coding pour faire un peu plus

Et évidemment, nous pouvons créer de réels structures complexes:

“()” les parenthèses servent à délimiter un bloc de balises
“*” L’étoile sert à multiplier l’élément (ou le bloc) par le nombre de fois précisé
“+” définie une relation de frère
“>” définie que l’élément est compris directement dans la balise précédente
“#” assignera un ID à l’élément
“.” assignera une classe à l’élément

Et ainsi, le code suivant produira

div#page>div.logo+ul#navigation>li*5>a

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

Ne pas se casser la tête sur la structure de base

Et une dernière astuce, l’utilisation de cette ligne

html:5

Vous produire une template de page de base complète et valide sans tracas. (cela dit, n’oubliez pas de changer la valeur de l’attribut lang pour la langue propre à votre site !)