Gewusst wie: Verwenden von CSS-Klassen und IDs

Ordnungsgemäße Verwendung von CSS-IDs und Klassen kann sparen Sie Zeit bei der Erhaltung Ihrer Stylesheets, sparen Sie Benutzer-Zeit, wann sie Ihre schlankere Webseiten herunterladen, und helfen Ihnen effizient Stile zu schreiben.

Anweisungen

Zuweisen von Namen

1 Es gibt ein paar IDs, die sehr häufig auf Webseiten, für Beispiel, Container (oder Wrapper), Header verwendet werden, Inhalte, Seitenleiste, Fußzeile. Dies sind gute Beispiele für CSS-IDs, weil die verwendeten Namen selbsterklärend sind. Sie beschreiben den Zweck des Div oder Element, das sie sich identifizieren.

2 IDs und Klassen sollte selbsterklärende Namen gegeben werden. Der Trick ist, einen Namen zu wählen, der im Laufe der Zeit selbsterklärend sein wird.

Angenommen Sie, Sie haben ein Seitenelement, die Angebote des Tages erklärt. Sie beschließen, es rot. Sie konnten entweder nennen es "besondere" oder könnte Sie nennen Sie es "rot".

Der Name "Spezial" wäre die bessere Wahl. Im Laufe der Zeit Ihr Farbschema ändern könnte und wäre ein Name wie "rot" verwirrend, aber ein Namen wie "Spezial" wäre noch können Sie den Zweck der Klasse oder ID erkennen

3 Stellen Sie sicher, dass die Namen, die Sie auswählen noch etwas bedeuten werden, wenn Sie benötigen, um ein Stylesheet zu überarbeiten, die Sie nicht, für sechs Monate oder ein Jahr berührt. Diejenigen werden gute Entscheidungen.

Verwendung von Class- oder ID

4 Eine ID kann nur verwendet werden, wenn pro Seite, es können nur z.B. ein Div auf einer Seite mit dem ID-Inhalt. Aber eine Klasse kann oft auf einer Seite verwendet werden. Beispielsweise müssen Sie mehrere Bilder auf einer Seite, mit denen eine Klasse namens "Leftfloat" oder vielleicht "Rightfloat".

5 Basierend auf den Informationen in Schritt 1, könnte man meinen, dass Sie eine Menge von Klassen und nur ein paar IDs verwenden sollten. Eigentlich ist das Gegenteil der Fall. Sie möchten für schlankere Markup Klassen so sparsam wie möglich verwenden. Verwenden eine große Anzahl von Klassen selbst hat einen Namen, wie es, eine Krankheit oder so etwas war. Es heißt Classitis.

6 Klassen sind manchmal notwendig. Aber manchmal geben einem Element eine ID und dann mit einem untergeordneten Selektor an die untergeordneten Elemente dieses Elements erstellt Ziel würde viel weniger Code als jedes untergeordnete Element eine Klasse zuweisen.

7 Z. B. genommen Sie an, Sie haben bestimmte Hyperlinks in einer Liste. Sie können die Links Stil, indem Sie jedes einzelne Glied in der Liste eine Klasse zuweisen. Oder Sie können die Liste Container (UL oder OL-Element) eine ID zuweisen und Schreiben in der Regel mit einem untergeordneten Selektor. Angenommen Sie, Sie geben einer UL ID wie "Subnav." Hier ist eine nachfolgende Auswahl, die Stil, würde das einen Link ohne das Markup eine Klasse hinzuzufügen.

Subnav Ul a: link {Regel hier} 8 Tritt etwas wieder auf einer Seite an Orten wo ein untergeordneten Selektor wird nicht funktionieren, ist eine Klasse perfekt in Ordnung. Ich habe bereits erwähnt, das Beispiel für die Verwendung einer Klasse ein Bild nach links oder rechts an einer beliebigen Stelle auf einer Seite zu schweben.

Angenommen Sie, Sie haben mehrere Absätze für jedes Element, das Sie aus Ihrem Katalog zu beschreiben, aber Sie wollen einem der Absätze irgendwie anders zu sein. Wenn es dem Einleitungsabsatz war könnte Sie es eine Klasse namens "Intro." zuweisen Wenn sie einen Absatz geben Benutzermeinungen war, konnte Sie es eine Klasse namens "Testimonial." zuweisen Dann erstellen Sie eine Formatvorlage für die Klasse .intro oder die Klasse .testimonial, die diesen bestimmten Absätzen unterscheiden würde könnte.

Tipps & Warnungen

• Klassen- und ID-Namen können entweder alles in Kleinbuchstaben (z. B. #subnav) oder in Höckerschreibweise (z.B. #subNav) geschrieben werden. Wenn Sie Höckerschreibweise verwenden möchten, achten Sie es korrekt in das HTML-Markup eingeben, oder ein Browser erkennt nicht die CSS-Regel.
• Es dürfen keine Leerzeichen in eine Klasse oder eine ID-Namen. Es ist in Ordnung, einen Unterstrich anstelle ein Leerzeichen zu verwenden.