Die Kombination von Stilen

Question

Ich habe lange in der Lage sein schließen einen Stil Klasse innerhalb einer anderen wollten. Zum Beispiel

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

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

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

Natürlich ist dies ein abgespeckte Beispiel, aber der entscheidende Punkt ist, dass alle diese Anker-Tags innerhalb #message nicht explizit Klassen oder IDs benötigen sollten. Denn nun entweder duplizieren ich die Schriftgröße in jeder Klasse, die sie oder fügen Sie Klassen, um die Dinge benötigt, die es sonst nicht erfordern würde. Und da möchte ich einfach die Schriftgröße steuern, von einem Ort, beginne ich in der Regel Klassen hinzufügen.

Eine andere Lösung ist die Definition von „#message a“ in diesem Beispiel (siehe unten) aufzuteilen. Dies funktioniert für kleine Projekte in Ordnung, aber für größere Projekte ist dies eigentlich meine am wenigsten favorisierte Lösung. Es macht Wartung vor Ort sehr schwierig, wenn man viele Klassen gespalten und verstreut großen Stil-Dateien.

haben

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

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

Also meine Frage zwei Teilen: 1. Enthält diese nerven andere Menschen? 2. Hat jemand wissen, ob diese Funktion ist / war für CSS3 berücksichtigt?

Bearbeiten Hinzufügen Beispiel html Körper und mehr Details ...

Der wichtigste Punkt ist, dass unter den 20 Anker ein Klassenattribut Hinzufügen zu verändern die Schriftgröße langweilig ist.

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

Denken Sie daran, ein wichtiges Ziel ist ein Ort, wo „med-font“ deklariert wird, so dass es leicht zu justieren ist. In meinem aktuellen Projekt gibt es kleine, mittlere und große Schriftstile. Ich möchte nur eine Erklärung für jeden so, dass ich, um durch die CSS nicht suchen ändern 12px 11px zu sagen.

Die beste Lösung ist derzeit die „Med-font“ Klasse für alle Anker im Körper an, und die „kleine Schrift“ Klasse für alle Anker in der Fußzeile. Aber ich würde viel lieber tun, was ich zeigte ursprünglich und einfach schließen Sie die gewünschte Schriftart in den Stilen für „#message a“ und „#footer a“.

Zusammenfassung: Ich möchte CSS mehr sein DRY

Answer 1

Das ist genau das, was der Compass Rahmen ist gut. Sass ermöglicht Variablen, die Codierung macht / Sheets sehr einfach und zu einem angenehmen Erlebnis zu halten.

Answer 2

Nein, es hat mich nicht ärgern, weil Sie mehrere Klassen für ein Element verwenden können, und beide werden entsprechen:

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

Ich persönlich dies eine wesentlich vielseitige Lösung für das Problem finden. Zum Beispiel in jQuery (oder in einem anderen Rahmen), können Sie diese Klassen hinzufügen und entfernen können - am häufigsten, werden fügen Sie eine „ausgewählte“ Klasse oder etwas, das so etwas wie Highlight einer Tabellenzelle tun könnte, und wenn jemand Klicks auf schalten Sie ihn aus, Sie entfernen Sie einfach das „ausgewählte“ -Klasse. Uber-elegante IMO.

Als Antwort auf Ihre Bearbeitungen, alle würden Sie tun müssen, um die CSS aus all Ihren A Links, so etwas zu tun wäre, zu entfernen:

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

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

Wenn das Symbol> bedeutet "ist ein Kind von"

oder allgemeine (aber auch eine A direkt in #message und etwas tiefer passen würde - der Raum bedeutet, „ist jeder Nachkomme“)

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

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

Answer 3

Haben Sie einen Blick auf SASS, was könnte das tun, was Sie wollen. Es ermöglicht verschachtelte CSS Strukturen, die dann in CSS konvertiert werden können. Denke ich.

Answer 4

Meiner Meinung nach ist die Tatsache, dass Sie dies nicht tun können, ist vollkommen in Ordnung, weil Ihre CSS sollte so straightfoward wie möglich bleiben. Auf dem größten Vorteils von CSS, wie erwähnt in Micheal Kays XSLT-Referenz (ja xstl ... ich weiß), ist, dass CSS ist sehr einfach und unglaublich leicht zu verstehen.

Ich habe die Styling-Effekte der Umsetzung eine Klasse auf einem Tag (gut vielleicht, aber immer noch) nicht sehe an mehreren Stellen kennen.

für mich So ist es ein Nein für Nummer 1 sein würde Und wie für 2 wird diskutiert, und ich glaube nicht, dass es einen Teil des Standard sein.

Answer 5

CSS ist keine Programmiersprache, wurde es nie zu sein, und (zu diesem Zeitpunkt) gemeint wird es nie sein. was du redest hat viele Male, bevor sie in W3C und WHATWG diskutiert worden

ach ja, und zu beantworten 1) es mich nicht stören

Answer 6

1. Nein, Es spielt keine ärgern mich, IE6 ärgert mich:)

2. Es wäre eine nützliche Funktion jedoch zu haben, vor allem in einem CSS-Framework, sind wir nicht dazu ermutigt werden alle CSS in eine Datei für „Optimierung“ jetzt einen Topf zu werfen. Ich habe nicht irgendwelche Gerüchte über eine solche Funktion in css3 gehört, aber es gibt noch eine Möglichkeit, noch an diesem spec zu gehen, also wer weiß, es machen könnte, wenn du jetzt genug Lärm machen!