2

質問する前に、私が参照しているコードは次のとおりです。

ボックス オブジェクト

Bootstrap で Island や Islet などのコンテンツをボックス化するために使用されます。

.box { margin-bottom: 24px; padding: 12px; }    
.box--s { padding: 8px 12px; }  
.box--l { padding: 24px 12px; }

ラウンドスキン

角を丸くします。ボックスなどのいくつかの抽象化クラスで使用されます。

.round { border-radius: 4px; }  
.round--s { border-radius:2px; }    
.round--l { border-radius:8px; }

抽象化をスキン化するコードでは、次のように記述します。

<div class="round box">  Example </div>

グレー、アラート、ラベルなど、ボックスを拡張する他のスキンがあります。

それでは質問です

私はボタンオブジェクトに取り組んでいます。しかし、ボックスと同じルールと修飾子があり、ラウンドの同じ修飾子を持つことができるので、スキンとして宣言するだけでよいでしょうか? すべてのボタンは、「外観」について約 4 つのルールを追加するだけです。余白やパディングを台無しにする場合は、オブジェクトにする必要があります。

あなたが書くコードで

<a class="round btn box">  Example </a>

または、サイズを小さくする

<a class="round btn box box--s">  Example </a>

それをドライに保つのはやり過ぎですか？私が心配しているのは、ボタンがページ上で非常に一般的な要素であることですが、実際には、オブジェクトと既に記述した修飾子を拡張しているだけです。

4

1 に答える 1

1

これはすべて、グローバル修飾子 (.round、.box など) を使用する必要があるかどうかという問題に要約されます。私に関して言えば、それらには関連するセマンティクスがほとんどないため、常に個々のオブジェクトに統合することを好みます。「.hidden」、「.round」、「.green」などのグローバルなものは、スタンドアロン エンティティとして再利用できるとは想定されていません。

したがって、意味的に「ボックス」と同じではない「ボタン」オブジェクトを使用したいと思います。そのボタンのすべての変更は、一部のグローバル クラスではなく、そのボタンの不可欠な部分になります。物事を丸くする必要がある場合は、特定のオブジェクトに修飾子を使用してください。値を統一するために、セマンティック (つまり、クラス名ベース) レベルで公開する必要のない CSS プリプロセッサを常に持っています。

ちなみに、これは完全に私の個人的な意見です。

于 2013-07-23T11:57:36.673 に答える