selectores - ¿Podemos incluir una clase de CSS común en otra clase de CSS?

selectores css

Question

Soy un novato de CSS. Me pregunto si es posible incluir una clase común en otra clase.

por ejemplo,

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

Encontré css framework - Blueprint . Necesitamos poner la información de posición en HTML, por ejemplo

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

Como tal, colocaremos el atributo de posicionamiento dentro de html, en lugar de css. Si cambiamos el diseño, necesitamos cambiar html, en lugar de css.

Esa es la razón por la que hago esta pregunta. Si puedo incluir .span-4 en mi propio CSS, no tendré que especificarlo en mi etiqueta html.

Answer 1

Aquí es donde entra en juego la Cascading in Cascading Style Sheets.

Piense en su elemento html o widget / módulo (grupo de elementos html anidados) como un objeto. Sabes que vas a tener objetos que comparten las mismas propiedades, por lo que querrás crear una clase reutilizable que puedan utilizar.

.baseModule {align: center;}

Digamos que su módulo es un mensaje (error, flash ...). Así que "extiendes" o "incluyes" tu clase .baseModule porque todos los mensajes estarán alineados en el centro (mira el ejemplo final de html).

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

Además, desea que sus mensajes de error tengan un fondo rojo. Además, puede sobrescribir la propiedad de borde de .baseModule.message aquí si desea que sea de un color diferente o algo así.

.error {background-color: red;}

Entonces ahora tiene algunas definiciones CSS que se pueden reutilizar con facilidad.

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

Para relacionar esto con su pregunta, básicamente aprovecharía múltiples nombres de clase para una reutilización máxima. Concedido ie6 no admite selectores encadenados (class1.class2.class3), ¡pero sigue siendo un truco genial!

Answer 2

Curiosamente, aunque CSS habla de herencia, las clases no pueden "heredar" de esta manera. Lo mejor que puedes hacer es esto:

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

También te sugiero que no hagas selectores de clase "desnudos" como este. Uso e identificación o etiqueta y clase donde sea posible:

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

Digo esto porque si haces tus selectores lo más amplios posible, terminará siendo inmanejable (en mi experiencia) una vez que obtengas hojas de estilo grandes. Usted termina con selectores involuntarios que interactúan entre sí hasta el punto donde crea una nueva clase (como .center2) porque cambiar el original afectará todo tipo de cosas que no desea.

Answer 3

En CSS estándar, no es posible hacer esto, aunque sería bueno.

Para algo como eso necesitarías usar SASS o similar, que "compila" a CSS.