CSSのレイヤーにpagesを追加するか？

[manabuyasuda]

現状ではページ単位での個別のスタイルは専用のCSSファイルを作ることになっている。つまり、共通で使われないスタイルはFLOCSSの中に含まない。

1枚のCSSファイルとして書き出したい場合に個別ページ特有のスタイル（Projectレイヤーの上書きなども含めて）を書けるレイヤーがない。

object/page/_comment.scssのようにする。Sassのファイル名はページのファイル名とディレクトリ名と基本的には合致するようにする。つまり、ディレクトリ名だけだったらディレクトリ共通、ディレクトリ名とファイル名を含んでいたらページ専用のスタイル。

bodyタグに.pg-commentのように、接頭辞.pg-とSassファイルと同じクラス名をつけ、スタイルを記述する。

読み込む順番は以下のようになるのが適切か？

1. Object
   1. Component
   2. Project
   3. Page ←new!
   4. Theme
   5. Scope
   6. Utility
   7. QA/Test

まとめ

• object/page/
• 接頭辞は.pg-
• ファイル名は参照するHTMLファイルを特定する一意なもの（ファイル名やディレクトリ名を入れる）
• 参照するHTMLファイルのbodyにクラスをつけることで読み込めるようにする（例えば.pg-commentのように）
• Projectレイヤーのあとに読み込ませる

[manabuyasuda]

Scopeレイヤーで代用できるかもしれない。

ブログも1つのページと考えることができる。Scopeレイヤー内のファイル名のつけ方は.pg-と同じにする。

[manabuyasuda]

JavaScriptでもPHPでもいいけど、動的にbodyにクラスをふれるようにしておくと運用しやすい。

例えば、テスト環境も含めたドメインを除いたURLから、スラッシュと拡張子を取り除いたクラス名を付与する。クラスはファイル名まで特定するものと、ディレクトリ名までを特定したものの2つ以上を付与できるようにする。

いつでもスタイルを追加することができし、bodyにクラスを振り忘れたり振り間違えたりする恐れがなくなる。