｜ Web
Sublime TextとEmmetとeCSStractorでBEMもサクサクマークアップ
ちょっとあおり気味のタイトルです。すいません。
Sublime TextにはHTMLからCSSのクラス構成を変換してくれるeCSStractorというプラグインがあります。
どんな感じかといいますと
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<header class="siteheader">
<h1 class="siteheader__title"><a href="#">siteTitle</a></h1>
<p class="siteheader__subText">subtext</p>
</header>
<nav class="globalNav">
<ul class="globalNav__list">
<li class="globalNav__item globalNav__item_active">nav01</li>
<li class="globalNav__item">nav02</li>
<li class="globalNav__item">nav03</li>
</ul>
</nav>
<body>
</body>
</html>
という感じのHTMLから
.siteheader {
}
.siteheader__title {
}
.siteheader__subText {
}
.globalNav {
}
.globalNav__list {
}
.globalNav__item {
}
.globalNav__item_active {
}
こういう感じに変換してくれます。
さらにはwith BEM Nestingというのを利用すると
.siteheader {
&__title {
}
&__subText {
}
}
.globalNav {
&__list {
}
&__item {
}
&__item_active {
}
}
こうしてくれます。わおー。(Sass v3.3（のはず）以降で有効)
便利！便利！サクサク！という感じですが、何点か気になるところがあるのでもうちょっと詰めて見て行きましょう。
EmmetのBEMフィルターとの食い合せが悪い
HTMLはEmmetのBEMフィルター（わかりやすい解説はこちら→EmmetのBEMフィルターでBEMるときのHTMLをサクッと書く | clear sky source）で出力したものですが、実は変換後
.globalNav {
&__list {
}
&__item {
}
&__item_active {
}
}
という感じで、モディファイアが独立したエレメントとして変換されています。そこはエレメントが親として記述して欲しいのココロです。で、HTMLを
<nav class="globalNav">
<ul class="globalNav__list">
<li class="globalNav__item globalNav__item--active">nav01</li>
<li class="globalNav__item">nav02</li>
<li class="globalNav__item">nav03</li>
</ul>
</nav>
と書いてみると
.globalNav {
&__list {
}
&__item {
&--active {
}
}
}
こうなりました。求めていたヤツです。
とはいえ、EmmetのBEMフィルター無しとなるとHTML書くのがめんどくさいです。ええ、めんどくさい（2回言いました）。
ということでどっちか設定を確認するなりをする必要があるなと調べてみました。
eCSStractorのセパレーターの変更
はい、すぐ見つかりました。
Preferences -> Package Settings -> eCSStractor -> Settings - User で、
{
"bem.modifier_separator": "_"
}
と書いておけば
.globalNav {
&__list {
}
&__item {
&_active {
}
}
}
はい期待通り！
これでBEMで書くときの大きな障害の一つ、
「めんどくさい」
が大きく改善するのではないでしょうか？
その他のeCSStractorの設定項目
他にも設定で調整できるとことをピックアップします。
"bem.element_separator": "__"--- エレメントのセパレーターを定義します。"preprocessor.parent_symbol": "&"--- 親ブロックを示す記述の指定です。"destination": "tab"--- デフォルトだと、新しいタブを生成してそこに記述されますが、clipboardを指定すれば直接クリップボードに反映します。
他の設定項目はご自身で確認して下さい。
あと、TipsとしてはHTMLを選択した状態で変換をかけると、ちゃんと選択した部分だけを変換してくれます。
ということで、Sublime TextとEmmetとeCSStractorでBEMるのをサクサクにしてしまいましょうというお話でした。