Zen Coding css, replace html abbreviation with Daguan and quickly write html and css_Experience exchange

Copy code The code is as follows:
zen coding replaces 'api'.

zen coding is an editor plug-in written by Russians (supports most popular editors today). Its installation is also very simple. Just install the plug-in, and then Just copy the js file in the project. When the project is published, the js file can be deleted. Its main task is to liberate front-end engineers from the tedious HTML and CSS structure codes, but there are many replacement abbreviations that need to be memorized. Based on the principle that it is better to watch it ten times than to do it manually, I can only memorize it while using it.

The css replacement function is also very good. However, there are also many redundant and useless substitutions in it. I am using it while correcting the substitutions that the original author defined that are unreasonable in actual production.

The zen_settings file will be sent up later, and the replacement code will be briefly explained.

It was definitely a bit unfamiliar at first, and I had to think about this structure while writing. But after getting used to it, I feel it is very convenient. I can use the word "speed" to summarize my mood when writing.

As for other experiences and experiences, I will slowly share them after using them for reference.

Zen features a profound imitation of CSS selectors. The jquery selector is also learned from the css selector, so people who are familiar with these two technologies will get started quickly. For additional details, please refer to the source website.

The html tag replacement learning--the source code is in its package zen-settings.js. I have listed most of the commonly used ones, and some less commonly used ones are not listed. Refer to the source file. The previous line is Manual input, the next line is the zen output after pressing the shortcut key (alt E), the environment is Aptana 2.0.2:
no longer exists, and the file cannot be downloaded.
This file was last updated in 2009. The main contents of this update are:

1. Add units after width is equal to the value.

2. Make commonly used abbreviations more user-friendly.

3. There are also several new abbreviations added.

In the past two days, we have done crazy experiments and improvements on the css replacement function. We have simplified the replacements that are used too frequently. For those that are difficult to remember, we use stress to distinguish them. This change also Change the extended shortcut key to alt s, because I usually use these two keys to send QQ messages. I am more accustomed to ctlr enter, left hand ctrl and right hand enter. It is too troublesome to combine the right hand ctrl enter and it takes too long to complete, so I have to finish it with the left hand. Let me share my experience as follows. The first letter is the original element, the next line is the element after zen expansion output, and so on:
In the original zen, the css attributes and attribute values ​​​​take the first letter colon and then the attribute value. This is how I write it. Simplified. Commonly used attributes are abbreviated. For example

Other css classes: