-
ID:VcWad. さんの質問

htmlからcssを適用する際に、いまは1つの要素にfont-sizeとmargin等の要素をまとめて書いています。ですが後から変更を加えたいと思ったとき<div class="sidebar m40 p20">のようにmarginとpaddingを別に分けて書いたほうが効率的なんじゃないかと思うようになったのですが、ソースをきれいに書きたいと思ったときこういった書き方はナンセンスでしょうか?

みんなの回答 13 件

ID:IaT9vT さんの回答

その書き方でサイトを作っていて、サイドバーのマージン40px?がやっぱり30pxの方がいいなぁ。なんて思った時に全て修正していくのでしょうか?
そもそもクラスsidebarにmargin, paddingを書いておけばいいのではないかと思った僕の方が変なんですかね???

ID:XZFI4s さんの回答

僕はmargin or paddingだけを指定したい(id・classを作るまでもない)時だけ、m20,p40などのクラスを使っています。sidebarというクラスをつけるなら今後の管理の面を考えて、そこにmarginやらpaddingも指定しておいたほうがいいと思います。

ID:rJDmZ4 さんの回答

余白の管理はデザインする上で大事な事なので、後で修正する余地があるのはデザインが出来てないと言えるし、あまり好きな書き方じゃないな。
別に設定があると好きな余白が作れて楽だとは思うけど。

ID:0HwJPv さんの回答

トピ主の効率的というのが分からないのでそのあたりの
考えを書いてくれると回答しやすいです。

私は1つのタグに複数のクラスは極力つけないようにしています。
例えば例に挙げているclass=sidebarなどは用途やスタイルが
ほぼ決まっていることがほとんどじゃないでしょうか。
それをわざわざ分解してhtmlに記述するのは労力が掛かるだけかなと。
また、管理面からもm40やp30といったクラスのついた箇所を
すべて把握していないと意図しない箇所まで変えてしまうことがありますよ。

なのでコンテンツ内のpやli、見出しのように汎用的に使うスタイルで
個別に余白が必要な場合に調整用クラスとして作るくらいがいいかと思います。

ID:xRar7y さんの回答

htmlとcssは分離する。
htmlとjsも分離する。
htmlとphpも分離する。

一般的には、構造は構造、デザインはデザイン、プログラムはプログラムで分けて管理したほうが効率がよいとされますね。
そういう意味では、cssフレームワークのように、ほとんどのデザインをcssクラスで管理してしまうと、cssのhtml依存度が高くなり、総合的な効率は、よいとは言えません。ただし、クラス名を付与するだけでデザインを変更できる点だけを見れば、コーディングに明るくないデザイナにとっては扱いやすいと思います。

これはあくまで一般論であって、何をしたいかによって方法論は変わってくると思いますが、cssだけでいうなら、cssフレームワークのようなクラスベースの管理方法よりも、sassやlessなどで管理したほうが断然効率がよいと思います。

ID:h8/cd2 さんの回答

m40って、、、。100ページあって、ページ内に10個あって、そのうちの3個だけm30にしたい場合どうすんの?

ID:d5KPf0 さんの回答

WPのアイテム内には準備してるよ
テーマには使わないなぁ

ID:i0UM4y さんの回答

複数人で管理しているのでうちはcommonにあたるCSSファイルに
mT5 {margin-top:5px}
mT10{margin-top:10px;}
(中略。値を5ずつ増やしてる)
mT60{margin-top:60px;}

と言った感じで、
margin-top(mT数字), margin-bottom(mB数字), padding-top(pT数字), padding-bottom(pB数字)
あたりはよく使う値のクラスを用意してるかな。

んでHTMLソースのちょっと微調整したいところにクラスをあてる感じ。
基本はちゃんとクラスでマージンやパディング設計してるけど、複数人でやってると意外とこの方法が便利です。

ID:x/m7Rv さんの回答

大規模サイトで複数人で管理、それもはじめにコーディングした人間がその後も管理に携われるかわからないみたいな場合は、
徹底したモジュール化と調整用のmarginとかpaddingのクラス準備しておいて、っていうことはやらないとどうしようもなくなるけど
ソースの綺麗さとかそういうことを考えれば本来はあまりやりたくないし、margin・paddingを全部別クラスでとかは流石に有り得ない。

ID:kAswqC さんの回答

ありがとうございます、トピ主です。

例えばformのボタンを修飾するとき、全く同じデザインのボタンをヘッダーとフッターに置きたいけれどmarginだけは別の値にしたいってなったときに、
m20やp40のように分けて書いておいた方がcssに無駄がなくていいのかと思っていたので質問させて頂きました。

>その書き方でサイトを作っていて、サイドバーのマージン40px?がやっぱり30pxの方がいいなぁ。なんて思った時に全て修正していくのでしょうか?
確かにそうですね。m20やp40のような書き方だとそういったときにはそごく効率が悪いですね。。

やはりあまり変わったことしないで
header p { margin:20px; padding:20px; text-align:right; ... }
footer p { margin:40px; padding:20px; text-arign:right; ... }
のように子孫要素にのみ適用させるように書くのが一番いいですか?

ID:2yXASp

>例えばformのボタンを修飾するとき、全く同じデザインのボタンをヘッダーとフッターに置きたいけれどmarginだけは別の値にしたいってなったとき

私はこういう時、

header p, footer p{margin:20px; …(以下ボタンの装飾)}
footer p{margin:40px;}

こんな風に変えたいmarginだけ後から上書きしてますね。
これならボタンのデザイン自体に変更がかかった時も、変更する部分が一カ所で済む。
後で「やっぱりfooterのmarginはheaderと一緒でいいや」ってなった時も、上書きしているmarginを消せばOK。

ID:fylY2n さんの回答

OOCSSという考え方があってだな?

ID:XpCX0j

ここまでOOCSSが出ないとか

ID:67/zQj さんの回答

皆さんのコメントを参考に、そのうち自然と慣れていくと思いますが…
あとは、他の人も書かれているように、作業体制、状況、サイトの規模とかによって、判断したらよいと思います。
元デザインが、あまり使い回しができないパーツが多い場合だったり、デザインの状態によっても、やり方をちょっと変えてみたりとか。

最終更新日:2013-06-12 (3,995 views)

関連するトピックス

ページ上部に戻る