https://teratail.com/questions/66996#reply-105993
こちらでCSSファイルの分割について質問しました。
今回は、CSSで、ほとんどデザインは一緒なんだけれども、少しだけデザインが異なる場合の、CSSの記述方法についてお聞きしたいです。
例えば以下の二つのページがあったとします。
html
1<!-- page1 --> 2 3<body> 4 5<div class="box"> 6</div> 7 8<div class="mini-box"> 9</div> 10 11</body>
html
1<!-- page2 --> 2 3<body> 4 5<div class="box"> 6</div> 7 8<div class="mini-box"> 9</div> 10 11</body>
このようにboxとmini-boxがあり、デザインを何かしらしているとします。
デザインは今の所一緒なので、一つだけCSSを記述すれば良いと思います(boxとmini-boxについて)。
page2のboxにのみ、少しだけ、変更を加えたい場合(例えばborderをつけるなど)はすでにあるboxのCSSはそのままで、追加で<div class="box line">するのが一般的かと思います。
ですが、page2のmini-boxも異なる修正を加えたい場合、boxとmini-boxをクラスで囲んで、セレクタ指定した方が良いのでしょうか?例えば以下のようになります。
html
1<!-- page2 --> 2 3<body> 4<div class="page2-wrapper"> 5 <div class="box"> 6 </div> 7 8 <div class="mini-box"> 9 </div> 10</div> 11</body>
このようにすると、CSSは以下のようにかけると思います。
css
1// page2.css 2 3.page2-wrapper > .box {} 4 5.page2-wrapper > min-box {} 6
こうすれば、共通で使っているCSSで、boxとmin-boxのデザインをしておけますし、page2.cssで異なる点だけ修正を追加すれば良くなると思います(lineを追加するだけなら、classでlineとした方が良いですが、もっとデザインが複雑となる場合などを想定)。
そしてもう一つ方法として考えられるのが、完全にCSSを分離するという方法です。
html
1<!-- page2 --> 2 3<body> 4 5<div class="page2-box"> 6</div> 7 8<div class="page2-mini-box"> 9</div> 10 11</body>
このようにすると、box,min-boxのcssを、page2-box,page2-mini-boxようにコピーして適時修正という感じになります。
ここでのデメリットとして、共通な部分を使いまわさないので
- 記述量が増える。
- CSSの重複度が増す
- page3などが出来て、デザインが少し異なる場合、コード量がpage数の影響をかなり受ける
メリットとしては
- CSSを見たときに、boxのcssのデザインを見なくて良い(page2-boxに全て記述しているので)
ぐらいかと思います。おそらくこの手法が現実的ではないですし、選ばれない手法だと思います。
かといって、前者の手法も、「ページごとに独自のラッパーで囲んで」と強引な気もします。
皆さんの意見を伺いたいです。宜しくお願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/02/24 07:32