combinando estilos

Question

Há muito tempo queria ser capaz de incluir uma classe de estilo dentro de outro. Por exemplo

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

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

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

Obviamente este é um exemplo despojado, mas o ponto chave é que todas essas marcas de âncora dentro #message não deve precisar de aulas explícitas ou ids. Por agora eu quer duplicar o font-size em cada classe que precisa ou adicionar classes de coisas que de outra forma não necessitam dele. E desde que eu quero controlar facilmente o tamanho da fonte de um lugar, eu costumo começar a adicionar classes.

Outra solução é dividir a definição de "#message uma" neste exemplo (abaixo). Isso funciona bem para pequenos projetos, mas para projetos maiores este é realmente a minha solução menos favorecidos. Faz a manutenção do site muito difícil se você tem muitas classes separaram e espalhados arquivos de estilo grandes.

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

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

Então, minha pergunta é duas partes: 1. Será que este incomodam outras pessoas? 2. Alguém sabe se esse recurso está / estava sendo considerado para CSS3?

Editar: Adicionando exemplo de corpo html e mais detalhes ...

O ponto principal é que a adição de um atributo de classe aos 20 âncoras abaixo para configurar o tamanho da fonte é 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>

Lembre-se, uma meta importante é ter um lugar onde "med-font" é declarado de modo que é fácil de ajustar. No meu projeto atual, existem pequenos, médios e grandes estilos de fonte. Eu só quero uma declaração para cada um de modo que eu não tem que procurar através do css dizer mudança 12px para 11px.

A melhor solução atualmente é adicionar a classe "-font med" para todas as âncoras no corpo, ea classe "pequeno-font" a todos os âncoras no rodapé. Mas eu prefiro fazer o que eu mostrei originalmente, e simplesmente incluir a fonte desejada nos estilos para "#message a" e "#footer a".

Resumo: Quero CSS a ser mais DRY

Answer 1

Este é exatamente o que o Compass quadro é bom. Sass permite que as variáveis, o que torna a codificação / manutenção de folhas de estilo muito fácil e uma experiência agradável.

Answer 2

Não, ele não me irritar, porque você pode usar várias classes para um elemento e ambos jogo:

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

Pessoalmente, acho isso uma muito mais versátil solução para o problema. Por exemplo, em jQuery (ou num outro contexto), você pode adicionar e remover essas classes - mais comumente, você vai adicionar um "selecionados" classe ou algo que pode fazer algo como destaque uma célula da tabela, e quando alguém clica para desativá-lo, basta remover a classe "selecionado". Uber-elegante IMO.

Em resposta a suas edições, tudo que você teria que fazer para remover o CSS a partir de todos os seus links A seria fazer algo como isto:

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

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

Onde os> meios símbolo "é um filho de"

ou, mais geralmente (mas isso também corresponder a uma Um #message diretamente dentro e qualquer coisa mais profunda - os meios espaciais "é qualquer descendente de")

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

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

Answer 3

Tenha um olhar para SASS, o que pode fazer o que quiser. Ela permite a estruturas CSS aninhados, que podem então ser convertidos em CSS. Eu acho.

Answer 4

Na minha opinião, o fato de que você não pode fazer isso é perfeitamente OK porque o seu CSS deve permanecer como straightfoward possível. No da maior vantagem de CSS, como menção em referência XSLT de Micheal Kay (yeah xstl ... eu sei), é que CSS é muito simples e muito fácil de entender.

Eu não tenho de olhar para vários lugares para conhecer os efeitos de estilo de colocar uma classe em uma tag (bem, talvez, mas ainda).

Então, para mim seria um não para o número 1. E, como para 2, foi discutido e eu não acho que vai ser parte do padrão.

Answer 5

css não é uma linguagem de programação, ele nunca foi concebido para ser e (nesta fase) nunca será. o que você está falando tem sido discutido muitas vezes antes no W3C e WHATWG

oh e para responder 1) ele não me irritar

Answer 6

1. Não, ele não irrita-me, IE6 me irrita:)

2. Seria um recurso útil para ter, especialmente em um quadro css, no entanto, não estamos sendo encorajados a agrupar todo o nosso css em um arquivo agora para "otimização". Eu ainda não ouvi qualquer rumor sobre essa característica um em CSS3, mas ainda há um caminho a percorrer no que especificação ainda, então quem sabe, poderia fazê-lo em se fazer o suficiente barulho agora!