CSS-Schema-How-To

Ich bin ein großer Fan davon, meine CSS-Klassen nach ihren Inhalten oder Inhaltstypen zu benennen, zum Beispiel ein & lt; ul & gt; Navigations-Tabs enthalten würde Klasse="Tabs". Eine Kopfzeile, die ein Datum enthält, könnte class="date" sein, oder eine geordnete Liste mit einer Top 10-Liste könnte class="chart" haben. Ähnlich könnte man für IDs den Seitenfuß id="footer" oder das Logo der Website id="mainLogo" angeben. Ich finde, dass es nicht nur Klassen leicht zu merken macht, sondern auch eine korrekte Kaskadierung des CSS fördert. Dinge wie ol.chart {font-weight: bold; color: blue;} #footer ol.chart {color: green;} sind gut lesbar und berücksichtigen, wie CSS-Selektoren an Gewicht zunehmen, wenn sie spezifischer sind.

Korrekter Einzug ist auch eine große Hilfe. Ihr CSS wird wahrscheinlich ziemlich stark anwachsen, es sei denn, Sie möchten Ihre HTML-Templates jederzeit umgestalten, wenn Sie Ihrer Site einen neuen Bereich hinzufügen oder einen neuen Inhaltstyp veröffentlichen möchten. Wie auch immer Sie es versuchen, Sie werden zwangsläufig einige neue Regeln (oder Ausnahmen) hinzufügen müssen, die Sie in Ihrem ursprünglichen Schema nicht erwartet haben. Mit Indeting können Sie eine große CSS-Datei viel schneller scannen. Meine persönliche Vorliebe ist es, einen Eindruck davon zu bekommen, wie spezifisch und / oder verschachtelt der Selektor ist, etwa so:

Auf diese Weise ist das "Elternteil" immer am weitesten links und so wird der Text durch Elterncontainer in Blöcke aufgeteilt. Ich teile das Stylesheet auch gerne in ein paar Abschnitte auf. Zuerst kommen alle Selektoren für HTML-Elemente. Ich halte diese so generisch, dass sie eigentlich zuerst kommen sollten. Hier stelle ich "body {font-size: 77%;}" und "a {color: # FFCC00;}" usw. ein. Danach würde ich Selektoren für die Hauptrahmenteile der Seite setzen, zum Beispiel "ul # mainMenu { float: left;} "und" div # footer {height: 4em;} ". Dann weiter zu allgemeinen Objektklassen, "td.price {text-align: right;}", gefolgt von zusätzlichen kleinen Bits wie ".clear {clear: both;}". Nun, genau so mag ich es - ich bin sicher, es gibt bessere Wege, aber es funktioniert für mich.

Abschließend noch ein paar Tipps:

1. Machen Sie Kaskaden bestmöglich nutzbar und "überklassifizieren" Sie nicht. Wenn Sie eine & lt; ul & gt; class="textNav" dann können Sie auf ihre & lt; li & gt; s und ihre Kinder zugreifen, ohne dass zusätzliche Klassenzuweisungen hinzugefügt werden müssen. ul.textNav li a: hover {}

2. Haben Sie keine Angst, mehrere Klassen für ein einzelnes Objekt zu verwenden. Dies ist absolut gültig und sehr nützlich. Sie haben dann die Kontrolle über das CSS für Gruppen von Objekten aus mehr als einer Achse. Wenn dem Objekt eine ID hinzugefügt wird, wird eine dritte Achse hinzugefügt. Zum Beispiel:

   %Vor%

3. Geben Sie Ihrem Dokument eine Klasse & lt; body & gt; Das Tag (oder die ID, da es immer nur eins geben soll ...) ermöglicht einige raffinierte Überschreibungen für einzelne Seiten, wie zum Beispiel den Menüeintrag für die Seite, auf der Sie sich gerade befinden, oder das redundante zweite Anmeldeformular auf dem Schild loszuwerden -in Seite, alles nur mit CSS. "body.signIn div # mainMenu form.signIn {Anzeige: keine;}"

Ich hoffe du findest zumindest einige meiner Ramblings nützlich und wünschst dir das Beste mit deinen Projekten!

Stellen Sie sich das CSS als ein "Toolkit" vor, auf das sich das HTML beziehen kann. Die folgenden Regeln helfen:

• Machen Sie class Namen eindeutig. In den meisten Fällen bedeutet dies, dass sie in vorhersagbarer Weise vorangestellt werden. Verwenden Sie beispielsweise statt left etwas wie header_links_object2_left .

• Verwenden Sie id anstatt class nur , wenn Sie wissen, dass nur je ein Objekt auf einer Seite sein wird. Erneut, machen Sie die id eindeutig.

• Betrachten Sie Nebenwirkungen. Regeln wie margin und padding , float und clear usw. können unerwartete Auswirkungen auf andere Elemente haben.

• Wenn Ihr Stylesheet von mehreren HTML-Programmierern verwendet werden soll, sollten Sie eine kleine, klare Anleitung zum Schreiben von HTML-Code in Ihr Schema schreiben. Halte es einfach, sonst wirst du sie langweilen.

Und wie immer, testen Sie es in mehreren Browsern, auf mehreren Betriebssystemen, auf vielen verschiedenen Seiten und unter anderen ungewöhnlichen Bedingungen, die Sie sich vorstellen können.

Es gibt verschiedene Dinge, die Sie bei der Organisation Ihres CSS tun können. Zum Beispiel:

• Teilen Sie Ihr CSS in mehrere Dateien auf. Zum Beispiel: haben Sie eine Datei für das Layout, eine für den Text, eine für den Reset-Stil usw.
• Kommentieren Sie Ihren CSS-Code.
• Warum nicht ein Inhaltsverzeichnis hinzufügen?
• Versuchen Sie, ein CSS-Framework wie 960.gs zu verwenden, um loslegen zu können.

Es liegt wirklich am persönlichen Geschmack. Aber hier sind ein paar Links, die Sie nützlich finden könnten:

• Ссылка
• Ссылка
• Ссылка
• Ссылка

Es ist im Allgemeinen eine gute Sache, alle Ihre CSS-Deklarationen in etwa der Reihenfolge anzuordnen, in der sie in der Dokumentenhierarchie landen. Dies macht es für zukünftige Leser ziemlich einfach zu sehen, welche Attribute vererbt werden, da diese Klassen höher in der Datei sind.

Auch das ist eine Art Orthogonal zu Ihrer Frage, aber wenn Sie nach einem Werkzeug suchen, das Ihnen hilft, eine CSS-Datei zu lesen und zu sehen, wie alles ausbricht, kann ich Firebug genug.

Der beste organisatorische Rat, den ich jemals erhalten habe, kam von einer Präsentation bei An Event Apart.

Wenn Sie davon ausgehen, dass Sie alles in einem einzigen Stylesheet speichern, gibt es im Wesentlichen fünf Teile:

1. Regeln zurücksetzen (möglicherweise so einfach wie die * {margin: 0; padding: 0} -Regel, Eric Meyers Reset oder das YUI zurücksetzen)
2. Grundelement-Styling; Dies ist das Zeug wie grundlegende Typografie für Absätze, Abstände für Listen, usw.
3. Universeller Unterricht; diese Abteilung für mich enthält im Allgemeinen Dinge wie .error , .left (ich bin nur 80% Semantik) usw.
4. Allgemein Layout / IDs; #content , #header , oder was auch immer Sie Ihre Seite geschnitten haben in.
5. Seitenspezifische Regeln; wenn du müssen einen vorhandenen Stil ändern nur für eine oder wenige Seiten, bleib a eindeutige ID hoch (Body-Tag ist normalerweise gut) und werfen Sie Ihre überschreibt am Ende des Dokuments

Ich empfehle nicht, ein CSS-Framework zu verwenden, es sei denn, Sie müssen etwas in HTML nachahmen fast . Sie sind viel zu aufgebläht, und ich habe noch nie jemanden getroffen, dessen Semantik mir Sinn gemacht hat; Es ist viel besser, ein eigenes "Framework" zu erstellen, wenn Sie herausfinden, welchen Code Ihre Projekte im Laufe der Zeit teilen.

Den Code anderer Leute zu lesen ist ein ganz anderes Thema, und damit wünsche ich Ihnen viel Glück. Es gibt wirklich schreckliche CSS da draußen.

Noch ein paar Tipps zum Organisieren:

• Übernehmen Sie in jeder Deklaration eine Reihenfolge der Attribute, an denen Sie sich halten. Zum Beispiel listet ich normalerweise Ränder, Auffüllung, Höhe, Breite, Rahmen, Schriftarten, Anzeige / Float / andere in dieser Reihenfolge auf, was die Lesbarkeit in meinem nächsten Tipp erleichtert.
• Schreiben Sie Ihr CSS wie jeden anderen Code: Einrückung! Es ist einfach, eine CSS-Datei nach Elementen auf hoher Ebene zu durchsuchen und dann einen Drilldown durchzuführen, anstatt einfach nach der Quellreihenfolge Ihres HTML zu suchen.
• Semantisches HTML mit guten Klassennamen kann viel dabei helfen, sich daran zu erinnern, welche Stile für welche Elemente gelten.

Cop-Out-Linie des Jahres: Es kommt darauf an.

Wie viel müssen Sie stylen? Müssen Sie die Aspekte von fast jedem Element ändern, oder sind es nur ein paar?

Mein Lieblingsort für Informationen wie diese ist CSS Zen Garden & amp; Eine Liste getrennt .

Es gibt zwei Welten:

1. The human editor perspective: Wo CSS am einfachsten zu verstehen ist, wenn es über eine klare Struktur verfügt, gute Formatierung, ausführliche Namen, strukturiert in Layout, Farbe und Satz ...
2. The consumer perspective: Der Besucher ist am glücklichsten, wenn Ihre Seite schnell ausfällt, wenn sie in ihrem Browser perfekt aussieht, also die CSS klein sein muss, in einer Datei (um weitere Verbindungen zu speichern) und CSS-Hacks zur Unterstützung aller Browser enthält. li>

Ich empfehle Ihnen, mit einem CSS-Framework zu beginnen:

• Blueprint wenn Sie kleinere Dinge mögen
• oder YAML für ein großes und funktionales

Es gibt auch eine Liste von CSS-Frameworks ...

Und dann bringen Sie es (für den Browser) mit einem CSS-Optimierer (z. B. CSS-Formular. & amp; Opti. )

Sie können die Ergebnisse mit YSlow