このツールについて

HTMLタグを貼り付けると、BEM用のclassを付与したHTMLとCSSを自動で生成するツールです

使い方

【例①】

入力

<div class="sample-class">
<div>
    <img>
</div>
<span class="sample-class2">
</span>
</div>

出力

class名がないタグにはclassが自動で付与されます。

<div class="sample-class">
<div class="sample-class__element">
    <img class="sample-class__element">
</div>
<span class="sample-class__sample-class2">
</span>
</div>

「classが設定されていない場合、タグをclass名に使用する」にチェックを入れるとclassが振られていないタグについては該当のhtmlタグをclass名に使用します。

<div class="sample-class">
<div class="sample-class__div">
    <img class="sample-class__img">
</div>
<span class="sample-class__sample-class2">
</span>
</div>

【例②】

classが複数付与されている場合は、最初のclassが使用されます。

<div class="original-class original-class2">
<div>
    <img>
</div>
<span class="sample-class3 sample-class4">
</span>
</div>

出力

<div class="sample-class sample-class2">
<div class="sample-class__element">
    <img class="sample-class__element">
</div>
<span class="sample-class__sample-class3 sample-class4">
</span>
</div>