Zen Coding Implementation of quickly writing HTML/CSS code_Experience exchange-CSS Tutorial-php.cn

Zen Coding Implementation of quickly writing HTML/CSS code_Experience exchange

WBOY

Release： 2016-05-16 12:04:06

Original

1411 people have browsed it

In this article we will demonstrate a new way to quickly develop HTML and CSS using syntax that mimics CSS selectors. It was developed by Sergey Chikuyonok.

How much time do you spend writing HTML code (including all tags, attributes, quotes, braces, etc.)? If your editor has code hints, it will be easier for you to write, but even then you will still have to type a lot of code manually.

In terms of JavaScript, when we want to get a specific element on a page, we will encounter the same problem, we have to write a lot of code, which becomes difficult to maintain and reuse. JavaScript frameworks came into being, and they also introduced CSS selector engines. Now, you can use simple CSS expressions to get DOM elements, which is pretty cool.

But what if you could not only layout and position elements using CSS selectors, but also generate code? For example, if you write:

Copy code The code is as follows:

div#content>h1 p

…Then you can see output like this:

Copy code The code is as follows:

上面的效果可以用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 (Use Ctrl, to expand abbreviations, JavaScript support is required)
Chinese version demo

Download (fully supported)

Aptana (cross platform);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);

Download (partially supported, only "expand abbreviation" is supported)

TextMate (can only be used For Mac, Windows can use E-text editor instead);
TopStyle;
Sublime Text;
GEdit;
Dreamweaver CS4
editArea online editor;
Zen Coding online editor Chinese version

Now let's take a look at how these tools work.

Expand abbreviation

The

expand abbreviation feature converts CSS-like selectors into XHTML code. The term "abbreviation" can be a bit confusing. Why not just call it a "CSS selector"? Well, the first reason is semantics: "selector" means selecting something, but here we are actually generating something, means writing a long A shorter alternative to the code. Second, it just uses a small subset of the real CSS selector syntax and adds some new operators.

Here is a list of supported properties and operators:

E
Element name (div, p);
E#id
Element using id (div#content, p#intro, span#error);
E.class
Use class elements (div.header, p.error.critial). You can also use class in combination with idID: div#content.column.width;
E>N
Child elements (div>p, div#footer>p>span);
E N
Sibling elements (h1 p, div#header div#content div#footer);
E*N
Element multiplication (ul#nav>li*5>a);
E$*N
Item number (ul#nav>li.item-$*5);

As you can see, you already know how to use Zen Coding: just a simple faux CSS selector (er, sorry for the "abbreviation"), like this...

Copy code The code is as follows:

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

…and then calls the "expand abbreviation" behavior.

There are two new operators here: element multiplication and item numbering. For example, if you want to generate 5

elements, you can simply write li*5. It will also override all descendant elements. If you want to write 4

elements, each with a tag inside, you can simply write li*4>a, which will generate the following HTML code:

Copy code span> The code is as follows:

phpcnltphpc n/li>