Web前回の記事「CSSフレームワークを開発していて悩む、CSSフレームワークが持つクラスのHTMLへの依存について」の続編です。リファクタリングしました。構成されたクラスを提供していました。レイヤーを追加しました。コンポーネントの場合は次のような感じです。レイヤーでは最低限の骨格だけを定義。レイヤーでは最低限の装飾も定義。イベント割り当てなど、クラスに依存しないほうが良い部分についてはカスタムデータ属性を使うように変更しました。最低限の動作や変更を行う場合、これだけはないとコンポーネントとして成立しないというスタイルがでてきます。そのため、そのようなスタイルについてはクラスではなくカスタムデータ属性に対してスタイルをあてました。ドロワーの場合は次のような感じです。レイヤーを追加したことでこれらの設計や命名規則から解放されます。ボタンコンポーネントを定義したい、ということであれば次のように実現できます。フレームワーク、セマンティックじゃない問題」も解決できますね。前の記事で詳しく書きましたが、これまではクラス名でイベントの対象を指定していました。ライブラリのインポート段階でこのセレクタは変更できるようにしていましたがそれはダサいなと...。カスタムデータ属性を使うようにしたことで、このダサい機能は不要になりました。カスタムデータ属性を付与することでそのコンポーネントとして成立する最低限の動作と装飾を、それ以上の見た目を整える装飾はクラスで行うという感じです。対する批判としてよく聞かれますね。場合は公式サイトから必要なコンポーネントを絞ってダウンロードできるので、不要ならその部分ダウンロードしなかったらええやん...と思うんですが。場合は変数でクラスを生成する、生成しないを選択できるようになっています。レイヤーを追加したことで、コンポーネントの生成がもっと簡単になるかなと。ちなみにクラスを生成したくない場合は次のような感じで簡単にできます。まとめるようにしてみました。プラグインデベロッパー。多数のプロダクトをオープンソースで開発・公開しています。開発・販売しています。Resetsの紹介記事です。キタジマタカシ2012年3月11日WebWebボックスを横並びにしたときの最端の余白をなんとかする画像と画像の間に25pxの余白を持たせた形で横並び(float:left)。[...]キタジマタカシ2009年11月5日Webこの投稿へのコメントコメントはありません。コメントを残すメールアドレスが公開されることはありません。プラグインデベロッパー。多数のプロダクトをオープンソースで開発・公開しています。開発・販売しています。