cssをどこに記述すればよいか

Question

cssについて質問です。

あるページで、特定のdiv要素にマージンを付けたいなと思ってます。
そこだけ margin-top: 10px のようにしたいですが、汎用性のあるようなデザインでもないので、
クラスをつけてcssファイルに記述とかはせずに、<div style="margin-top: 10px">とかでやっちゃおうかと思っております。

それかいっそのこと、 <br /><br /><br /><div> のようにしてしまおうかとも思ってます。

このように、style属性にCSSを記述したり、改行でマージンを再現するような手法は、
かなり無理矢理感が出ていますが、一番良い解決策を教えて頂けますでしょうか。

また、style属性にデザインを書くデメリットも教えてください。

Answer 1

複数のファイルに分けて書くと、視線が遠くに飛んだり、別ファイルを
改めて開かなくてはいけなかったりして、思考の流れがストップしたり、集中が途切れてしまったりしますよね。
ですから、cssファイルとhtmlファイルを行ったり来たりしながら開発することは、
必ずしもベストとは言えないと思います。
0. なので、htmlはhtml。cssはcssで集中するように全く別の開発フェーズにしてしまうか、
0. 最初はstyle属性に全部書いちゃって、class属性を設定したくなったタイミングで全部 cssファイルにお引越しさせるか。

という選択肢もアリだと思います。
アウトプットの早さが命の モックアップやテストでは、cssファイルに必ずしも分けなくていいですし、
その代わり、「class属性を設定した方がいいことが判明したら cssファイルに全部 お引っ越しさせる」
というようなルールを決めて開発していけば、それほどむちゃくちゃなことにはならないと思いますよ。

もちろん、デザイナ班との分業ができているときや、版の管理がいるようなきちんとした
プロダクトを作るプロジェクトにいるときは、ちゃんと CSSファイルを分離しておかなくては
いけませんが。(おそらく明文化された開発規則になっているでしょう。)

＃style属性に書き出したあと、いろんなところに コピペしだしたら危険ですね。それは早々に
＃class属性にして cssファイルに引越させるべきです。(いきなり管理が大変になります)

Answer 2

私見ですが、htmlにstyleを記載しないほうがいいと思います。
理由は、同様の箇所が今後出てきた際にさまざまなところでstyleを記述していくと、指定が散在してしまって収集がつかなくなるからです。

使い回しの効くstyleをcssに登録しておいてclassを複数突っ込むほうが取り回しし易いと思います。
例）
.mt10{margin-top:10px;}

Answer 3

私個人の意見ですが、たとえ汎用性がなくともスタイルはCSSに書いたほうがいいと思います。
理由としては、HTMLの可読性の向上とスクリプトで操作するときの容易さです。
一人でそのHTMLファイルを触るのであればあまり気にしなくていいかもしれないですね。

Comments

[penguinshunya]

横から失礼します。
「スクリプトで操作するときの容易さ」とは、具体的にどういったことを指しているのでしょうか？

[YashaWedyue]

あまりない状況かもしれませんが、エレメントを削除して新しいエレメントを挿入、ってした場合、
削除したエレメントにスタイル直書きだと新しいエレメントにもスタイル適応しなくちゃいけなかったりですとか。
CSSに書いていればクラス指定するだけで済みますし。

[penguinshunya]

なるほど。理解しました。
返信ありがとうございます。