Jeder kann CSS-Code schreiben, auch wenn er bereits für Ihr Projekt funktioniert. Aber könnte CSS besser sein? Obwohl webjx.com in diesem Bereich eine Vielzahl von Techniken vorstellt, beginnen Sie mit der Nutzung dieser fünf Aspekte, um Ihr CSS zu verbessern, wodurch Sie professioneller aussehen und Ihren Code besser machen!
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; padding: 0;
Eric Meyer Reset und YUI Reset sind beide sehr mächtig, aber für mich gehen sie zu weit. Ich denke, dass Sie irgendwann alles zurücksetzen und dann die Eigenschaften aller Elemente neu definieren müssen. 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;
Nehmen Sie sich mehr Zeit für die Herstellung. 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 regt Sie zum Nachdenken an, wie Sie schneller das richtige Randattribut finden?
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; color: 18px; margin-right: 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 Stylesheet folgendermaßen:
/*****Reset*****/Entfernt die Polsterung und den Rand des Elements.
/*****Grundelemente*****/Definieren Sie den Stil der Grundelemente: body, h1-h6, ul, ol, a, p usw.
/*****Generische Klassen*****/ Definieren Sie einfache Stile, wie z. B. eine Seite schweben lassen, den unteren Rand eines Elements entfernen usw. Natürlich beziehen sich die meisten davon nicht auf die Semantik, die wir wollen, aber sie sind Es ist notwendig, Code effizient zu verarbeiten.
/*****Grundlegendes Layout*****/Grundlegende Vorlagen definieren: Kopfzeile, Fußzeile usw. Helfen Sie bei der Definition der Grundelemente des Webseitenlayouts
/*****Header*****/Definieren Sie alle Hearder-Elemente
/*****Inhalt*****/Definieren Sie alle Elemente im Inhaltsfeld
/*****Footer*****/Alle Fußzeilenelemente definieren
/*****Etc*****/Andere Selektoren definieren. 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 eine Arbeitsweise, die Ihnen gefällt, und bleiben Sie dann konsequent.
5. Beginnen Sie am richtigen Ort
Versuchen Sie nicht, sich Ihrem Stylesheet anzunähern, bis die Auszeichnungssprache vollständig ist.
Wenn ich die Aufteilung einer Webseite vorbereite, muss ich vor dem Erstellen der CSS-Datei eine Vorschau aller Dokumente zwischen dem Body-Opening-Tag und dem Body-Closing-Tag anzeigen und 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 markieren, werden Sie nicht auf die bereits zum Scheitern verurteilten Probleme von divities1 undclasses2 stoßen! Erreichen Sie, 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.
Zusammenfassen
Diese können mir helfen, CSS-Code besser zu schreiben. Dies bedeutet jedoch nicht das Ende dieser Liste. Ich werde einige weitere mit Ihnen teilen. Sie können gerne auf webjx.com achten.