Zen Coding Implémentation d'écriture rapide de code HTML/CSS

Dans cet article, nous présenterons une nouvelle façon de développer rapidement du HTML et du CSS en utilisant une syntaxe qui imite les sélecteurs CSS. Il est développé par Sergey Chikuyonok.

Combien de temps passez-vous à écrire du code HTML (y compris toutes les balises, attributs, guillemets, accolades, etc.) ? Si votre éditeur propose des astuces de code, il vous sera plus facile d'écrire, mais même dans ce cas, vous devrez quand même taper beaucoup de code manuellement.

En termes de JavaScript, lorsque l'on souhaite mettre un élément précis sur une page, on va rencontrer le même problème, il faut écrire beaucoup de code, ce qui devient difficile à maintenir et à réutiliser. Des frameworks JavaScript ont vu le jour et ont également introduit des moteurs de sélection CSS. Maintenant, vous pouvez utiliser des expressions CSS simples pour obtenir des éléments DOM, ce qui est plutôt cool.

Mais et si vous pouviez non seulement disposer et positionner les éléments à l'aide de sélecteurs CSS, mais aussi générer du code ? Par exemple, si vous écrivez ainsi :

Copiez le code Le code est le suivant :

div#content>h1 +p

... Ensuite, vous pouvez voir le résultat comme ceci :

Copier le code Le code est le suivant :

/p>

上面的效果可以用dreamweaver，扩展下载地址 Zen Coding for Dreamweaver v.0.7 测试通过
有些迷惑吧？今天，我将向你介绍Zen Coding，一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。

注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：http://vimeo.com/7405114，上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示，一样很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。

如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：

Demo

Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持)
中文版演示

下载(完全支持)

Aptana (跨平台);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);

下载(部分支持，只支持“展开缩写”)

TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
TopStyle;
Sublime Text;
GEdit;
Dreamweaver CS4
editArea在线编辑器;
Zen Coding在线编辑器中文版

现在让我们看一下这些工具是如何工作的吧。

展开缩写

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成一些东西，是写一个长代码的较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。

这里是一个支持的属性和操作符的列表：

E
Nom de l'élément (div, p);
E#id
Élément utilisant l'identifiant (div#content, p#intro, span#error) ;
E.class
Utiliser des éléments de classe (div.header, p.error.critial Vous pouvez également utiliser class et idID en combinaison : div#content.column.width ;
E>N
Élément enfant (div>p, div#footer>p>span);
E+N
Élément frère (h1+p, div#header+div#content+div#footer) ;
E*N
Multiplication d'éléments (ul#nav>li*5>a);
E$*N
Numéro d'article (ul#nav>li.item-$*5) ;

Comme vous pouvez le constater, vous savez déjà utiliser Zen Coding : juste un simple faux sélecteur CSS (euh, désolé pour "l'abréviation"), comme ça...

Copier le code Le code est le suivant :

div#header>img.logo+ul#nav>li*4>a

, vous pouvez simplement écrire li*5. Il remplacera également tous les éléments descendants. Si vous souhaitez écrire 4 éléments
, chacun avec une balise à l'intérieur, vous pouvez simplement écrire li*4>a, ce qui générera le code HTML suivant :
Copier le code Le code est le suivant :

;

Dernier numéro d'entrée pour la situation lorsque vous le souhaitez pour marquer les éléments en double avec un index. Supposons que vous souhaitiez générer trois éléments

avec les classes item1, item2 et item3. Vous pouvez écrire l'abréviation comme ceci, div.item$*3 :

Copiez le code Le code est le suivant :

< /div>

Ajoutez simplement un signe dollar à n'importe quelle classe ou attribut d'identification dans lequel vous souhaitez que l'index apparaisse, autant que vous le souhaitez. Alors, comme ça...

Copier le code Le code est le suivant :

div# i$-test.class $$$*5

sera converti en :

Copier le code Le code est le suivant :

Comment le codage Zen sait quand il doit générer une balise Ajouter des attributs par défaut ou ignorer la balise de fermeture ? Il existe un fichier dédié nommé zen_settings.js qui décrit les éléments de sortie. Il s'agit d'un simple fichier JSON décrivant les abréviations pour chaque langage (oui, vous pouvez définir des abréviations pour différentes syntaxes, comme HTML, XSL, CSS, etc.). La définition de l'abréviation du langage courant ressemble à ceci : html' : { 'snippets' : { 'cc:ie6' : '',
...

}, 'abréviations' : { 'a' : '', 'img' : '', ... } }

Type d'élément

Zen Coding comporte deux types d'éléments principaux : les "extraits" et les "abréviations". Les fragments sont des morceaux de code aléatoires et les abréviations sont des définitions de balises. Avec les extraits de code, vous pouvez écrire le code de votre choix, et il sera affiché dans le format que vous écrivez ; mais vous devez le formater manuellement (en utilisant n et pour les sauts de ligne et l'indentation) et placer la variable ${child} dans Go to Where. vous souhaitez que les éléments enfants soient affichés, comme ceci : cc:ie6>style. Si vous n'utilisez pas la variable ${child}, l'élément enfant sera affiché après le dans l'extrait de code.

Avec les abréviations, vous devez écrire des définitions de balisage, et la syntaxe est très importante. Habituellement, vous devez écrire une simple balise avec tous les attributs par défaut, tels que : . Lorsque Zen Coding est chargé, il analyse une définition de balise en un objet spécifique qui décrit le nom de la balise, ses attributs (y compris leur ordre) et si la balise est vide. Ainsi, si vous écrivez , vous indiquez à Zen Coding que la balise doit être vide, puis le comportement "développer l'abréviation" utilisera des règles spécifiques avant de l'afficher.

Pour les extraits et les abréviations, vous pouvez ajouter un symbole de pipe, qui indique à Zen Coding où positionner le curseur lorsque l'abréviation est développée. Par défaut, Zen Coding place le curseur entre les guillemets sur les attributs vides et entre les balises d'ouverture et de fermeture.

Exemple

Voici donc une explication de ce qui se passe lorsque vous écrivez une abréviation et invoquez l’action « Développer l’abréviation ». Premièrement, il sépare une abréviation complète en éléments indépendants : ainsi div>a sera divisé en éléments div et a, tout en conservant bien sûr leur relation. Ensuite, pour chaque élément, l’analyseur recherche la définition d’abord dans l’extrait, puis dans l’abréviation. S'il n'est pas trouvé, le nom de l'élément sera utilisé comme nouvelle balise, et l'identifiant et la classe définis dans l'abréviation y seront ajoutés. Par exemple, si vous écrivez mytag#example et que l'analyseur ne trouve pas de définition de mytag dans le fragment ou l'abréviation, il affichera .

Nous avons créé beaucoup de abréviations et extraits de code CSS par défaut et HTML. Vous constaterez qu’apprendre à utiliser Zen Coding peut augmenter votre productivité.

Matcheur de paires de balises HTML

Une autre tâche très courante pour les codeurs HTML consiste à trouver des paires de balises pour un élément. Par exemple, vous souhaitez sélectionner l'intégralité de la balise

et la déplacer ailleurs ou la supprimer. Ou peut-être recherchez-vous une balise de fermeture et souhaitez-vous savoir à quelle balise d'ouverture elle appartient.

Malheureusement, de nombreux outils de développement modernes ne disposent pas de cette fonctionnalité. Ensuite, j'ai décidé d'écrire mon propre matcher de paires de balises dans le cadre de Zen Coding. Il est encore en version bêta et présente quelques problèmes, mais il fonctionne plutôt bien et rapidement. Au lieu de parcourir l'intégralité du document (comme le fait un comparateur de paires de balises HTML normal), il recherche les balises pertinentes à partir de la position actuelle du curseur. Cela le rend très rapide et sans contexte : cela fonctionne même avec cet extrait de code JavaScript :

Copier le code Le code est le suivant :

var table = ''; for (var i = 0; i < 3; i++) {
table + = ''; pour (var j = 0; j < 5; j++) {
table += ''; >}
tableau += ''
}
tableau += '

' + j + '

Utiliser l'habillage par abréviation

Il s'agit d'une fonctionnalité vraiment intéressante qui combine les fonctionnalités des correspondances d'abréviations et de paires de balises en une seule. À quelle fréquence avez-vous découvert que vous deviez ajouter un élément wrapper pour corriger un bug du navigateur ? Ou avez-vous besoin d'ajouter une décoration, telle qu'une image d'arrière-plan ou une bordure à un contenu au niveau du bloc ? Vous devez écrire la balise d'ouverture, interrompre temporairement votre code, trouver le point pertinent puis fermer la balise. C'est là que « envelopper avec des abréviations » peut vous aider.

La fonctionnalité est assez simple : elle vous demande de saisir une abréviation, puis effectue l'action appropriée "développer l'abréviation" et place le texte souhaité à l'intérieur du dernier élément de votre abréviation. Si vous ne sélectionnez aucun texte, il démarre le comparateur de paires de balises et utilise les résultats. Il sait également où se trouve votre curseur : à l’intérieur du contenu de la balise ou entre les balises d’ouverture et de fermeture. Selon sa position, il enveloppe le contenu de la balise ou la balise elle-même.

Le retour à la ligne d'abréviation introduit une syntaxe d'abréviation spécifique pour renvoyer à la ligne des lignes individuelles. Accédez simplement au nombre qui suit l'opérateur de multiplication, par exemple : ul#nav>li*>a. Lorsque Zen Coding trouve un élément qui utilise un multiplicateur non défini, il le traite comme un élément répétitif : il l'affichera autant de fois qu'il y a de lignes dans votre chapitre, et ajoutera le contenu de chaque ligne. Placez-le à l'intérieur du dernier élément enfant de l'élément répété.

Si vous placez cette abréviation div#header>ul#navigation>li.item$*>a>span en dehors de ce texte :

Copier le code Le code est le suivant :

À propos de nous 
Produits 
Actualités 
Blog 
Contactez-nous 

 

Vous Vous obtiendrez les résultats suivants :

Copier le code Le code est le suivant :

< div id=" header">

你可以看到，Zen Coding是一个强大的文本处理工具。

快捷键

Ctrl+,
展开缩写
Ctrl+M
匹配对
Ctrl+H
使用缩写包括
Shift+Ctrl+M
合并行
Ctrl+Shift+?
上一个编辑点
Ctrl+Shift+?
下一个编辑点
Ctrl+Shift+?
定位匹配对

这些快捷键是可以自定义的。

在线演示

你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢？因为Zen Coding是用纯JavaScript开发并迁移到Python，它甚至可以用于浏览器内部，这令它成为引入到CMS的首选。

Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持)
中文版演示

支持的编辑器

Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件：它获取文本、做一些处理并放回新的文本(或索引，用于标签匹配)。Zen Coding由JavaScript和Python编写，所以它实际上可以运行于任何平台。在Windows，你可以运行JavaScript版本，而Mac和Linux 分支可以使用Python版。

如果让你的编辑器支持Zen Coding，你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如，TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能，但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。

完全支持

Aptana (跨平台);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);

部分支持(只支持“展开缩写”)

TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
TopStyle;
Sublime Text;
GEdit;
Dreamweaver CS4
editArea在线编辑器;
Zen Coding在线编辑器中文版

Aptana是我主要的开发环境，它使用一个JavaScript版本的Zen Coding。它也包含很多其它的我用于日常工作的工具，所以任何一个新的Zen Coding版本都将会首先对Aptana可用，然后部署到Python并兼容其它的编辑器。

Coda和Espresso 插件被杰出的Text Editor Actions (TEA) 平台支持，由Ian Beck开发。原始的源代码在GitHub上，但我还是制作了我自己的分支以整合Zen Coding的特性。

总结

很多尝试过Zen Coding的人都说它改变了他们写页面的方式。当然还有很多事情要做，还有很多的编辑器需要被支持以及一些文档要写。请浏览现在的文档以及源代码以寻找你的问题的答案。希望你喜欢Zen Coding!

附：Zen coding的具体用法

遗憾的是，本文原作者并没有说明zen coding的具体用法，神飞认为有必要做以下简要的说明。这里就以Aptana/Eclipse和Dreamweaver为例，其它编辑器平台暂不描述，如有疑问可以在评论中与前端观察的网友交流。

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用Aptana，下面的第一步可以跳过。

Installez EclipseMonkey via le site Web de mise à jour : http://download.eclipse.org/technology/dash/update(Vous pouvez ignorer cette étape si vous utilisez Aptana)
Créez un projet de niveau supérieur dans votre travail actuel et nommez-le, par exemple, zencoding
Créez le dossier scripts dans le projet nouvellement créé
Extraire le package du plug-in ZIP téléchargé dans ce dossier. La structure du projet ressemble à ceci :
Après l'installation, les sous-menus liés au codage Zen apparaîtront dans le menu "Script" de la barre de menu d'Aptana

Remarque :

Le plug-in officiel pour Aptana est basé sur MAC Si vous utilisez Windows, vous devez modifier les touches de raccourci manuellement (modifiez-les dans l'extrait de commentaire en tête de chaque fichier).
L'encodage du fichier officiel est un peu compliqué. Lors de la modification du js officiel, veuillez faire attention au problème d'encodage.

La bonne nouvelle est qu'il existe désormais un codage Zen pour le plug-in DreamWeaver. La mauvaise nouvelle est que le plug-in prend en charge très peu de fonctions et ne prend en charge que l'extension des abréviations. Et les touches de raccourci par défaut ne sont pas valides. Les actions ne peuvent être cliquées que dans le menu Commande. De plus, je n'ai pas testé si le plug-in prend uniquement en charge la version CS4. Mais ce qui est mieux, c'est que l'auteur a également publié le code source de ce plug-in, et vous pouvez personnaliser un plug-in Dreamweaver.

En fait, le plug-in officiel DW a un petit bug sous Windows, c'est-à-dire que des lignes vides apparaîtront. Je l'ai simplement corrigé et recompilé le package. Il n'y a aucun problème lors des tests sur cette machine. . Si vous êtes intéressé, les chaussures pour enfants peuvent être téléchargées et essayées :

http://www.boxcn.net/shared/c71z7x7sfe PS : Le plug-in officiel DW a été mis à jour

Recommande

de le télécharger depuis le site officiel . Les nouveaux plugins ajoutent plus de fonctionnalités. MISE À JOUR @ 23-12-2009

Recommandation spéciale

: L'étudiant Haoqing a mis les abréviations en pratique et a résumé de nombreux cas d'utilisation intéressants. Je recommande à tout le monde d'aller apprendre. Présentation originale de l'auteur :

Sergey Chikuyonok est un ingénieur et auteur russe en développement front-end qui a une grande passion pour l'optimisation : des images et des effets JavaScript au flux de travail et au codage permettant de gagner du temps. Visitez

sa page d'accueil

et son Twitter. Texte original de : http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html

Étiquettes associées：

zen

source：php.cn

Article précédent：Réinitialiser la réinitialisation CSS du style par défaut Article suivant：Méthode de code pour embellir le bouton du fichier d'entrée avec l'échange css_Experience

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur