Schnelltipp Sparen Sie Zeit, indem Sie mehrere Klassen verwenden

Einer der anstrengendsten Aspekte der Webentwicklung ist das Ausschreiben endloser Mengen an CSS-Elementen für verschiedene Elemente - die sich im Stil nur geringfügig unterscheiden. Es hat das Leben (oder den Willen) vieler talentierter Designer genommen. Warum sollten Sie jedem Element einen eigenen eindeutigen CSS-Eintrag geben, wenn Sie Übereinstimmungen mischen und wiederverwendbare CSS-Elemente mit mehreren CSS-Klassen hinzufügen können?

Schritt 1: Richten Sie das CSS ein

Beginnen wir mit dem Identifizieren und Ausschreiben einiger unserer häufigsten CSS-Markups. Wir werden sie als individuelle Stile einrichten. Diejenigen, die wir hier eingerichtet haben, sind die grundlegendsten, aber dieselbe Technik kann auch auf die coolsten CSS 3-Eigenschaften angewendet werden.

 .primaryColor Farbe: Blau;  .articleImage border: 1px fest # 292929; Polsterung: 5px;  .standOut font-size: 22px;  .wichtig font-weight: fett;  .floatRight float: right; 

Schritt 2: Anwenden der Klassen in unserem Dokument

  • Dieser Text wird blau und fett dargestellt

  • Dieses Bild wird nach rechts verschoben und hat einige Füllungen und einen Rand.

  • Dieser Text wird riesig sein

  • Dieser Text wird blau, 22px groß und fett dargestellt.

Warum es nützlich ist

Dies kann eine große Hilfe sein, insbesondere beim Entwerfen von Layouts. Sie können eine Klasse verwenden, um die Größe und Breite zu definieren, und eine andere Klasse, um die Positionierung zu definieren. Hoffe das hat geholfen!

Anmerkung des Herausgebers: Beachten Sie, dass diese "multiple classes" -Methode in einigen älteren Browsern - das heißt älter als IE 6 - fehlschlägt. Was denken Sie über diesen Ansatz? P.S. Hast du einen Killer-Schnelltipp? Mailen Sie uns und wir reden.