質問: こちらでCSSファイルの分割について質問しました。 今回は、CSSで、ほとんどデザインは一緒なんだけれども、少しだけデザインが異なる場合の、CSSの記述方法についてお聞きしたいです。 例えば以下の二つのページがあったとします。 ``` ``` ``` ``` このようにboxとmini-boxがあり、デザインを何かしらしているとします。 デザインは今の所一緒なので、一つだけCSSを記述すれば良いと思います(boxとmini-boxについて)。 page2のboxにのみ、少しだけ、変更を加えたい場合(例えばborderをつけるなど)はすでにあるboxのCSSはそのままで、追加でするのが一般的かと思います。 ですが、page2のmini-boxも異なる修正を加えたい場合、boxとmini-boxをクラスで囲んで、セレクタ指定した方が良いのでしょうか?例えば以下のようになります。 ``` ``` このようにすると、CSSは以下のようにかけると思います。 ``` // page2.css .page2-wrapper > .box {} .page2-wrapper > min-box {} ``` こうすれば、共通で使っているCSSで、boxとmin-boxのデザインをしておけますし、page2.cssで異なる点だけ修正を追加すれば良くなると思います(lineを追加するだけなら、classでlineとした方が良いですが、もっとデザインが複雑となる場合などを想定)。 そしてもう一つ方法として考えられるのが、完全にCSSを分離するという方法です。 ``` ``` このようにすると、box,min-boxのcssを、page2-box,page2-mini-boxようにコピーして適時修正という感じになります。 ここでのデメリットとして、共通な部分を使いまわさないので * 記述量が増える。 * CSSの重複度が増す * page3などが出来て、デザインが少し異なる場合、コード量がpage数の影響をかなり受ける メリットとしては * CSSを見たときに、boxのcssのデザインを見なくて良い(page2-boxに全て記述しているので) ぐらいかと思います。おそらくこの手法が現実的ではないですし、選ばれない手法だと思います。 かといって、前者の手法も、「ページごとに独自のラッパーで囲んで」と強引な気もします。 皆さんの意見を伺いたいです。宜しくお願いいたします。
回答: 自分の場合、「``にページ特有のクラスをかける」という方法を取っています。そして、SCSS(ネストや変数など、拡張されたCSS)で書く際に、いちばん外側にその``を指定しておけば、絶対にほかと干渉しないので便利です。 このように細かく分けて書いたものをつなげて1本のファイルにしても、目的の箇所だけきっちり利いてくれます。 ``` body.page-3{ /* この中で、page-3専用のCSSを書いていく */ } ``` HTMLタグにIDやクラスを指定するワケ