BEM用HTML&CSS自動生成ツール
classが設定されていない場合、タグをclass名に使用するこのツールについて
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>