オレオレcssボイラープレートが良い感じかなーと思えてきたからまとめておく。
muyuu/base
実際に書いてる内容は大体ここに置いてるやつと同じ
ルール
- normalize.cssではなくreset.cssを使う
- モジュールベース
- BEMベース
- ユーティリティクラスいっぱい使う
- 冗長なのは諦める
normalize.css系は最近使わなくなった。h系タグはどうせマージン削るしリスト系もこっちでやりたい形があるからもうリセットで良いや的なノリ。
良くないとされてきた気がする各種ユーティリティクラスは積極的に使ってる。特にマージン。モジュールとモジュールの余白が全てのページにおいて一定とか幻想だから。あり得んから。だからモジュールの一番外側には絶対マージン使わない。全部ユーティリティクラスで余白作る。
大まかなディレクトリ構成
css/
conf/ # 設定ファイル
common/ # いつでも使うやつ。 reset.sass とか mixin とか
mixin/ # サイト用mixin集
base/ # 各html要素
util/ # ユーティリティクラス
layout/ # レイアウト用
module/ # モジュール用
column/
box/
list/
... # モジュールは更に種類のディレクトリに分ける
override/ # 外部ライブラリ上書き用
style.sass
設定ファイルで設定する事
- 1グリッドのサイズを決めてグリッドカラムのベースにする
- レスポンシブか否かのフラグ
- ブレイクポイントの数値
- 使用するカラーを変数化
mixin
- メディアクエリ用のmixinはよく使う
- 設定ファイルに記述した数値を元に作成
- 要素が複数個ある場合に一番上の要素だけマージン削るやつをmixin化
ユーティリティクラス
- マージン、テキスト、アラインとかの調整系はクラス化
- ユーティリティは「u-」接頭辞を付与
- 細かい調整はhtml側でコントロールできるようにしたい
レイアウトのルール
- サイト共通で使われる感じのレイアウトのスタイルをパーツ毎のファイルに分割
- パンくず、ページトップへ、ヘッダ、フッタ、コンテンツ部分、とか
- レイアウトは「l-」接頭辞を付与
モジュールのルール
- element、modifier のBEMベースな命名規則
- モジュールのルートで 色・背景色・フォントサイズを指定しておく
- モジュールのルートにはマージンを設定しない
- modifier はモジュールのルートにだけ記述
- モジュールの中にステート系（ホバー、メディアクエリ）も含める