web-dev-qa-db-ja.com

共通のcssクラスを別のcssクラスに含めることはできますか？

私はCSS初心者です。私はただ、1つの共通クラスを別のクラスに含めることは可能ですか？

例えば、

.center {align: center};
.content { include .center here};

私はcssフレームワークに出会いました- ブループリント 。位置情報をHTMLに入れる必要があります。

<div class="span-4"><div class="span-24 last">

そのため、CSSではなくHTML内に配置属性を配置します。レイアウトを変更する場合、cssではなくhtmlを変更する必要があります。

それが私がこの質問をする理由です。 .span-4を自分のcssに含めることができれば、htmlタグで指定する必要はありません。

cssreusability
42
janetsmith

奇妙なことに、CSSは継承について話しますが、クラスはこの方法で「継承」できません。本当にできることはこれです：

.center, .content { align: center; }
.content { /* ... */ }

また、このような「裸の」クラスセレクターを使用しないことを強くお勧めします。可能な場合、クラスに加えてIDまたはタグを使用します。

div.center, div.content { align: center; }
div.content { /* ... */ }

私がこれを言うのは、セレクタを可能な限り幅広く行うと、大きなスタイルシートを取得すると、（私の経験では）管理不能になるからです。元のクラスを変更すると、不要なすべての種類に影響するため、新しいクラス（.center2など）を作成するポイントまで相互に対話する意図しないセレクターになります。

34
cletus

ここで、カスケードスタイルシートのカスケードが再生されます。

Html要素またはウィジェット/モジュール（ネストされたhtml要素のグループ）をオブジェクトと考えてください。同じプロパティを共有するオブジェクトがあることを知っているので、それらが利用できる再利用可能なクラスを作成する必要があります。

.baseModule {align: center;}

モジュールがメッセージ（エラー、フラッシュ...）であるとします。したがって、すべてのメッセージが中央揃えになるため、.baseModuleクラスを「拡張」または「インクルード」します（最後のhtmlの例を参照）。

.message {border: 1px solid #555;}

さらに、エラーメッセージの背景を赤にする必要があります。さらに、ここで.baseModule.messageのborderプロパティを別の色などにしたい場合は上書きできます。

.error {background-color: red;}

これで、簡単に再利用できるいくつかのcss定義ができました。

<!-- Regular message module -->
<p class="baseModule message">
    I am a regular message.
</p>

<!-- Error message module -->
<p class="baseModule message error">
    I am an error message. My background color is red.
</p>

これを質問に関連付けるには、基本的に複数のクラス名を活用して再利用性を最大限にします。確かにie6はチェーンセレクター（class1.class2.class3）をサポートしていませんが、それでもなお巧妙なトリックです！

14
Derek Reynolds

標準のCSSでは、これを行うことはできませんが、それは素晴らしいことです。

そのような何かのために、CSSに「コンパイル」するSASSなどを使用する必要があります。

11
Deeksy