キタジマタカシ 
Basis v7.0.0 を公開しました。これまで実際に使ってきて色々見えてきたことがあったので破壊的変更をいれまくりました。
変更点はチェンジログに記載しましたが、大きな変更点について書きたいと思います。
プリフィックス（アンダーバー）を無くしました
Basis の設計思想を書いた記事に、Basis の全てのクラスに_を付けた理由を書きましたが、今回のバージョンでプリフィックスを無くしました。変数（$_prefix）で定義されているので上書きすればつけることはできます。
そもそもプリフィックスをつけたのは Bootstrap を使っていてうっかり .btnとかしたときにデフォルトの濃い装飾がついてしまって上書きが面倒という経験をしたからでした。プリフィックスをつけることで、うっかりフレームワークのクラスをつけることがなくなり必要なときに使い分けができるなと。ただ、Basis は装飾が薄いフレームワークなので、うっかり Basis のクラスをつけたとしても上書きが苦ではなく、むしろデフォルトのクラスを上書きしてつかったほうがコードがスマートだなという結論にいたりました。そういうことでデフォルトではプリフィックスは空値で、必要な方は変数を上書きして付与できるような形にしました。
装飾を限界まで薄く
プリフィックスをなくしたことで、Basis のクラスを拡張する使い方が増えることを考慮すると、装飾は限界まで薄くしたほうが拡張性・自由度が高くなるかなということで、もともと薄かった装飾を更に削りました（もはやアラートコンポーネントなんかdisplay: blockの指定しかありません…）。
hidden, visible 用クラスの実装を変更しました
これまで hidden, visible 用クラスの実装は Bootstrap を参考に、.c-hidden-md、.c-visible-md-block のようなクラス名でそれぞれdisplayプロパティをhiddenにしたりblockにしたりする仕組みでした。ただ、displayを操作する形だとvisible用クラスのパターンがかなり多くなってしまうこと（サイズ×displayの種類）、クラス名が長く煩雑になってしまうというデメリットがあったため、clipプロパティとspeakプロパティを使う仕組みに変更しました。それに伴いクラスも.c-hidden-{サイズ}と.c-visible-{サイズ}のパターンにしました。この形式はpositionプロパティを切り替える必要があるので、positionを使っていない要素に指定しないと意図しない不具合がおきる可能性はありますがdisplayのパターンよりは使いやすいのではないかと思います。
ドロワーのマークアップを変更
これまでドロワーのマークアップはこんな感じでした。
<div class="c-drawer">
<div class="c-drawer__body">
メニューの内容
</div>
<div class="c-drawer__btn">[ハンバーガー]</div>
コンテンツ
</div>
実際のドロワーメニューは.c-drawer__bodyの中にあり、ドロワーを開閉するボタンやコンテンツも.c-drawerの中に入っているという仕組みでした。どう考えても違和感があるのですが、ボタンとドロワーメニューを疎にするための理屈が思い浮かばなかったので仕方なくこのような仕組みにしていたのでした。でも、aria-controlsとaria-labeledbyで関連付ければ同じコンポーネントとしてまとめなくても疎にできるんじゃね！ということで次のようなマークアップに変更しました。
<div id="drawer" class="c-drawer" aria-labeledby="hamburger-btn"> メニューの内容 </div> <div id="hamburger-btn" class="c-hamburger-btn" aria-controls="drawer">[ハンバーガー]</div>
命名規則の変更
これまで spinner 系のクラスや balloon 系のクラスは.c-spinner-circleとか.c-balloon-topのような命名でしたが、これだと MindBEMding なのに OOCSS の modifier 指定みたいな違和感があったので、modifier で拡張せずに別コンポーネントとして切り分けているものについては.c-circle-spinnerとか.c-top-balloonのように修飾語が前にくる規則に変更しました。
要素の余白のとり方の変更
p、ul、h1 などの HTML 要素は、Foundation レイヤーでデフォルトの margin を持たせる仕組みにしていました。一般的なフレームワークと同じように普通に HTML 要素を並べていけばそれなりに余白が空いて並ぶイメージです。ただ、実制作をしているとこの margin が結構邪魔になること、HTML 要素間の余白は良いとしてもコンポーネント間の余白の指定が面倒なことが結構あるなということがわかったので、デフォルトの margin は全て 0 にし、.u-contentを付与、もしくは@include _content()した要素の子要素間に margin を持たせるような仕組みに変更しました。これはかなり使い勝手への影響が大きそうな気がしたので随分迷ったのですが、最近人気の CSS フレームワーク Bulma がそのような仕組みだったのでいけるやん！と思い一気にやってしまいました。今のところ結構使い勝手良いなと感じています。
JS を適用する要素の指定方法を変更
ドロワーやセレクトボックスなどは JS で動きを制御しているのですが、Basis は用意されたクラスをそのまま使うことはそれほど想定していないので、例えば「.c-drawerに対してドロワーJSを実行」みたいにしていると、デフォルトのクラスを使わずに.my-drawerみたいな名前でドロワーを実装されている方がいる場合にドロワーが開かない、みたいな問題が起こってしまう可能性があります。そのため、これまではドロワーにはクラス名だけはなくdata-c="drawer"のようなJS発火用のラベルもつける、という実装にしていました。ただ使ってみるとこれが超めんどくさい。いちいちどのコンポーネントに JS が必要かなんか覚えていないので、実装の度にドキュメントを見る必要がありました。そこで、指定を HTML 側から JS 側に移して、
import BasisHamburgerBtn from './hamburger-btn.js';
new BasisHamburgerBtn({
btn: 'c-hamburger-btn'
});
のようにライブラリをnewするときに発火させる要素を指定する仕組みに変更しました。デフォルトで使うだけならビルドされた js を読み込むだけで良いですし、abstract を使う場合はそれなりに慣れたユーザーでしょうから勝手に指定してねという感じです。
公式サイトの構成を変更
Basis は npm から落としてきたり、GitHub から落としてビルドするとその中にスタイルガイドが作られるようになっていて、公式サイトを開かなくても手元でマニュアルが見れるようになっていました。
スタイルガイドは .scss のコメントから自動生成されるので更新は超簡単なのですが、公式サイトは手動更新になっていて更新とデプロイがくそめんどうでした。しかもほんとど同じ内容なので二重更新しないといけない…。ということで Basis を更新して GitHub にプッシュしたら Travis CI でスタイルガイドをビルドして GitHub Pages として公開、公式サイトはトップページだけにして、マニュアルとして GitHub Pages にしたスタイルガイドを利用、という構成にしました。超楽ちんすぎやば。
その他
その他クラス・ミックスインの追加・変更・削除など細々した変更もかなりやったので、詳しく知りたい方はチェンジログかコミットログでご確認くださいませ。
