La combinazione di stili

Question

Ho sempre voluto essere in grado di includere una classe di stile all'interno di un altro. Ad esempio

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

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

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

Ovviamente questo è un esempio di fascia bassa, ma il punto chiave è che tutti quei tag di ancoraggio all'interno #message non dovrebbero avere bisogno di classi espliciti o gli ID. Per ora mi sia duplicare il font-size in ogni classe che ne ha bisogno o aggiungere classi per le cose che altrimenti non lo richiedono. E poiché io voglio controllare facilmente il font-size da un luogo, di solito iniziare ad aggiungere le classi.

Un'altra soluzione è quella di dividere la definizione di "#message un" in questo esempio (sotto). Questo funziona bene per i piccoli progetti, ma per i grandi progetti questo è in realtà la mia soluzione meno favorite. Rende manutenzione del sito molto difficile se si dispone di molte classi divise a pezzi e sparsi file di stile di grandi dimensioni.

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

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

Quindi la mia domanda è di due parti: 1. Questo infastidire altre persone? 2. Qualcuno sa se questa funzione è / è stata presa in considerazione per CSS3?

Modifica Esempio Aggiunta del corpo html e maggiori dettagli ...

Il punto principale è che l'aggiunta di un attributo di classe ai 20 ancore di seguito per impostare le dimensioni del carattere è noioso.

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

Ricordate, un obiettivo importante è quello di avere un posto in cui "med-font" viene dichiarato in modo che sia facile da regolare. Nel mio progetto attuale, ci sono piccole, medie e grandi stili dei caratteri. Io voglio solo una dichiarazione per ogni modo che io non ho per la ricerca in css a dire il cambiamento 12px 11px a.

La soluzione migliore attualmente è quella di aggiungere la classe "-font med" per tutte le ancore nel corpo, e il "piccolo-font" classe per tutte le ancore nel piè di pagina. Ma mi piacerebbe molto meglio fare quello che ho mostrato in origine, e semplicemente includere il carattere desiderato negli stili per "#message a" e "#footer a".

Riepilogo: che voglio CSS di essere più DRY

Answer 1

Questo è esattamente ciò che il Compass quadro è bravo a. Sass consente variabili, il che rende la codifica / mantenimento di fogli di stile molto semplice e una piacevole esperienza.

Answer 2

No, non mi infastidiscono, perché si può usare più classi per un elemento ed entrambi abbinare:

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

Personalmente, trovo questa una soluzione molto più versatile al problema. Per esempio, in jQuery (o in un altro quadro), è possibile aggiungere e rimuovere queste classi - più comunemente, si aggiungerà una classe "selezionato" o qualcosa che potrebbe fare qualcosa di simile punto culminante di una cella di una tabella, e quando un utente fa clic per attivare il tutto, è sufficiente rimuovere la classe "selezionato". Uber-elegante IMO.

In risposta alle vostre modifiche, tutto quello che avrebbe dovuto fare per rimuovere il CSS da tutti i link A sarebbe quello di fare qualcosa di simile:

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

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

Dove significa il simbolo> "è un figlio di"

o, più in generale (ma questo sarebbe anche corrispondere un A direttamente all'interno #message e qualcosa di più profondo - lo spazio significa "è qualsiasi discendente di")

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

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

Answer 3

Date un'occhiata al SASS, che potrebbe fare quello che vuoi. Permette di strutture CSS annidate, che possono poi essere convertiti in CSS. Credo.

Answer 4

A mio parere, il fatto che non si può fare questo è perfettamente bene perché il vostro CSS dovrebbe rimanere il più schietta possibile. Su della più grande vantaggio di CSS, come menzione in riferimento XSLT di Micheal Kay (yeah xstl ... lo so), è che i CSS è molto semplice e incredibilmente facile da capire.

Non devo guardare più posti di conoscere gli effetti di stile di mettere una classe su un tag (e forse, ma ancora).

Quindi, per me sarebbe un no per il numero 1. E per quanto riguarda 2, è stato discusso e non credo che sarà parte dello standard.

Answer 5

css non è un linguaggio di programmazione, non è mai stato concepito per essere e (in questa fase) non lo sarà mai. cosa si sta parlando è stato discusso un sacco di volte prima di W3C e WHATWG

oh e per rispondere a 1) la cosa non mi infastidisce

Answer 6

1. No, Esso non mi infastidiscono, IE6 mi infastidisce:)

2. Sarebbe una funzione utile per avere, soprattutto in un quadro CSS, tuttavia, non siamo forse incoraggiati a grumo tutto il nostro CSS in un unico file ora "ottimizzazione". I havent sentito alcun voci su una tale funzione in CSS3, ma c'è ancora un modo per andare avanti che spec ancora, quindi chi lo sa, potrebbe fare in se si fanno abbastanza rumore ora!