htmlからcssを適用する際に、いまは1つの要素にfont-sizeとmargin等の要素をまとめて書いています。ですが後から変更を加えたいと思ったとき<div class="sidebar m40 p20">のようにmarginとpaddingを別に分けて書いたほうが効率的なんじゃないかと思うようになったのですが、ソースをきれいに書きたいと思ったときこういった書き方はナンセンスでしょうか？
その書き方でサイトを作っていて、サイドバーのマージン40px？がやっぱり30pxの方がいいなぁ。なんて思った時に全て修正していくのでしょうか？そもそもクラスsidebarにmargin, paddingを書いておけばいいのではないかと思った僕の方が変なんですかね？？？
僕はmargin or paddingだけを指定したい(id・classを作るまでもない)時だけ、m20,p40などのクラスを使っています。sidebarというクラスをつけるなら今後の管理の面を考えて、そこにmarginやらpaddingも指定しておいたほうがいいと思います。
余白の管理はデザインする上で大事な事なので、後で修正する余地があるのはデザインが出来てないと言えるし、あまり好きな書き方じゃないな。別に設定があると好きな余白が作れて楽だとは思うけど。
トピ主の効率的というのが分からないのでそのあたりの考えを書いてくれると回答しやすいです。
私は1つのタグに複数のクラスは極力つけないようにしています。例えば例に挙げているclass=sidebarなどは用途やスタイルがほぼ決まっていることがほとんどじゃないでしょうか。それをわざわざ分解してhtmlに記述するのは労力が掛かるだけかなと。また、管理面からもm40やp30といったクラスのついた箇所をすべて把握していないと意図しない箇所まで変えてしまうことがありますよ。
なのでコンテンツ内のpやli、見出しのように汎用的に使うスタイルで個別に余白が必要な場合に調整用クラスとして作るくらいがいいかと思います。
htmlとcssは分離する。htmlとjsも分離する。htmlとphpも分離する。
一般的には、構造は構造、デザインはデザイン、プログラムはプログラムで分けて管理したほうが効率がよいとされますね。そういう意味では、cssフレームワークのように、ほとんどのデザインをcssクラスで管理してしまうと、cssのhtml依存度が高くなり、総合的な効率は、よいとは言えません。ただし、クラス名を付与するだけでデザインを変更できる点だけを見れば、コーディングに明るくないデザイナにとっては扱いやすいと思います。
これはあくまで一般論であって、何をしたいかによって方法論は変わってくると思いますが、cssだけでいうなら、cssフレームワークのようなクラスベースの管理方法よりも、sassやlessなどで管理したほうが断然効率がよいと思います。
m40って、、、。100ページあって、ページ内に10個あって、そのうちの3個だけm30にしたい場合どうすんの？
WPのアイテム内には準備してるよテーマには使わないなぁ
複数人で管理しているのでうちは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ソースのちょっと微調整したいところにクラスをあてる感じ。基本はちゃんとクラスでマージンやパディング設計してるけど、複数人でやってると意外とこの方法が便利です。
大規模サイトで複数人で管理、それもはじめにコーディングした人間がその後も管理に携われるかわからないみたいな場合は、徹底したモジュール化と調整用のmarginとかpaddingのクラス準備しておいて、っていうことはやらないとどうしようもなくなるけどソースの綺麗さとかそういうことを考えれば本来はあまりやりたくないし、margin・paddingを全部別クラスでとかは流石に有り得ない。
ありがとうございます、トピ主です。
例えば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; ... }のように子孫要素にのみ適用させるように書くのが一番いいですか？
>例えばformのボタンを修飾するとき、全く同じデザインのボタンをヘッダーとフッターに置きたいけれどmarginだけは別の値にしたいってなったとき
私はこういう時、
header p, footer p{margin:20px; …（以下ボタンの装飾）}footer p{margin:40px;}
こんな風に変えたいmarginだけ後から上書きしてますね。これならボタンのデザイン自体に変更がかかった時も、変更する部分が一カ所で済む。後で「やっぱりfooterのmarginはheaderと一緒でいいや」ってなった時も、上書きしているmarginを消せばOK。
OOCSSという考え方があってだな？
ここまでOOCSSが出ないとか
皆さんのコメントを参考に、そのうち自然と慣れていくと思いますが…あとは、他の人も書かれているように、作業体制、状況、サイトの規模とかによって、判断したらよいと思います。元デザインが、あまり使い回しができないパーツが多い場合だったり、デザインの状態によっても、やり方をちょっと変えてみたりとか。
この記事のCSSに関する考え方は結構参考になりますよ。
みんなの回答 13 件
その書き方でサイトを作っていて、サイドバーのマージン40px？がやっぱり30pxの方がいいなぁ。なんて思った時に全て修正していくのでしょうか？
そもそもクラスsidebarにmargin, paddingを書いておけばいいのではないかと思った僕の方が変なんですかね？？？
僕はmargin or paddingだけを指定したい(id・classを作るまでもない)時だけ、m20,p40などのクラスを使っています。sidebarというクラスをつけるなら今後の管理の面を考えて、そこにmarginやらpaddingも指定しておいたほうがいいと思います。
余白の管理はデザインする上で大事な事なので、後で修正する余地があるのはデザインが出来てないと言えるし、あまり好きな書き方じゃないな。
別に設定があると好きな余白が作れて楽だとは思うけど。
トピ主の効率的というのが分からないのでそのあたりの
考えを書いてくれると回答しやすいです。
私は1つのタグに複数のクラスは極力つけないようにしています。
例えば例に挙げているclass=sidebarなどは用途やスタイルが
ほぼ決まっていることがほとんどじゃないでしょうか。
それをわざわざ分解してhtmlに記述するのは労力が掛かるだけかなと。
また、管理面からもm40やp30といったクラスのついた箇所を
すべて把握していないと意図しない箇所まで変えてしまうことがありますよ。
なのでコンテンツ内のpやli、見出しのように汎用的に使うスタイルで
個別に余白が必要な場合に調整用クラスとして作るくらいがいいかと思います。
htmlとcssは分離する。
htmlとjsも分離する。
htmlとphpも分離する。
一般的には、構造は構造、デザインはデザイン、プログラムはプログラムで分けて管理したほうが効率がよいとされますね。
そういう意味では、cssフレームワークのように、ほとんどのデザインをcssクラスで管理してしまうと、cssのhtml依存度が高くなり、総合的な効率は、よいとは言えません。ただし、クラス名を付与するだけでデザインを変更できる点だけを見れば、コーディングに明るくないデザイナにとっては扱いやすいと思います。
これはあくまで一般論であって、何をしたいかによって方法論は変わってくると思いますが、cssだけでいうなら、cssフレームワークのようなクラスベースの管理方法よりも、sassやlessなどで管理したほうが断然効率がよいと思います。
m40って、、、。100ページあって、ページ内に10個あって、そのうちの3個だけm30にしたい場合どうすんの？
WPのアイテム内には準備してるよ
テーマには使わないなぁ
複数人で管理しているのでうちは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ソースのちょっと微調整したいところにクラスをあてる感じ。
基本はちゃんとクラスでマージンやパディング設計してるけど、複数人でやってると意外とこの方法が便利です。
大規模サイトで複数人で管理、それもはじめにコーディングした人間がその後も管理に携われるかわからないみたいな場合は、
徹底したモジュール化と調整用のmarginとかpaddingのクラス準備しておいて、っていうことはやらないとどうしようもなくなるけど
ソースの綺麗さとかそういうことを考えれば本来はあまりやりたくないし、margin・paddingを全部別クラスでとかは流石に有り得ない。
ありがとうございます、トピ主です。
例えば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; ... }
のように子孫要素にのみ適用させるように書くのが一番いいですか？
OOCSSという考え方があってだな？
皆さんのコメントを参考に、そのうち自然と慣れていくと思いますが…
あとは、他の人も書かれているように、作業体制、状況、サイトの規模とかによって、判断したらよいと思います。
元デザインが、あまり使い回しができないパーツが多い場合だったり、デザインの状態によっても、やり方をちょっと変えてみたりとか。
この記事のCSSに関する考え方は結構参考になりますよ。
モバイル時代におけるCSSの設計と実装｜1 pixel｜サイバーエージェント公式クリエイターズブログ
http://ameblo.jp/ca-1pixel/entry-11413319214.html関連するトピックス