postcss-plugin-bem-escape-block-name-less-modifire

postcss-plugin-bem-escape-block-name-less-modifire

deprecate

this project name is typo.

modifire
modifier

the project with the correct name is here.

this PostCSS plugin fixes minor problems in modifier class without block name in BEM(exactly MindBEMding).

this plugin was created to solve the problem of a specific context (block-name-less modifire), it is not designed to escape the css selector generically.

this PostCSS plugin will transform this:

.blcok.--modifire-a.--modifire-b {
    ...
}

To this:

.blcok.\--modifire-a.\--modifire-b {
    ...
}

installation

npm i -D postcss-plugin-bem-escape-block-name-less-modifire

usage

postcss([ require('postcss-plugin-bem-escape-block-name-less-modifire') ])

problem and solution

in the specification of selector name of css, if there is a hyphen (-) first, it is supposed not to specify a hyphen successively.

a strict web browser about this specification will not recognize such a class name. (ie, old android browser, etc)

so this plugin solves this problem by escaping the first letter of the class name in this pattern.

why use a modifier without a block name ?

when css is written in MindBEMding, if the modifier gets complicated, your html will be very ugly.

(the css file can be solved with a preprocessor like sass!)

<div class="my-important- class  my-important-class--active  my-important-class--danger  my-important-class--strong">

so i omit the modifier block name.

when writing like this with sass...

.my-important-class {
   &.--active {...}
   &.--danger {...}
   &.--strong {...}
}
/**
output:
.my-important-class.--active { ... }
.my-important-class.--danger { ... }
.my-important-class.--strong { ... }
**/

html will be so cute! It is!

<div class = "my-important-class  --active  --danger  --strong">