• Packages
  • Themes
  • Documentation
  • Blog
  • Discussions
Sign in

html-to-css

Generate CSS classes from HTML structure
  • #html
  • #css
  • #bem
  • #productivity
ardcore
127,003
74
  • Repo
  • Bugs
  • Versions
  • License
Flag as spam or malicious

atom html-to-css package

Generates CSS boilerplate based on the selected HTML.

  • Only cares about classes, ignores id's/other possible selectors
  • Supports CSS, SCSS, Sass, LESS and possibly other syntaxes
  • BEM support (actually, more like a BE support for now. Modifiers support will be added if needed)
  • Configurable nesting, grouping and formatting
  • "Supports" JSX (recognizes the className attribute)
  • Is forgiving (meaning it should work even with invalid HTML code)

demo

atom html to css

settings

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>
</section>

↓

.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:

'atom-text-editor':
  'alt-x': 'html-to-css:generate'

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

indentation

\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.

parsing

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)

TODO

  • extend it with different transformers/formatters as settings.

Contributions welcomed.

I think this package is bad news.

Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.

  • Terms of Use
  • Privacy
  • Code of Conduct
  • Releases
  • FAQ
  • Contact
with by