BEM class name generator for Vue.js

vue-bem-cn

BEM is an abbreviation of the key elements of the methodology — Block (Standalone entity that is meaningful on its own.), Element (A part of a block that has no standalone meaning and is semantically tied to its block) and Modifier (A flag on a block or element. Use them to change appearance or behavior.).

Also, BEM has strict naming rules which can be found here.

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copying and pasting.

You can check the quick example of the vue-bem-cn, Block btn. Vue Single File Component, to get an idea how you can use the name generator in Vue.js, and the compiled result.

Take a look at the Live Demo to see how to call the b() method for class name generation. More examples in API section.

More info regarding BEM visit http://getbem.com/ & https://en.bem.info/

Find the vue-bem-cn on GitHub based on bem-cn-lite, by @c01nd01r.