id、classの記述について

質問

WEBの記述について質問します。

スクールではclassやidに、

.margin{
padding-left:10px;
margin-left:10px;
}

など1つのId、classに何個も指定をするように教わりました。
しかし前勤務していたweb制作会社ではひとつのclassやidに一つしか指定してませんでした。
classに分かりやすい名前をつけて分類してました。

.margin_left{
margin-left:10px;
}

これはどちらが正しいんでしょうか?
一般的に会社で使われている方法はどちらが多いのでしょうか?

回答No.3

DrFell

結論を先に、正確に言うと、両方間違いです。

htmlには文章構造を、視覚表現にｃｓｓを使います。役割分担をします。

.marginなんて、文章構造的に見て、クラスの付けかたを間違っています。基本理念を理解できていないから例に出すのでしょうが。視覚表現を表すクラスを付ける人や、スクールは例え「例」であっても、避けるほうが学びなおしをしなく無くても済みます。

質問の内容も基本原則がわかっていないから出てくる疑問です。marginなんてクラス名を使っているところは、ほとんどないと思います。

根本的大原則から、学びなおされることをお勧めします。

あと、
＞classに分かりやすい名前をつけて分類してました。
これは、昔、htmlでデザインしていた人が、ｃｓｓへの移行時によくやる過渡期的症状だと思います。ｃｓｓやhtmlを本当に理解すれば、もっとわかりやすい名前をクラスに付けます。が、初心者的にはわかりやすいとは思えないと思います。こういうクラスをわかりやすいと思うだけでも、勉強はマイナスからのスタートです。

クラス名を置いておけば、例えば
h1{margin:10px;color:red;background:～}
なら、h1に関することを数個～十数個指定するのが、一般的です。文章構造に視覚表現をつけるのですから、初期値と変更したいことすべてを書き連ねます。

h1{margin-left:10px;}
h1{color:red;}
h1{background:#555;}
と書き連ねるのは、見たことがありません。文法的には間違いではないです。

繰り返しになりますが、文章構造と××の分離は、webを勉強するなら最初に抑えておくべきことです。まずは、その辺りの習得をお勧めします。

お礼

回答ありがとうございました。

WEBの会社のあの人はあの人なりに考えがあってあぁいう記述をしたのだろうと思います。

特にclassの例を挙げるのに思いつかなかったので、.marginという名前を何となくつけましたが、実際に記述する時はその項目が分かるように記述はしています。

間違ってると思って指摘して心配されるのはありがたいんですが、ご心配には及びません。

回答No.2

white_catcat

正しいといえばどちらも正しいですが、やはり後者は煩雑になりスマートではありません。
というより、私はそのような書き方を見たことがありません。
制作会社にはそれぞれ記述ルールがあると思いますが、マイナーな部類に入ると思います。

お礼

なるほど。
やはりスクールが正しいことが分かりました。

大変参考になりました。ありがとうございました。

回答No.1

nobuzoh0407

ひとつのclassやidにひとつCSSを指定するというのは、
一般的ではないかと思います。
それではタグの中にstyle属性を直接書き込むのと大差なくなってしまうので、
可読性が悪くなるのとファイルサイズが大きくなってしまうのではないでしょうか。
（ファイルサイズが大きるなるといってもたかが知れてるのですが）

オブジェクト指向という考え方になるのですが、
classというものはその名を体現するものであるべきだと思います。
見出しであるタグにclass="midasi"とした場合、
見出しとはどういうものかを
.midasi{
//ここに記述します。
//一般的には複数行になるでしょう。
//例えば↓のように、です。
font-size:20px;
line-height:20px;
height:20px;
width:100%;
font-weight:bold;
text-align:left;
margin:5px;
}
自分がWeb制作を行うなら。
上記のようなクラスを基本として「common.css」などといったファイルに集め、
サイト毎に異なる設定は「サイト名.css」などと別ファイルにし、
.midasi{
//このようにサイト特有のCSSを指定します。
color:blue;
border-left:10px solid blue;
}
と、このようなやり方が一般的かと思いますが、
どうしてひとつのclassやidにひとつCSSを指定するのか、
それはそのweb制作会社の意図があってのことだと思いますし、
こう習ったのですがどうしてそうなのですかといった質問はすべきだったかと思います。

お礼

そうですよね。
クラスやｉｄは分かりやすい名前を付け、その中身はその項目についてのｃｓｓを記述する。
それが一般的ですよね。

前の製作会社はまだｗｅｂの部門が立ち上がったばかりで、製作者が1人しかいなく、いつもぎりぎりで仕事をしていたので質問がしにくかった状況でした。
怒られてもいいから聞いてみた方がよかったかなとも今は思ってますけどね・・。

解答ありがとうございました。

もうちょっとこのスレッドは解答を受け付けていますので、他の方の意見も聞いてみたいです。
よろしくお願いします。