Translated from: Smashing Magazine
Chinese: Zen Coding: A quick way to write HTML/CSS code
Please respect copyright and indicate the source when reprinting!
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 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 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:
< div id = "content" >