Go to main content

HTML to BEM tool

Some time ago I decided not to create any more wild CSS that have no conventions and logic. Instead of that I have chosen to learn and use the BEM methodology that brings structure into stylesheets. The only disadvantage of this approach is that classes are long and so it takes some time to write them.

HTML to BEM tool

In this article I would like to present you a tool that saves you time by automatically generated CSS templates from HTML components.

If you are reading this I assume you know the BEM methodology and you just need to make yourself more effective. However, if you are not familiar with the BEM methodology here is a great introduction.

The BEM methodology relies on 3 aspects:

  • Block
  • Element
  • Modifier

Whenever I build a new component I create a full HTML code first. During the process of writing the HTML code I design class names and position of elements inside the component. A sample component could look like this:

<section class="hello hello--world">
  <h1 class="hello__heading">Hello World</h1>
  <p class="hello__paragraph">
    Hey <a class="hello__link" href="#">kids</a>.
  <a class="hello__link hello__link--cta" href="#">Call to action</a>

At this stage we need to create CSS definitions for the HTML code. And now is the time for our shiny productivity tool! Normally, you would need to extract all the classes manually and create a CSS template. With the tool it is only a matter of “copy and paste”.

Let me introduce you The HTML to BEM tool.

You only need to copy your HTML component and paste it in the left hand side text editor in the tool. Immediately, you will get a CSS template in the right hand side text editor. You can even choose whether the template should be generated in the CSS or LESS language and set code indentation as well. Keep in mind that top-level html element must contain a block class name to get the template. Enjoy!

Further reading

all posts
  • Front-end & JavaScript

    Ignored website optimizations

    From time to time people ask me to do a review of their website and give them some recommendation on how to improve performance or maintainability. A very common trend I see is tha…

  • Front-end & JavaScript

    JS library: Google Calendar as a list on your website

    One of my clients asked me to display list of Google Calendar events on their website. They required a client-side solution so I was looking for a pure JavaScript way. None of read…

  • Kentico Xperience

    Kentico as a product and a business partner

    Petr Palas, the director and the only owner of the Kentico company, started the business as an outcome of his thesis in June 2004. He is one of the most hard-working men I’ve ever …