Atom Packages Directory

a package directory for a text editor of the 21st Century

Html To Css by Szymon Pilkowski

Install with:
    apm install html-to-css

atom html-to-css package

Generates CSS boilerplate based on the selected HTML.


atom html to css


BEM grouping

key: html-to-css.bem-group, type: boolean, default: false

Should BEM-style declarations be grouped and nested in a SCSS-style?

When true:

<section class="introduction">
  <h1 class="introduction__header"></h1>
  <p class="introduction__text"></p>

.introduction {

	&__header {


	&__text {



When false, the same HTML code becomes:

.introduction {


.introduction__header {


.introduction__text {


BEM separator token

key: html-to-css.bem-separator, type: string, default: __

Character(s) used as a BLOCK__ELEMENT separator in BEM.

rulelist open token

key: html-to-css.rulelist-open, type: string, default: ` {\n\n`

Character(s) to output when opening rulelists (including whitespaces)

rulelist close token

key: html-to-css.rulelist-close, type: string, default: }\n\n

Character(s) to output when opening rulelists (including whitespaces)

You can change them to fine-tune the output format to your own liking. Just remove { and } to support SASS-like indented syntax.

Grouping character

key: html-to-css.grouping-character, type: string, default: &

Character(s) to be used in output when referring to the parent element while nesting declarations SCSS-style.

key bindings

To avoid conflicts and promote peace, this package doesn’t register any keys by default. Do it yourself, or just paste the following lines in ~/.atom/keymap.cson:

  'alt-x': 'html-to-css:generate'

It’ll try to register alt+x key shortcut.


\t is used to indent, but Atom seems to be clever enough to convert it to your default style when pasting. Let me know if it’s not doing that.


due to the forgiving nature of the excellent htmlparser2 used under the hood, this plugin is able to deal with: * incomplete selections (wouldn’t it be faster if you could select opening tags only? well, you can) * not-really-valid-HTML-code (JSX, anyone?) * general mess (really. you can hit cmd+a in this markdown file and it’ll still parse the few HTML lines from the code sample)


Contributions welcomed.

Keywords: html, css, bem, productivity Suggest keywords
Fork me on GitHub