web-dev-qa-db-fra.com

Pouvons-nous inclure une classe css commune dans une autre classe css?

Je suis un débutant CSS. Je me demande simplement, est-il possible d'inclure une classe commune dans une autre classe?

par exemple,

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

Je suis tombé sur le framework css - Blueprint . Nous devons mettre les informations de position en HTML, par exemple.

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

En tant que tel, nous placerons l'attribut de positionnement dans html, au lieu de css. Si nous changeons la mise en page, nous devons changer html, au lieu de css.

C'est la raison pour laquelle je pose cette question. Si je peux inclure .span-4 dans mon propre css, je n'aurai pas à le spécifier dans ma balise html.

cssreusability
42
janetsmith

Bizarrement, même si CSS parle d'héritage, les classes ne peuvent pas "hériter" de cette façon. Le mieux que vous puissiez vraiment faire est le suivant:

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

Aussi, je vous suggère fortement de ne pas faire de sélecteurs de classes "nus" comme celui-ci. Utilisez l'ID ou la balise en plus de la classe si possible:

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

Je dis cela parce que si vous faites vos sélecteurs aussi larges que possible, cela finit par devenir ingérable (selon mon expérience) une fois que vous obtenez de grandes feuilles de style. Vous vous retrouvez avec des sélecteurs involontaires qui interagissent les uns avec les autres au point où vous créez une nouvelle classe (comme .center2) car changer l'original affectera toutes sortes de choses que vous ne voulez pas.

34
cletus

C'est là que Cascading dans les feuilles de style en cascade entre en jeu.

Considérez votre élément html ou widget/module (groupe d'éléments html imbriqués) comme un objet. Vous savez que vous allez avoir des objets qui partagent les mêmes propriétés, vous voudrez donc créer une classe réutilisable qu'ils pourront utiliser.

.baseModule {align: center;}

Disons que votre module est un message (erreur, flash ...). Ainsi, vous "étendez" ou "incluez" votre classe .baseModule car tous les messages seront alignés au centre (voir le dernier exemple html).

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

De plus, vous voulez que vos messages d'erreur soient sur fond rouge. De plus, vous pouvez remplacer la propriété border de .baseModule.message ici si vous vouliez que ce soit une couleur différente ou quelque chose.

.error {background-color: red;}

Alors maintenant, vous avez quelques définitions CSS qui peuvent être réutilisées facilement.

<!-- 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>

Pour relier cela à votre question, vous utiliseriez essentiellement plusieurs noms de classe pour une réutilisabilité maximale. Certes, ie6 ne prend pas en charge les sélecteurs chaînés (class1.class2.class3), mais c'est toujours une astuce intéressante!

14
Derek Reynolds

En CSS standard, ce n'est pas possible, mais ce serait bien.

Pour quelque chose comme ça, vous devez utiliser SASS ou similaire, qui "compile" en CSS.

11
Deeksy