1

「丸め」、「隠し」、「赤」、「浮き」など、CSS で多くの基本的なクラスを作成し、目的の結果を得るために、それらをレゴのピースであるかのように使用します。なんで？私のサイトは動的にレンダリングされるため、複数のオプションがある場合があります。可能な組み合わせごとに 1 つのクラスを作成したくなかったので、複数のクラスを作成し、各 div を 5 つまたは 6 つの異なるクラスに割り当てることにしました。一方、DIVITIS問題についても耳にしました。私が使用するすべての div が必要であることはわかっています。しかし、私の質問は次のとおり

です。これらのことのいずれかが問題ですか? つまり、さまざまなデバイスでレンダリングするため、またはレンダリング時間など...

使用例:

<div class="block spgreen toprounded">
<div class="boxnm left nmquart blue mkPln btn topLrounded"><h1 class="pdg txtCenter">Inicio</h1></div>
<div class="boxnm left nmquart green mkPln btn active"><h1 class="pdg txtCenter">Navegar</h1></div>
<div class="boxnm left nmquart orange mkPln btn"><h1 class="pdg txtCenter">Aprender</h1></div>
<div class="boxnm left nmquart red mkPln btn topRrounded"><h1 class="pdg txtCenter">Compartir</h1></div>
</div>


編集:
各 css クラスには 5 つ以下の属性があります。


編集 2:
「ブロック」と「ボックス」に基づいて設計しました。ブロックにはオーバーフロー自動があり、ボックスは常に浮かんでいます。4 つの異なるサイズ (幅) を持つことができます: 25%、50%、75%、100%。次に、「魔法のプロパティ」のリストを作成しました。影、丸みなど... すべてのものを制御するために. Androidフォンでレンダリングするか、または...

一部の CSS は次のようになります。

div.block{ /* Block lines (will contain floated boxes) */
 position:relative;
 overflow:auto;
}
div.box{
 position:relative;
 margin:.5%; /* +1% (both-sides) */
}
 div.box.nm{
 margin:0;
}

/* Position */
.center{
 margin:.5% auto !important;
}
.left{
 float:left;
}
.right{
 float:right;
 text-align:right;
}
4

2 に答える 2

3

それはDivitisそのものではないと思います。divitisの古典的な（まあ、もっと少ない...）定義は、必要のない場所でラッパーを使用することです。誰かがあまりにも多くの汎用コンテナを使用し、クラスでセマンティクスを定義する場合、それは実際にはclassitisと呼ばれます。）。

しかし、ここで別の問題に注意したいと思います。この規則では、実際にCSSジョブ（スタイリング）をHTMLに戻しました。たとえば、一部のブロックの色を変更する必要がある場合は、CSSファイルに触れずにHTML自体を編集します（「赤」クラスを「オレンジ」クラスに交換します）。控えめに言っても、CSSとHTMLがどのように連携するのかということではないと思います。）。

代わりに、私たちの環境では論理ブロックを使用しますが、それらは単なる論理ブロックです。そして、これは私たちだけではありません。TwitterBootstrapフレームワークの規則を詳しく調べると、同じアプローチが見られると思います。HTMLの論理ブロック、CSSのスタイル設定、そしてもちろん、非常に控えめに使用されている汎用ブロック。私の場合の1つのわかりやすい例は、Bootstrapのアイコンのスタイルです。<i>より一般的なの代わりに要素が使用されている場合spansです。

于 2012-08-17T13:48:15.427 に答える
3

個人的には、css クラスの名前は、見た目ではなく、実際の名前にすることを好みます。たとえば、次のようになります。

<div class="menu">...
<label class="caption">...

次に、赤を設定するクラス定義を作成し、すべてのクラスをそれに設定します。

例 .menu, .menu .caption{color:red};

などなど

そうすれば、まったく異なるスタイルを定義でき、css の命名はそのままです。redなどと呼ばれるクラスがある場合rounded、そのスタイリングに固執するか、名前が無意味になります。

もちろん、これはあなたの「動的レンダリング」とは関係ないかもしれませんが、それが何を意味するのかは述べていません。

于 2012-08-17T13:44:44.170 に答える