La combinación de estilos

Question

Siempre he querido ser capaz de incluir un estilo de clase dentro de otra.Por ejemplo

med-font {
  font-size:12px;
}

#message a {
  style: med-font;
  color: blue;
  ...
}

/* lots of other styles, some of which use med-font */

Obviamente este es un despojado ejemplo, pero el punto clave es que todas las etiquetas de anclaje dentro de #mensaje no necesita explícita de clases o ids.Por ahora me duplican el tamaño de fuente en cada clase que necesita o añadir clases a las cosas que no haría de otra manera requieren.Y ya que quiero controlar fácilmente el tamaño de fuente de un lugar, yo suelo empezar a añadir las clases.

Otra solución es dividir la definición de "#mensaje" en este ejemplo (abajo).Esto funciona bien para proyectos pequeños, pero para proyectos más grandes, esto es en realidad mi menos favorecidos de la solución.Esto hace que el mantenimiento del sitio es muy difícil, si usted tiene muchas clases separadas y dispersas alrededor de los grandes archivos de estilo.

med-font, #message a {
  font-size:12px;
}

#message a {
  color: blue;
  ...
}

Así que mi pregunta es de dos partes:1.¿Esta molestar a otras personas?2.¿Alguien sabe si esta característica está/estaba siendo considerado para CSS3?

Editar: La adición de ejemplo de html en el cuerpo y más detalles...

El punto principal es que la adición de un atributo de clase a las 20 anclajes de abajo para ajustar el tamaño de letra es tedioso.

<div id="username" class="med-font">schickb</div>
<div id="message">
  <div id="part1">
    <a href="whatever">text</a>
    <!--lots more tags and say 6 anchors -->
  </div>
  <div id="part2">
    <a href="foo">text</a>
    <!--lots more tags and say 8 anchors -->
  </div>
</div>
<div id="footer"> <!-- footer anchors should be a smaller font-size -->
    <a href="boo">lala</a> 
    <p class="med-font">Company Name</p>
    <!-- other tags and 3 more anchors -->
</div>

Recuerde, un objetivo importante es tener un lugar donde "med-fuente" se declara de modo que es fácil de ajustar.En mi proyecto actual, hay pequeñas, medianas y grandes estilos de fuente.Sólo quiero una declaración para cada uno, de modo que no tengo que buscar a través de la css a decir de cambio de 12 px a 11px.

La mejor solución es agregar el "med-fuente" de la clase a todos los anclajes en el cuerpo, y la "pequeña fuente" de la clase a todos los anclajes en el pie de página.Pero prefiero hacer lo que me mostraron en un principio y simplemente incluir la fuente deseada en los estilos de "#mensaje" y "#footer una".

Resumen: Quiero CSS para ser más SECO

Answer 1

Esto es exactamente lo que el href="http://compass-style.org/" rel="nofollow noreferrer"> Brújula marco es bueno. Sass permite que las variables, lo que hace que la codificación / mantenimiento de hojas de estilo muy fácil y una experiencia agradable.

Answer 2

No, no me molesta, porque se puede utilizar varias clases de un elemento y ambos se parezcan a:

.idiot {
   color:pink;
   text-decoration:underline;
}

.annoying {
   font-weight:bold;
}

/* and if you want to get REALLY specific... */
.annoying.idiot {
   background-image('ann.jpg');
}
...

<div class="annoying idiot">
   Ann Coulter
</div>

En lo personal, creo que este una solución mucho más versátil para el problema. Por ejemplo, en jQuery (o en otro contexto), puede añadir y eliminar estas clases - más comúnmente, se le agrega una clase "seleccionado" o algo que podría hacer algo como lo más destacado de una celda de la tabla, y cuando alguien hace clic a desactivarla, que acaba de quitar la clase "seleccionado". Uber-elegante de la OMI.

En respuesta a las modificaciones, todo lo que tendría que hacer para eliminar el CSS de todos los vínculos de A sería la de hacer algo como esto:

#message > div > a {
   font-size:12px;
}

#footer > a {
    font-size:10px;
}

Donde significa el símbolo> "es un hijo de"

o, más generalmente (pero esto también coincidir con un A directamente dentro de #message y algo más profundo - significa el espacio "es cualquier descendiente de")

#message a {
   font-size:12px;
}

#footer a {
    font-size:10px;
}

Answer 3

Tener un vistazo a SASS, lo que podría hacer lo que quiera. Permite estructuras CSS anidados, que luego se pueden convertir en CSS. Creo.

Answer 4

En mi opinión, el hecho de que no se puede hacer esto es perfectamente bien porque su CSS debe permanecer como straightfoward como sea posible. En la mayor ventaja de CSS, como se menciona en referencia XSLT de Michael Kay (sí XSTL ... lo sé), es que el CSS es muy simple y muy fácil de entender.

No tengo que buscar en múltiples lugares para conocer los efectos de estilo de poner una clase en una etiqueta (bueno, tal vez, pero todavía).

Así que para mí sería un no por el número 1. Y en cuanto a 2, se ha discutido y no creo que vaya a ser parte de la norma.

Answer 5

css no es un lenguaje de programación, que no estaba destinado a ser y (en esta etapa) nunca será.de qué estás hablando, ha sido discutido un montón de veces antes en el W3C y WHATWG

ah, y a la respuesta 1) no me molestan

Answer 6

1. No, Eso no me molesta, me molesta IE6:)

2. Sería una característica útil tener, sobre todo en un marco CSS, sin embargo, no estamos siendo alentados a agrupar todo nuestro CSS en un archivo ahora para "optimización". No he oído ningún rumor acerca de esta característica en CSS3, pero todavía hay un camino a seguir en esa especificación todavía, por lo que sabe, podría hacerlo en si hace suficiente ruido ahora!