Cheat Sheet; More developer tools: Emmet LiveStyle Real-time bi-directional edit tool for CSS, LESS and SCSS. Emmet Re:view Fast and easy way to test responsive design side-by-side. Yandex BEM/OOCSS. If you’re writing your HTML and CSS code in OOCSS-style, Yandex’s BEM style specifically, you will like this filter. It provides some aliases.
Html Emmet Cheat Sheet
If you’re writing your HTML and CSS code in OOCSS-style, Yandex’s BEM style specifically, you will like this filter. It provides some aliases and automatic insertions of common block and element names in classes.
- Emmet Cheat Sheet. GitHub Gist: instantly share code, notes, and snippets.
- An app containing Emmet expansion written using Flutter for wb - subinsv/Emmetcheatsheetweb.
- Cheat Sheet; More developer tools: Emmet LiveStyle Real-time bi-directional edit tool for CSS, LESS and SCSS. Emmet Re:view Fast and easy way to test responsive.
- Issuu is a digital publishing platform that makes it simple to publish magazines, catalogs, newspapers, books, and more online. Easily share your publications and get them in front of Issuu’s.
In short, BEM introduces three concept types for CSS classes: Block, Element and Modifier. Block is a some sort of a namespace for a semantic sections of HTML page, for example, search-form. Element is a part of section, for example, search-form__query-string. Modifiers define variations of block and elements: search-form_wide or search-form_narrow. Elements in class names are separated with __ (double underscore) and modifiers are separated with _ (single underscore).
While BEM/OOCSS is a great way to maintain and re-use CSS, it may be very tedious to write these class names in plain HTML, even with help of Emmet abbreviations. You have to write the same block or element name in every element of abbreviation:
The bem filter allows you to make abbreviation a bit sorter:
How it works
BEM filter introduces a few class name prefixes for concept types: __ or - as element prefix and _ as modifier prefix. Whenever you begin the class name with one of these prefixes, filter will resolve the rest parts for you:
- if you start class name element prefix, filter will resolve block name from parent node;
- if you start class name with modifier prefix, filter will resolve block name and/or element name from current or parent nodes;
- if you use both element and modifier prefixes, filter will resolve block name from parent node and output both “unmodified” and “modified” classes on element;
- if you use multiple element prefixes, filter with resolve block name from nth parent node.
Here are a few examples:
| Abbreviation | Output |
|---|---|
.b_m | |
.b_m1._m2 | |
.b>._m | |
.b1>.b2_m1>.-e1+.--e2_m2 |
Remember that you can always make bem filter a default one for HTML syntax.
Emmet Codes
Please enable JavaScript to view the comments powered by Disqus.comments powered by Disqus
Comments are closed.