似たcssファイルを共通に使えるようにするには？

質問

いつも勉強させていただいております。
今回は質問をさせていただけないでしょうか。
それでは、よろしくお願いします。

数十のほぼ同じような内容のcssファイルがあります。
それぞれ、少しだけ違います。
その為、差分だけを別ファイルにして管理すれば結構楽になると考えています。

下記のような感じで差分を別ファイルにするには具体的にどのようにすれば
良いでしょうか？
#例は、あくまでイメージです。
@importを使えば良いのでしょうか？でも、具体的にどのように記述するかわかりません。

・A.css
1
2
c1
3
c2

・B.css
1
2
d1
3
d2

　↓↓↓

・A.css
1
2
#include kyou-c.css.c1
3
#include kyou-c.css.c2

・B.css
1
2
#include kyou-d.css.d1
3
#include kyou-d.css.d2

・kyou-c.css
c1
c2

・kyou-d.css
d1
d2

回答No.3

ICHI-yan · ベストアンサー

セレクタはポイント制です。同じポイントなら、後ろが優先です。ここ、カン違いしている人が多いので気をつけてくださいね。
http://www.stylish-style.com/csstec/base/order.html

cssは覚えるではなく、組合すものなので、どんどん試してみて、どうなるか実験すると上達が早いですよ。

回答No.2

dezimac

知識や経験不足を謝ることはないですが、自分で調べる、実際に試すくらいはしましょう。
こんなことでPCが壊れること無いのだし、いつ付くか判らない解答を待つよりも時間の節約にもなりますよ。

CSSは原則として同じ項目に対する設定は、一番最後に書かれたものが適用されます。
それ以外はどんな順番で書いても同じです。
---
p {
color: #000000;
margin: 0px;
}
p{
color:#ff0000;
}
---
と書けば、マージンは0pxで文字は赤になります。

---
b{color:#ff0000;}
p{color:#00ff00;}
---
p{color:#00ff00;}
b{color:#ff0000;}
---
両方とも結果は同じ。

回答No.1

dezimac

> 差分だけを別ファイルにして管理すれば
逆に全てに共通の部分を別ファイルにして読み込んだ方がずっと楽なのでは？

---<pege1.css>---
#ページ1用のCSS
#全ページ共通部分を読み込み
@import url("common.css");
#以下はこのページ専用設定
.comment{background: #ffffcc;}

---<pege2.css>---
#ページ2用のCSS
#全ページ共通部分を読み込み
@import url("common.css");
#以下はこのページ専用設定
.comment{background: #ffcccc;}

---<common.css>---
#全ページ共通の設定
body{background: #ffffff;}

あと、@importを使わなくともHTML側でも以下のように記述すれば、いくらでも外部CSSファイルを指定できます。

<link rel="stylesheet" type="text/css" href="css/page1.css" media="screen,tv">
<link rel="stylesheet" type="text/css" href="css/common.css" media="screen,tv">

補足

レスありがとうございます。
少し光が見えてきました。

>> 差分だけを別ファイルにして管理すれば
> 逆に全てに共通の部分を別ファイルにして読み込んだ方がずっと楽なので> は？
おっしゃる通りですね。
でも、cssの中の記述順によって表示が変わってしまうことはないでしょうか？
つまり、下記の２つのファイルでは内容によっては、表示が変わってしまうようか気がしています。
不勉強ですいません。

・foo1.css
1
2
3
4

・foo2.css
4
3
2
1