この記事では、CSS セレクターを模倣した構文を使用して HTML と CSS を迅速に開発する新しい方法を示します。これは、Sergey Chikuyonok によって開発されました。
HTML コード (すべてのタグ、属性、引用符、中括弧などを含む) の作成にどのくらいの時間を費やしますか?エディターにコード ヒントがあれば、記述は簡単になりますが、それでも多くのコードを手動で入力する必要があります。
JavaScript に関して言えば、ページ上の特定の要素を取得したい場合にも同じ問題が発生します。大量のコードを記述する必要があり、保守や再利用が困難になります。 JavaScript フレームワークが登場し、CSS セレクター エンジンも導入されました。単純な CSS 式を使用して DOM 要素を取得できるようになりました。これは非常に優れています。
しかし、CSS セレクターを使用して要素をレイアウトしたり配置したりできるだけでなく、コードを生成できたらどうなるでしょうか?たとえば、次のように記述するとします。
注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：http://vimeo.com/7405114，上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示，一样很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。
如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：
それでは、これらのツールがどのように機能するかを見てみましょう。
展開省略形機能は、CSS のようなセレクターを XHTML コードに変換します。 「略語」という用語は少しわかりにくいかもしれません。なぜそれを単に「CSSセレクター」と呼ばないのでしょうか?最初の理由はセマンティクスです。「セレクター」は何かを選択することを意味しますが、ここでは実際に何かを生成しています。コードに対する長い代替案を書くことを意味します。 。 2 番目に、実際の CSS セレクター構文の小さなサブセットを使用し、いくつかの新しい演算子を追加するだけです。
サポートされているプロパティと演算子のリストは次のとおりです。
ご覧のとおり、Zencoding の使用方法はすでにご存知です。次のような単純な疑似 CSS セレクター (えー、「略語」でごめんなさい) です...
Zen Coding有两个主要的元素类型：“片段(snippets)” 和 “缩写(abbreviations)”。片段就是随意的代码碎片，而缩写是标签定义。通过片段，你可以写出你想要的任何代码，它也会照你写的格式输出；但是你必须手动的格式化它(使用\n 和 实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方，就像这样：cc:ie6>style。如果你不使用${child}变量，子元素将会输出于代码片段的后面。
有了缩写，您必须编写标记定义，而且语法是非常重要的。通常，你必须写一个简单的带有所有默认的属性的标签，比如: 。当Zen Coding被加载后，它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以，如果你写，你会告诉Zen Coding这个标签必须是空的，然后“扩展缩写”行为就会在输出之前为它使用特定的规则。
对于片段和缩写，你可以添加一个管道符号，它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的，Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。
那么，这里解释一下当你写了一个缩写并召唤“展开缩写”行动时发生的事情。首先，它将一个完整的缩写分开为独立的元素：这样div>a 会被分成div 和a 元素，当然也会维持他们的关系。然后，每个元素，解析器先在代码片段内而后在缩写中寻找定义。如果它找不到，将会使用元素的名字作为新的标签，并为其添加缩写中定义的id和class。比如，如果你写mytag#example，解析器在片段或缩写中找不到mytag定义，它就会输出
我们制作了很多默认的CSS和HTML缩写和片段。你会发现学习使用Zen Coding可以增加你的生产力。
对于HTML编码者的另一个非常常见的任务是寻找一个元素的标签对。例如你想选择整个
残念ながら、最近の開発ツールの多くにはこの機能がありません。そこで、Zen コーディングの一部として独自のタグ ペア マッチャーを作成することにしました。まだベータ版であり、いくつかの問題がありますが、非常にうまく高速に動作します。 (通常の HTML タグ ペア マッチャーのように) ドキュメント全体をスキャンするのではなく、カーソルの現在の位置から始めて関連するタグを探します。これにより、非常に高速かつコンテキストフリーになります。JavaScript スニペットでも動作します:
| ' j ' | ';
これは、略語とタグ ペア マッチャーの機能を 1 つに組み合わせた非常に優れた機能です。 ブラウザのバグを修正するにはラッピング要素を追加する必要があるとどのくらいの頻度で認識していますか?それとも、ブロックレベルのコンテンツに背景画像や枠線などの装飾を追加する必要がありますか?開始タグを記述し、コードを一時的に中断し、関連する箇所を見つけてタグを閉じる必要があります。ここで「略語で囲む」ことが役立ちます。
この機能は非常に単純です。略語を入力するように求められ、適切な「略語展開」アクションが実行され、略語の最後の要素内に目的のテキストが配置されます。テキストを選択しない場合は、タグ ペア マッチャーが開始され、結果が使用されます。また、カーソルがどこにあるか、タグのコンテンツ内、開始タグと終了タグの間なども認識します。位置に応じて、タグのコンテンツまたはタグ自体をラップします。
省略形の折り返しでは、個々の行を折り返すための特定の省略形構文が導入されます。乗算演算子の後の数値にジャンプするだけです (例: ul#nav>li*>a)。 Zen コーディングは、未定義の乗数を使用する要素を見つけると、それを繰り返し要素 として扱います。チャプタ内の行数と同じだけその要素を出力し、コンテンツを追加します。繰り返される要素の最後の子要素。
このテキストの周囲にこの略語 div#header>ul#navigation>li.item$*>a>span を囲むと次のようになります:
你可以看到，Zen Coding是一个强大的文本处理工具。
这些快捷键是可以自定义的。
你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢？因为Zen Coding是用纯JavaScript开发并迁移到Python，它甚至可以用于浏览器内部，这令它成为引入到CMS的首选。
Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件：它获取文本、做一些处理并放回新的文本(或索引，用于标签匹配)。Zen Coding由JavaScript和Python编写，所以它实际上可以运行于任何平台。在Windows，你可以运行JavaScript版本，而Mac和Linux 分支可以使用Python版。
如果让你的编辑器支持Zen Coding，你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如，TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能，但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。
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的具体用法，神飞认为有必要做以下简要的说明。这里就以Aptana/Eclipse和Dreamweaver为例，其它编辑器平台暂不描述，如有疑问可以在评论中与前端观察的网友交流。
由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用Aptana，下面的第一步可以跳过。
注:
良いニュースは、DreamWeaver プラグインの Zen コーディングが存在することです。悪いニュースは、このプラグインがサポートする機能が非常に少なく、略語の展開のみをサポートすることです。また、デフォルトのショートカットキーは無効です。アクションは、「コマンド」メニューでのみクリックできます。また、プラグインが CS4 バージョンのみをサポートしているかどうかはテストしていません。しかし、さらに良いのは、作成者がこのプラグインのソース コードも公開しており、Dreamweaver プラグインをカスタマイズできることです。
実は、公式の DW プラグインには、Windows 上で空白行が表示されるという少しのバグがあります。それを修正してパッケージを再コンパイルしただけです。このマシンでテストした場合は問題ありません。ご興味がございましたら、子供用の靴をダウンロードしてお試しいただけます: http://www.boxcn.net/shared/c71z7x7sfe
追記: 公式の DW プラグインが更新されました。推奨 公式のダウンロードに移動してください。新しいプラグインにより、さらに多くの機能サポートが追加されます。 更新 @ 2009 年 12 月 23 日
特別な推奨: 学生の Haoqing は略語を実践し、多くの優れた使用例をまとめました。皆さんに 学習に行く) ことをお勧めします。 >。
Sergey Chikuyonok はロシアのフロントエンド開発エンジニアであり、画像や JavaScript 効果からワークフローや時間節約コーディングに至るまで、最適化に情熱を持っている作家です。 彼のホームページとTwitterにアクセスしてください。 >。
原文の出典: http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
