“a plugin which enables you to add your own CSS snippet and generate HTML, XML quickly”

Introduction

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called“snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

Some features and brief implementation detail is as follows:

HTML from CSS : Abbreviations

Abbreviations are the heart of the Emmet toolkit. The abbreviation’s syntax looks like CSS selectors with a few extensions specific to code generation. So every web-developer already knows how to use it.

Here’s an example: this abbreviation

#page>div.logo+ul#navigation>li*5>a{Item $}

…can be transformed into

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

Abbreviations are optimized for, but not limited to, HTML and XML generation, and make writing tedious markup code a breeze. You can start learning syntax to unleash the full power of Emmet abbreviations …more

Customizable

Emmet offers wide range of tweaks you can use to fine-tune your plugin experience. Almost all officially developed editor plugins (except PSPad and browser-based) has extensions support: a special folder where you can put json and js files to extend Emmet. Please refer to README file bundled with your editor’s plugin to find out where Emmet looks for extensions.

Each .js file located in extensions folder will be loaded and executed on plugin start-up. Use js files to create your own filters or actions: you can use Emmet modules and bindings to script your editor with JavaScript.

With .json files you can fine-tune different parts of Emmet toolkit:

snippets.json : Add your own or update existing snippets

preferences.json : Change behavior of some Emmet filters and actions

syntaxProfiles.json : Define how generated HTML/XML should look. …more

Dynamic snippets

While Emmet abbreviations are good for generating HTML, XML or any other structured markup, it may look useless for CSS. You don’t want to write CSS selectors and transform them to CSS selectors, right? The only thing Emmet can do for you is to provide shorthands for CSS properties, but editors with native snippets and autocomplete can help you way better.

Actually, Emmet has something to offer.

For CSS syntax, Emmet has a lot of predefined snippets for properties. For example, you can expand mabbreviation to get margin: ; snippet. But you don’t want just margin property, you want to specify a valuefor this property. So you have to manually type, let’s say, 10px.

Emmet can greatly optimize your workflow here: you can inject value directly into abbreviation.

To get margin: 10px; you can simply expand the m10 abbreviation. Want multiple values? Use a hypen to separate them:m10-20 expands to margin: 10px 20px;. Negative values? No problem: precede the first value with hyphen and all the rest with double hyphens: m-10--20 expands to margin: -10px -20px; …more

Ultra-fast coding

A very powerful tool of the Emmet toolkit. It takes an abbreviation, expands it and places currently selected content in the last element of generated snippet. If there’s no selection, action will silently call “Match Tag Pair”to wrap context element.

Highly portable

Emmet is written in pure JavaScript and works across different platforms: web browser, Node.js, Microsoft WSH and Mozilla Rhino.

Platform for new tools

Dig into Emmet source code and re-use its modules to create your very own and unique actions.

Reference : google.co.in, http://emmet.io/