CSSのid名class名の重複回避方法について

Question

今、複数ページがあるサイトを作ろうとしているのですが、他の人が作成をする場合もあるので、ヘッダ・フッタなど、共通部分に使っているcssの設定（idやclass名）と、個々のページで設定するcssの設定が重複しないようにしたいと思っています。もし、共通cssと個別cssに同じ#fontというid名が存在してしまったとして、個別のページのcssファイルに↓の用に記述し #page01 #font{ 　color:#FFFFFF; } html内の、

～

の中に含まれるid="font"と定義した場合共通のidに#font　が存在していても大丈夫なのでしょうか？また、大丈夫な場合、idやclassを作るたびに #page01 #font #page01 .photo と#page01を頭に全部つけると分かりづらくなるな。。と思うのですが、それを回避する方法はありますでしょうか？ほか、重複しないアイデアをご存知の方がいらっしゃいましたらご教示いただければ幸いです。どうぞよろしくお願いいたします！

noname#39970 · Accepted Answer

重複した場合は
同じ場合は後から定義されているもので上書きされる。
定義に含まない物は変更されない

例
・A.css
　border:dotted 2px;
・B.css
　border:solid red;
これでA→Bという順で読み込ませた場合は"border:solid 2px red"となる。

重複させないようにするには担当者コードまたは個別名を装飾して区別させる。
　#suzuki_01 .font
懸念通り。しかしこれ以上の回避策は難しいと思われる。
作業の方法を書面化し、統一しておけば多少は軽減できると思われる

saaya_holic · Answer

回答ではありませんが参考まで。
入門書にはclassは何度でも使えるけどidはページ内に1つだけ、とよく書いてありますが、シンタックスチェックが厳密なシステムでない限り実際には最新のidが有効です。

steel_gray · Answer

#font{～}

#font{～}
と、二回以上出てくれば後者が優先。(「カスケード」ですから)
なので。
@import(common.css);/*共通スタイルの読み込み*/
#font{～}
みたいな書き方でもいいかもしれない。

ただし、
.hoge #font {～}
#font {～}
みたいな書き方になると前者が優先。（算出された詳細度による）
後者に !important を付けて逆転させる手もあるけど。
http://anslasax.net/css-make/cascade.html

なので、やっぱり複数人で作業するなら、個別スタイルの為にbodyにでもidを付けて
#page1 #font{～}
<body id="page1">
<XXX id="font">
みたいな書き方にしておいた方が混乱しづらく無難だと思います。

CSSのid名class名の重複回避方法について

重複した場合は

回答ではありませんが参考まで。

#font{～}

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング