SUBLIME: Emmet User Settings

Emmet.sublime-settings

{
	// Copy any modified settings to `User/Emmet.sublime-settings`
	// otherwise modifications will not survive updates.

	// Path to folder where Emmet should look for extensions
	// http://docs.emmet.io/customization/
	"extensions_path": "~/emmet",

	// Disable completions of HTML attributes
	// with this option disabled, you can get attribute list completions
	// inside opening HTML tags.
	// WARNING: with this option disabled, Tab key expander will not
	// work inside opening HTML attributes
	"disable_completions": false,

	// With this option enabled, all Emmet's CSS snippets
	// will be available in standard auto-complete popup
	"show_css_completions": true,

	// List of scopes where Emmet CSS completions should be available
	"css_completions_scope": "source.css - meta.selector.css - meta.property-value.css, source.scss - meta.selector.scss - meta.property-value.scss, source.less - meta.selector.css - meta.property-value.css",

	// Remove default HTML tag completions on plugin start
	// You should restart editor after changing this option
	"remove_html_completions": false,

	// A comma-separated list of scopes where Emmet’s Tab key
	// abbreviation expander should be disabled
	"disable_tab_abbreviations_for_scopes": "",

	// A regexp for scope name: if it matches, Tab handler won’t work
	// The reason to use this preference is that ST2 has buggy scope matcher
	// which may still trigger Tab handler even if it's restricted by context
	"disable_tab_abbreviations_for_regexp": "source\\.(?!css).+?\\stext\\.html",

	// Exit tabstop mode when enter key is pressed
	"clear_fields_on_enter_key": true,

	// A comma-separated list of disabled action names.
	// Listed action will not be triggered by default keyboard
	// shortcut.
	// Use "all" value to disable all shortcuts at once
	"disabled_keymap_actions": "",

	// By default, Emmet overrides Tab key to effectively expand abbreviations.
	// The downside of this approach is that you can’t expand regular ST2
	// snippets (like `php`). Since it’s not currently possible to get a list
	// of ST2 snippets via API, you can provide a list of scopes where Emmet’s
	// Tab trigger should be disabled when expanding simple abbreviation.
	// If entered abbreviation (like `php`) wasn’t found in Emmet snippets list
	// or "known_html_tags" preference, Tab handler will not be triggered.
	// Leave this setting blank to disable this feature
	"disabled_single_snippet_for_scopes": "text.html",

	// A space-separated list of single snippets that should be
	// forcilbly disabled (not handled) for Emmet even if it
	// has such abbreviation.
	// This option is useful if you wish the enumerated snippets
	// should be handled by Sublime Text.
	// Example value: "script style html"
	"disabled_single_snippets": "",

	// A space separated list of all known HTML tags,
	// used together with "disabled_on_single_snippets" option
	"known_html_tags": "html head title base link meta style script noscript body section nav article aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr pre blockquote ol ul li dl dt dd figure figcaption div a em strong small s cite q dfn abbr data time code var samp kbd sub sup i b u mark ruby rt rp bdi bdo span br wbr ins del img iframe embed object param video audio source track canvas map area svg math table caption colgroup col tbody thead tfoot tr td th form fieldset legend label input button select datalist optgroup option textarea keygen output progress meter details summary command menu main template",

	"empty_elements": "area base basefont br col frame hr img input isindex link meta param embed",

	// If set to `true`, Emmet will automatically insert final tabstop
	// at the end of expanded abbreviation
	"insert_final_tabstop": false,

	// Try to automatically detect XHTML dialect in HTML documents.
	// With this option enabled, your custom profile for HTML documents may not work.
	"autodetect_xhtml": true,

	// Use old Tab handler to expand abbreviations.
	// With this option enabled, editor may better handle Tab key
	// (especially with other plugins that overrides Tab key),
	// but will spit "slow plugin" message
	"use_old_tab_handler": false,

	// Disables PyV8 auto-update. Useful for users who installed PyV8
	// manually from https://github.com/emmetio/pyv8-binaries because
	// of local proxy restrictions
	"disable_pyv8_update": false,

	// Expand abbreviations inside PHP strings on single line
	// (e.g. without formatting)
	"php_single_line": false,

	///////////////////////////////
	// Emmet customization
	// Each section has the same meaning as the same-named JSON file
	// described here:
	// http://docs.emmet.io/customization/
	///////////////////////////////


	// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json
	"snippets": {
		// "html": {
		// 	"abbreviations": {
		// 		"example": "<div class='example' title='Custom element example'>"
		// 	}
		// }
	},

	// Emmet preferences
	// List of all available preferences:
	// http://docs.emmet.io/customization/preferences/
	"preferences": {
		// "css.valueSeparator": ": ",
		// "css.propertyEnd": ";"
		"bem.shortElementPrefix":"_",
		"bem.elementSeparator":"__",
		"bem.modifierSeparator":"--"
	},

		// Output profiles for syntaxes
        // http://docs.emmet.io/customization/syntax-profiles/
        "syntaxProfiles": {
                // "html":
                // 			BEM filters
                // 			C is the comment filter which has all the class names in it
                "html" : {
                        "filters" : "html, bem, c"
                },
        }
}

Here's the gif https://twitter.com/mrahmadawais/status/655415384422531072