Web Front-end
CSS Tutorial
Zen Coding Implementation of quickly writing HTML/CSS code_Experience exchange
Zen Coding Implementation of quickly writing HTML/CSS code_Experience exchange
May 16, 2016 pm 12:04 PM
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:
div#content>h1 p
…Then you can see output like this:
上面的效果可以用dreamweaver，擴(kuò)展下載地址 Zen Coding for Dreamweaver v.0.7?測(cè)試通過(guò)
有些迷惑吧？今天，我將向你介紹Zen Coding，一組用于快速HTML和CSS編碼的工具。最初由Vadim Makeev在2009年4月提出(文章為俄語(yǔ))，由鄙人(也就是我)開(kāi)發(fā)了數(shù)月并最終達(dá)到比較成熟的狀態(tài)。Zen Coding由兩個(gè)核心組件組成：一個(gè)縮寫(xiě)擴(kuò)展器(縮寫(xiě)為像CSS一樣的選擇器)和上下文無(wú)關(guān)的HTML標(biāo)簽對(duì)匹配器?？匆幌逻@個(gè)演示視頻來(lái)看一下它們能為你做些什么。
注意：該視頻原版位于Vimeo，但是要看的話需要翻[和諧]墻先，地址在這里：http://vimeo.com/7405114，上面的視頻是我費(fèi)盡周折從Vimeo上下載下來(lái)上傳到優(yōu)酷的，上傳后質(zhì)量竟被大打折扣了，囧。youtube上也有一份視頻，是基于Aptana的演示，一樣很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和諧]墻容易些，不過(guò)如何翻[和諧]墻不在本站討論范圍。
如果你想跳轉(zhuǎn)到詳細(xì)介紹和使用指南，請(qǐng)看一下演示頁(yè)面并立刻下載你適用的插件：
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
Theexpand 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...
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
The last - entry number is used when you want to mark duplicates with an index elements. Suppose you want to generate three
div>
Just put it in your Just add a dollar sign to any class or id attribute you want to index, as many as you want. So, this...
div#i$-test. class$$$*5
will be converted to:
How does Zen Coding know when to add default attributes to generated tags or skip closing tags? There is a dedicated file called zen_settings .jsDescribes the output elements. This is a simple JSON file describing the abbreviations for each language (yes, you can define abbreviations for different syntaxes, like HTML, XSL, CSS, etc.). A common language abbreviation definition looks like this:
元素類型
Zen Coding有兩個(gè)主要的元素類型：“片段(snippets)” 和 “縮寫(xiě)(abbreviations)”。片段就是隨意的代碼碎片，而縮寫(xiě)是標(biāo)簽定義。通過(guò)片段，你可以寫(xiě)出你想要的任何代碼，它也會(huì)照你寫(xiě)的格式輸出；但是你必須手動(dòng)的格式化它(使用\n 和 實(shí)現(xiàn)換行和縮進(jìn)) 并將${child}變量放到你想要輸出子元素的地方，就像這樣：cc:ie6>style。如果你不使用${child}變量，子元素將會(huì)輸出于代碼片段的后面。
有了縮寫(xiě)，您必須編寫(xiě)標(biāo)記定義，而且語(yǔ)法是非常重要的。通常，你必須寫(xiě)一個(gè)簡(jiǎn)單的帶有所有默認(rèn)的屬性的標(biāo)簽，比如: 。當(dāng)Zen Coding被加載后，它會(huì)解析一個(gè)標(biāo)簽定義到一個(gè)描述該標(biāo)簽的名字、屬性(包括它們的順序)以及該標(biāo)簽是否為空的特定的對(duì)象中。所以，如果你寫(xiě)
，你會(huì)告訴Zen Coding這個(gè)標(biāo)簽必須是空的，然后“擴(kuò)展縮寫(xiě)”行為就會(huì)在輸出之前為它使用特定的規(guī)則。
對(duì)于片段和縮寫(xiě)，你可以添加一個(gè)管道符號(hào)，它告訴Zen Coding當(dāng)縮寫(xiě)被展開(kāi)的時(shí)候光標(biāo)會(huì)被定位到哪里。默認(rèn)的，Zen Coding 將光標(biāo)放在空屬性的引號(hào)中間以及開(kāi)始和關(guān)閉標(biāo)簽的中間。
例子
那么，這里解釋一下當(dāng)你寫(xiě)了一個(gè)縮寫(xiě)并召喚“展開(kāi)縮寫(xiě)”行動(dòng)時(shí)發(fā)生的事情。首先，它將一個(gè)完整的縮寫(xiě)分開(kāi)為獨(dú)立的元素：這樣div>a 會(huì)被分成div 和a 元素，當(dāng)然也會(huì)維持他們的關(guān)系。然后，每個(gè)元素，解析器先在代碼片段內(nèi)而后在縮寫(xiě)中尋找定義。如果它找不到，將會(huì)使用元素的名字作為新的標(biāo)簽，并為其添加縮寫(xiě)中定義的id和class。比如，如果你寫(xiě)mytag#example，解析器在片段或縮寫(xiě)中找不到mytag定義，它就會(huì)輸出
我們制作了很多默認(rèn)的CSS和HTML縮寫(xiě)和片段。你會(huì)發(fā)現(xiàn)學(xué)習(xí)使用Zen Coding可以增加你的生產(chǎn)力。
HTML 標(biāo)簽對(duì)匹配器
對(duì)于HTML編碼者的另一個(gè)非常常見(jiàn)的任務(wù)是尋找一個(gè)元素的標(biāo)簽對(duì)。例如你想選擇整個(gè)
Unfortunately, many modern development tools lack this functionality. Then I decided to write my own tag pair matcher as part of Zen Coding. It's still in beta and has some issues, but it works pretty well and fast. Rather than scanning the entire document (as a normal HTML tag pair matcher does), it looks for relevant tags starting from the current position of the cursor. This makes it very fast and context-free: it even works with this JavaScript snippet:
var table = '
| ' j ' | ';
Use abbreviation wrapping
This is a really cool feature that combines the functionality of abbreviation and tag pair matchers into one. How often do you realize you need to add a wrapping element to fix a browser bug? Or do you need to add a decoration, such as a background image or border to a block-level content? You have to write the opening tag, temporarily interrupt your code, find the relevant point and then close the tag. This is where "wrapping with abbreviations" can help you.
The feature is fairly simple: it asks you to enter an abbreviation, then performs the appropriate "expand abbreviation" action and places your desired text inside the last element of your abbreviation. If you don't select any text, it starts the tag pair matcher and uses the results. It also knows where your cursor is: inside the content of the tag or between the opening and closing tags. Depending on its position, it wraps the content of the tag or the tag itself.
Abbreviation wrapping introduces a specific abbreviation syntax for wrapping individual lines. Simply jump to the number after the multiplication operator, for example: ul#nav>li*>a. When Zen Coding finds an element that uses an undefined multiplier, it treats it as a repeating element: it prints it as many times as there are lines in your chapter, and adds the The content is placed in the last child element of the repeated element.
If you wrap this abbreviation div#header>ul#navigation>li.item$*>a>span around this text:
About Us
Products
News
Blog
Contact Up
你將會(huì)得到以下結(jié)果：
你可以看到，Zen Coding是一個(gè)強(qiáng)大的文本處理工具。
快捷鍵
- Ctrl+,
展開(kāi)縮寫(xiě) - Ctrl+M
匹配對(duì) - Ctrl+H
使用縮寫(xiě)包括 - Shift+Ctrl+M
合并行 - Ctrl+Shift+?
上一個(gè)編輯點(diǎn) - Ctrl+Shift+?
下一個(gè)編輯點(diǎn) - Ctrl+Shift+?
定位匹配對(duì)
這些快捷鍵是可以自定義的。
在線演示
你已經(jīng)學(xué)到很多關(guān)于Zen Coding如何工作以及它是如何使你的編碼更容易了?，F(xiàn)在為什么不自己嘗試一下呢？因?yàn)閆en Coding是用純JavaScript開(kāi)發(fā)并遷移到Python，它甚至可以用于瀏覽器內(nèi)部，這令它成為引入到CMS的首選。
支持的編輯器
Zen Coding并不依賴某個(gè)特定的編輯器。它是一個(gè)只處理文本的出色的組件：它獲取文本、做一些處理并放回新的文本(或索引，用于標(biāo)簽匹配)。Zen Coding由JavaScript和Python編寫(xiě)，所以它實(shí)際上可以運(yùn)行于任何平臺(tái)。在Windows，你可以運(yùn)行JavaScript版本，而Mac和Linux 分支可以使用Python版。
如果讓你的編輯器支持Zen Coding，你需要寫(xiě)一個(gè)特定的可以在你的編輯器和Zen Coding之間轉(zhuǎn)換數(shù)據(jù)的插件。問(wèn)題是一個(gè)編輯器可能不會(huì)完整的支持Zen Coding因?yàn)樗旧淼牟寮到y(tǒng)。比如，TextMate通過(guò)使用腳本輸出替換當(dāng)前行很容的就支持了“展開(kāi)縮寫(xiě)”功能，但是它不能處理標(biāo)簽對(duì)匹配因?yàn)闆](méi)有標(biāo)準(zhǔn)的方法請(qǐng)求TextMate來(lái)選擇內(nèi)容。
完全支持
- Aptana (跨平臺(tái));
- Coda, via TEA for Coda (Mac);
- Espresso, via TEA for Espresso (Mac);
部分支持(只支持“展開(kāi)縮寫(xiě)”)
- TextMate (只能用于Mac機(jī),Windows可以使用E-text編輯器替代);
- TopStyle;
- Sublime Text;
- GEdit;
- Dreamweaver CS4
- editArea在線編輯器;
- Zen Coding在線編輯器中文版
Aptana是我主要的開(kāi)發(fā)環(huán)境，它使用一個(gè)JavaScript版本的Zen Coding。它也包含很多其它的我用于日常工作的工具，所以任何一個(gè)新的Zen Coding版本都將會(huì)首先對(duì)Aptana可用，然后部署到Python并兼容其它的編輯器。
Coda和Espresso 插件被杰出的Text Editor Actions (TEA) 平臺(tái)支持，由Ian Beck開(kāi)發(fā)。原始的源代碼在GitHub上，但我還是制作了我自己的分支以整合Zen Coding的特性。
總結(jié)
很多嘗試過(guò)Zen Coding的人都說(shuō)它改變了他們寫(xiě)頁(yè)面的方式。當(dāng)然還有很多事情要做，還有很多的編輯器需要被支持以及一些文檔要寫(xiě)。請(qǐng)瀏覽現(xiàn)在的文檔 以及源代碼以尋找你的問(wèn)題的答案。希望你喜歡Zen Coding!
附：Zen coding的具體用法
遺憾的是， 本文原作者并沒(méi)有說(shuō)明zen coding的具體用法，神飛認(rèn)為有必要做以下簡(jiǎn)要的說(shuō)明。這里就以Aptana/Eclipse和Dreamweaver為例，其它編輯器平臺(tái)暫不描述，如有疑問(wèn)可以在評(píng)論中與前端觀察的網(wǎng)友交流。
Aptana/Eclipse
由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一個(gè)EclipseMonkey插件的支持，Aptana已經(jīng)封裝了這個(gè)插件，所以如果你使用Aptana，下面的第一步可以跳過(guò)。
Note:
- The official plug-in for Aptana is based on MAC. If you are using Windows, you need to change the shortcut keys manually (change them in the comment fragment at the head of each file)
- The official file encoding is a bit messy. When modifying the official js, please pay attention to encoding issues. Improper modification will cause the loss of related functions;
DreamWeaver
The good news is that there is now a Zen coding for DreamWeaver plug-in. The bad news is that the plug-in supports very few functions and only supports the expansion of abbreviations. And the default shortcut keys are invalid. Actions can only be clicked in the Command menu. In addition, I have not tested whether the plug-in only supports the CS4 version. But what’s better is that the author has also released the source code of this plug-in, and you can customize a Dreamweaver plug-in.
In fact, the official DW plug-in has a bit of a bug under Windows, that is, blank lines will appear. I simply corrected it and recompiled the package. It is no problem when tested on this machine. If you are interested Children's shoes can be downloaded and tried: http://www.boxcn.net/shared/c71z7x7sfe
PS: The official DW plug-in has been updated, recommend to the official Go to download. New plugins add more feature support. UPDATE @ 12-23-2009
Special recommendation: Student Haoqing put abbreviations into practice and summarized many great use cases. I recommend everyone Go learn.
Original author introduction:
Sergey Chikuyonok is a Russian front-end development engineer and author with a passion for optimization: from images and JavaScript effects to workflow and time-saving coding. Visit his homepage and his Twitter.
Original text from: http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is 'render-blocking CSS'?
Jun 24, 2025 am 12:42 AM
CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially with imported stylesheets, header large amounts of inline CSS, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.
External vs. Internal CSS: What's the Best Approach?
Jun 20, 2025 am 12:45 AM
ThebestapproachforCSSdependsontheproject'sspecificneeds.Forlargerprojects,externalCSSisbetterduetomaintainabilityandreusability;forsmallerprojectsorsingle-pageapplications,internalCSSmightbemoresuitable.It'scrucialtobalanceprojectsize,performanceneed
Does my CSS must be on lower case?
Jun 19, 2025 am 12:29 AM
No,CSSdoesnothavetobeinlowercase.However,usinglowercaseisrecommendedfor:1)Consistencyandreadability,2)Avoidingerrorsinrelatedtechnologies,3)Potentialperformancebenefits,and4)Improvedcollaborationwithinteams.
CSS Case Sensitivity: Understanding What Matters
Jun 20, 2025 am 12:09 AM
CSSismostlycase-insensitive,butURLsandfontfamilynamesarecase-sensitive.1)Propertiesandvalueslikecolor:red;arenotcase-sensitive.2)URLsmustmatchtheserver'scase,e.g.,/images/Logo.png.3)Fontfamilynameslike'OpenSans'mustbeexact.
What is Autoprefixer and how does it work?
Jul 02, 2025 am 01:15 AM
Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.
What are CSS counters?
Jun 19, 2025 am 12:34 AM
CSScounterscanautomaticallynumbersectionsandlists.1)Usecounter-resettoinitialize,counter-incrementtoincrease,andcounter()orcounters()todisplayvalues.2)CombinewithJavaScriptfordynamiccontenttoensureaccurateupdates.
CSS: When Does Case Matter (and When Doesn't)?
Jun 19, 2025 am 12:27 AM
In CSS, selector and attribute names are case-sensitive, while values, named colors, URLs, and custom attributes are case-sensitive. 1. The selector and attribute names are case-insensitive, such as background-color and background-Color are the same. 2. The hexadecimal color in the value is case-sensitive, but the named color is case-sensitive, such as red and Red is invalid. 3. URLs are case sensitive and may cause file loading problems. 4. Custom properties (variables) are case sensitive, and you need to pay attention to the consistency of case when using them.
Case Sensitivity in CSS: Selectors, Properties, and Values Explained
Jun 19, 2025 am 12:38 AM
CSSselectorsandpropertynamesarecase-insensitive,whilevaluescanbecase-sensitivedependingoncontext.1)Selectorslike'div'and'DIV'areequivalent.2)Propertiessuchas'background-color'and'BACKGROUND-COLOR'aretreatedthesame.3)Valueslikecolornamesarecase-insens
