Translated from: Smashing Magazine
中文: Zen Coding: A method to quickly write HTML/CSS code
Please respect the copyright, please indicate the source when reprinting!
In this article we will show 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, references, braces, etc.)? If your editor has code prompts, it will be easier when you write it, but even so, you still have to manually type in a lot of code.
In JavaScript, when we want to get a specific element on a page, we encounter the same problem, we have to write a lot of code, which makes it difficult to maintain and reuse. JavaScript frameworks emerged, and they also introduced the CSS selector engine. Now you can use simple CSS expressions to get DOM elements, which is pretty cool.
But what if you could not only use CSS' selector to layout and locate elements, but also generate code ? For example, if you write this:
div#content>h1+p
…Then you can see the output like this:
<div id="content">
<h1></h1>
<p></p>
</div>