新案件でプロトタイプを作成する必要があったので、覚書として残します。
まずは、環境構築。
ディレクトリ構成
意外と悩ましいのがこれだったりします。
よく使用される構成ってのはあるんですが、要件によって変わってきたりもするんで、大概一からやり直しになるんですよね・・・。
今回は、シンプルに、下記のような構成にしました。
— assets
— stylesheets
— foundation // 共通で使用するスタイル
— _base.scss // 基礎となるスタイル。これのみ、他のファイル上で上書きOK
— _sanitize.scss // HTMLタグに初期設定されているスタイルのブラウザ間での誤差吸収。
— layout
— _header.scss
— _footer.scss
// 以下略
— component // 部品類のスタイル
— _button.scss
— _form.scss
// 以下略
— variables // 各種共通変数の格納
— _color.scss
— _gutter.scss
// 以下略
— mixins // Sassのミックスイン
— _breakpoint.scss
// 以下略
— helper // 微調整用のヘルパースタイル
— _margin.scss
— _padding.scss
— _visibile.scss
// 以下略
— javascripts
// 以下略
— ejs
// 以下略
— font
// 以下略
— images
— top
— pc
— mobile
— some_category
— pc
— mobile
// 以下略
— dest // assets内の各ファイル群の処理後の出力先
— gulpfile.js // gulpのタスクを記述
— package.json // nodeの依存関係の記述
CSSプリプロセッサに関しては、Sassではなく、CSSの記法も使えるScssの方を選択。
HTMLのテンプレートエンジンはejsを選択しました。hamlやJadeも検討したのですが、今回は新人さんもコミットする可能性があったので、極力癖が少なく、HTMLの記法をそのまま使えるものを、という意図です。
EjsはNode.js製のテンプレートエンジン。
stylesheets以下のディレクトリはファイルが肥大化してきた場合はもっと掘っていく必要が出てきそうですね。
とくに、ヘッダ周りは細分化したほうが良さそうです。
スタイルの上書きは、必ず同一ファイル内でのみ、とすることで、どこで上書かれているかに迷わないようにしました。
CSS設計
クラス名の命名規則に関してはBEMやSMACCSをそのまま使うのではなく、いいとこどりして、下記のようにしました。
■headerの場合
.header {}
.header-logo {}
.header-logo.is_hover {}
.header-globalNav {}
.header-globalNav.is_fixed {}
基本は、エレメント部分に関しては「-」でつなげ、モディファイヤは「_」。
また、状態に関しては、必ずクラスつなぎにし、「is_」接頭辞を付与するようにします。
さらに、一番頭の単語（今回の場合はheader）は必ず、ファイル名と同じものとします。これによって、どこにそのスタイルに関する記述があるのか探す手間を省けます。つまり、上記の記述は必ず「_header.scss」内に書かれている、ということです。
エレメント名が2語以上になるときは、キャメルケースを採用。エレメント区切りやモディファイヤとの混同を防ぎます。
基本方針はこんな感じ。
gulp環境の構築とタスクの設定、スタイルガイド（SC5 style guide generator）については後日公開予定です。
