設計案

[inc2734]

参照：http://2inc.org/blog/2016/11/17/5429/

Basis の基本設計見直し用の issue。随時書き換える

仕様案

• modifier の提供は class のみ
• イベントのバインドはdata-c( コンポーネント ) もしくはdata-l
  • それがないとそもそも正しく動作しないというスタイルもこれにあてる
• data-c, data-l に複数の要素名が入るような指定は許容しない
• data-c, data-l な要素にパラメーターを与えたい場合はdata-c-{名前}-{パラメーター名}とする
• block, element は mixin も提供
  • 本来は block, element ではなく汎用的なパーツを提供したい
• IE9はどうする？
  • これはそのままでも良いのでは？そのうち消えるし
  • なるべく標準コンポーネントにはカスタムデータ属性をあてたくない
• 変数、mixin、placeholder の命名も class と統一する _, $_
• mixin も MindBEMding に沿った命名とするが、そのコンポーネント用のヘルパーが欲しくなったときはu-{名前}-{ヘルパー名}とする

ドロワーの場合の例

<div id="drawer" data-c="drawer">
  <nav data-c="drawer__body">
    <ul>
      <li>
        アイテム
        <div data-c="drawer__toggle" aria-expanded="false"></div>
        <ul data-c="drawer__submenu" aria-hidden="true">
          <li>
            アイテム
            <div data-c="drawer__toggle" aria-expanded="false"></div>
            <ul data-c="drawer__submenu" aria-hidden="true">
              <li>アイテム</li>
              <li>アイテム</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>アイテム</li>
    </ul>
  </nav>
</div>
  
<div class="_c-hamburger-btn" data-c="drawer-btn" aria-expanded="false" aria-controls="#drawer"></div>

レイヤー構成

• フロント側は FLOCSS
• 各クラスは次のようなレイヤーで構成される
  • block, element が mixin で提供される。ここで提供されるのは最低限の枠組みのみ
  • 上記の mixin で構成された placeholder が提供される。ここでは最低限の装飾も提供される
  • 上記の placeholder で構成されたクラスが提供される。ここでは modifier も提供される
• 各 block, element をカスタマイズするためのグローバル変数はなるべく提供しない（グローバル変数で提供しないといけないのは主に装飾部分であり、それらが不要なユーザーは mixin を使用すべきであり、装飾も必要な場合は placeholder やクラスを使えば良いため）。