1.Zurücksetzen
Zunächst möchte ich Ihnen ganz im Ernst sagen, dass Sie bestimmte Kategorien immer neu einstellen müssen. Egal, ob Sie Eric Meyer Reset oder YUI Reset verwenden oder Ihren eigenen Reset-Code schreiben, verwenden Sie ihn einfach.
Es kann problemlos Polsterung und Ränder von allen Elementen entfernen:
| html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; Polsterung: 0; } |
Eric Meyer Reset und YUI Reset sind beide sehr mächtig, aber für mich gehen sie zu weit. Ich denke, irgendwann müssen Sie alles zurücksetzen und dann die Eigenschaften aller Elemente neu definieren. Aus diesem Grund empfiehlt Eric Meyer eine effizientere Nutzung (Reset-Stylesheet) und Sie verwenden sein Reset-Stylesheet nicht einfach, sondern ziehen es per Drag & Drop in Ihr Projekt. Passen Sie es an (das Reset-Stylesheet) und erstellen Sie Ihr eigenes Reset-Stylesheet.
Oh, bitte hören Sie auf, Folgendes zu verwenden:
| * { Rand: 0; Polsterung: 0; |
Verbringen Sie mehr Zeit damit, daran zu arbeiten, und was wird Ihrer Meinung nach mit den Optionsfeldern passieren, wenn Sie die Polsterung entfernen? Formelemente können manchmal komische Dinge bewirken, daher ist es am effektivsten, sie unabhängig zu machen.
2. Sortieren
ein kleiner test
Dieses Beispiel soll Sie dazu anregen, darüber nachzudenken, wie Sie das richtige Randattribut schneller finden können.
Beispiel Nr. 1
| div#header h1 { Z-Index: 101; Farbe: #000; Position: relativ; Zeilenhöhe: 24px; Rand rechts: 48px; border-bottom: 1px solid #dedede; Schriftgröße: 18px; } |
Beispiel Nr. 2
| div#header h1 { border-bottom: 1px solid #dedede; Farbe: #000; Schriftgröße: 18px; Zeilenhöhe: 24px; Rand rechts: 48px; Position: relativ; Z-Index: 101; } |
Sie können mir nicht sagen, dass Beispiel Nr. 2 die richtige Randeigenschaft nicht schneller finden kann. Sortieren Sie Ihre Elementeigenschaften alphabetisch. Durch die konsistente Erstellung Ihres CSS sparen Sie Zeit bei der Suche nach einer bestimmten Eigenschaft.
Ich weiß, dass einige Leute ihren Code auf die eine und andere auf die andere Weise organisieren, aber in meinem Unternehmen haben wir uns einig, dass der gesamte Code alphabetisch organisiert werden soll. Es hilft auf jeden Fall, mit anderen zusammenzuarbeiten, indem Sie Ihren Code auf diese Weise organisieren. Ich zucke jedes Mal zusammen, wenn ich auf ein Cascading Style Sheet stoße, dessen Eigenschaften nicht alphabetisch sortiert sind.
3.Organisation
Sie sollten Ihre Stylesheets so organisieren, dass verwandte Inhalte nahe beieinander liegen, damit Sie leichter finden, wonach Sie suchen. Verwenden Sie effizientere Anmerkungen. Als Beispiel strukturiere ich mein Cascading Style Sheet folgendermaßen:
| /*****Zurücksetzen*****/ Abstand und Rand von einem Element entfernen. /*****Grundelemente*****/ Definieren Sie Stile für Grundelemente: body, h1-h6, ul, ol, a, p usw. /*****Generische Klassen*****/ Definieren einfacher Stile, wie z. B. das Schweben einer Seite, das Entfernen des unteren Rands eines Elements usw. Natürlich haben die meisten davon nichts mit der gewünschten Semantik zu tun, aber sie sind notwendig, um den Code effizient zu verarbeiten. /*****Grundlegendes Layout*****/ Definieren Sie grundlegende Vorlagen: Kopfzeile, Fußzeile usw. Helfen Sie dabei, grundlegende Elemente des Webseitenlayouts zu definieren /*****Kopfzeile*****/ Definieren Sie alle Hearder-Elemente /*****Inhalt*****/ Definieren Sie alle Elemente innerhalb der Inhaltsbox /*****Fußzeile*****/ Definieren Sie alle Fußzeilenelemente /*****Usw*****/ Definieren Sie andere Selektoren. Indem Sie ähnliche Elemente mit Anmerkungen versehen und in Gruppen kategorisieren, finden Sie schneller, was Sie suchen. |
4. Konsistenz
Egal, wie Sie sich entscheiden, Code zu schreiben, seien Sie konsistent. Ich habe die ganze Debatte zwischen einzeiligem und mehrzeiligem CSS satt. Es besteht kein Grund zum Streiten. Jeder hat eine Meinung. Wählen Sie also eine Arbeitsweise, die Ihnen gefällt, und achten Sie auf die Konsistenz aller Ihrer Stylesheets.
Persönlich würde ich eine Kombination aus beidem verwenden. Wenn ein Selektor mehr als drei Attribute hat, schneide ich ihn ab und schreibe ihn in mehrere Zeilen.
| div#header { float: left; width: 100%; div#header div.column { border-right: 1px solid #ccc; float: rightright; Rand rechts: 50px; Polsterung: 10px; Breite: 300px; } div#header h1 { float: left; position: relative; width: 250px } |
Finden Sie also heraus, wie Sie gerne arbeiten, und bleiben Sie dann konsequent.
5. Beginnen Sie am richtigen Ort
Versuchen Sie nicht, sich Ihrem Stylesheet anzunähern, bis Sie die Auszeichnungssprache fertiggestellt haben.
Wenn ich die Aufteilung einer Webseite vorbereite, muss ich vor dem Erstellen der CSS-Datei eine Vorschau aller Dokumente zwischen dem öffnenden Tag des Textkörpers und dem schließenden Tag des Textkörpers anzeigen und diese markieren. Ich werde keine zusätzlichen DIVs, IDs oder Klassenselektoren hinzufügen. Ich werde einige allgemeine DIVs hinzufügen, wie Hearer, Content, Footer, weil ich weiß, dass diese Dinge existieren.
Wenn Sie das Dokument zuerst mit Tags versehen, werden Sie nicht auf die bereits zum Scheitern verurteilten Probleme von Divisionen1 und Klassen2 stoßen!
/*Sie müssen diese Dinge erst hinzufügen, wenn Sie mit dem Schreiben des CSS begonnen haben und erkennen, dass Sie einen weiteren Hook benötigen, um das zu erreichen, was Sie erreichen möchten.*/(Originaltext nicht übersetzt).
Verwenden Sie untergeordnete CSS-Selektoren, um untergeordnete Elemente anzugeben. Fügen Sie einem Element nicht einfach automatisch einen Klassen- oder ID-Selektor hinzu. Denken Sie daran: CSS ist ohne ein gut formatiertes Dokument (oder eine Markup-Struktur) wertlos.