10

css で共通のマージン クラスとパディング クラスに共通の css クラスを宣言したので、他の css 宣言をあまり具体的にしなくても使用できます。

例えば ​​：

.padTB5{padding:5px 0;} 
.pad10{padding:10px;}
.mTop10{margin:10px 0 0;} 
.mTop5{margin:5px 0 0;}
  1. この方法は合っていますか？？
  2. そうでない場合、なぜですか？
  3. はいの場合、マージンとパディングのどちらが優れていますか? （ブラウザの余白の問題は知っています）

ガイドしてください...事前に感謝します:)

4

4 に答える 4

9

  1. クラスはセマンティックである必要があるため、これは悪い習慣です。つまり、スタイリングするもののタイプを記述する必要があります。たとえば、「blog-header」、「primary-this」、「secondary-that」などです。

  2. 実際には、説明するクラスを使用することの欠点は、視覚的なデザインが変更され、異なるサイズの余白またはパディングが必要な場合、クラス名も変更する必要があることです。つまり、CSSとHTMLの両方が変更されます。または、CSSを変更しただけでは、クラス名はその目的を説明しなくなります。このアプローチは、インラインスタイルを使用するよりもはるかに優れています。

  3. マージンとパディングは異なるものであり、異なる方法で動作します。マージンは特定の状況で崩壊する可能性がありますが、パディングは崩壊しません。パディングには背景画像や色が含まれますが、マージンには含まれません。パディングとマージンの間に境界線が表示されます。

于 2011-02-22T09:53:19.370 に答える
4

あなたはそれをすべきではありません。クラスにleftorのような名前margintop20を付けることはお勧めできません。コンテンツを説明するcontentや などのクラスを使用する必要があります。sidebarBox

margin-top を 10px から 1em に変更したいとしましょう。あなたの方法を使用して

  • mTop10 には margin-top: 10px; があります。
  • または、className を mTop1em に変更する必要があります

これはどれも良いことではありません。

これについては、 w3.org の goodclassnamesを参照してください。

マージン、パディングのボックス モデルについては、w3.orgも参照してください。

于 2011-02-22T09:54:55.437 に答える
2

私の意見では、あなたが正しくやらない限り、これは最適ではありません。

マークアップには、次のようなものがあります。

<div class="pad10 mTop10">

そしてあなたはあなたのサイト全体にそれを持っています。

CSSを変更して、マージン/パディングを少し追加したい場合はどうなりますか？

.pad10 { padding: 12px }
.mTop10 { margin: 12px 0 0 }

おー。これらのクラス名は、もはやそれほど意味のあるものではありません。間違った名前のセレクターに我慢するか、すべてのファイルで[検索と置換]を実行する必要があります。

.pad10一部の要素に赤いテキストが必要であると判断した場合はどうなりますか？

.pad10 { padding: 12px; color: red }

現在、クラス名はさらに意味がありません。

HTMLの各要素に関連する（意味的に意味のある）クラス/ IDも適用する場合は、このタイプのことを実行しても問題ない可能性があります。

<div class="contactErrorMessage pad10 mTop10">

そうすれば、少なくとも次のことができるからです。

div.contactErrorMessage { color: red }
于 2011-02-22T09:54:33.903 に答える
2

マージンはパディングとは異なります。マージンはボックスの外側のスペース、パディングはボックスの内側のスペースです。margin と padding はクロスブラウザ互換です。マージンまたはパディング用のクラスを作成することは推奨されませんが、宣言は正しいです。これの良い使い方の 1 つは、角丸または影のクラスを作成することです。角丸クラスを指定することで、角丸をすばやく適用できます。

于 2011-02-22T09:46:26.040 に答える