Wenn Sie CSS-Experte werden möchten, reicht es nicht aus, sich mit CSS-Selektoren auskennen zu können. Es liegt auch in der Gesamtplanung der Arbeit, der Beherrschung des Workflows und der Verbesserung der Wartbarkeit und Effizienz des Stylesheets. In diesem Artikel wählt Jina Bolton 10 CSS-Anwendungstechniken von 12 Top-Designern aus und empfiehlt sie jedem.
In letzter Zeit habe ich nach Möglichkeiten gesucht, ansprechendere Stylesheets zu erstellen. Mit CSS können wir die wunderbaren Websites erstellen, die wir wollen, und das Schreiben von CSS ist an sich schon ein Vergnügen.
Wie erstelle ich ein attraktiveres Stylesheet? Welche Funktionen sollte Ihr Stylesheet haben?
Vor ein paar Monaten hatte ich das Vergnügen, an der Web Vision Conference 2007 in Portland, Oregon, USA, teilzunehmen. Für diese Veranstaltung habe ich 12 Designer recherchiert, die herausragende Beiträge zum Webdesign und zur Webentwicklung geleistet haben. Die Ergebnisse dieser Forschung, kombiniert mit meiner eigenen Arbeitserfahrung, haben mir geholfen, eine Reihe guter Methoden zur Erstellung schöner Stylesheets zusammenzufassen.
01. Lassen Sie CSS nicht zu viele Tags haben
Das Verknüpfen oder Importieren von Stylesheets mag wie eine verwirrende Aufgabe klingen. Aber ich möchte betonen, warum das so wichtig ist. Ich habe gesehen, dass viele Website-Entwickler ordentliche und gut organisierte CSS-Dokumente haben, aber langsam, weil sie möglicherweise nicht in der Lage sind, sie schnell und in kurzer Zeit zu aktualisieren, oder weil sie einfach zu faul sind, die zuvor erstellten exquisiten Stylesheets zu verwalten sind verloren gegangen.
Stellen Sie sich vor, Sie arbeiten an einer riesigen Website, die Hunderte von Inhalten veröffentlichen muss. Da die Zeit begrenzt ist, müssen Sie schnelle Änderungen oder Aktualisierungen vornehmen, indem Sie CSS verschachteln oder anordnen. Jahr für Jahr vergeht, und diese Gewohnheit bleibt bestehen, bis Ihnen eines Tages mitgeteilt wird, dass die Website komplett neu gestaltet wird (aber der Inhalt bleibt derselbe) und Sie nur eine Woche Zeit haben, um sie zu erstellen (einschließlich Tests).
Normalerweise ist das Aktualisieren eines Stylesheets eine sehr einfache Methode. Es sei denn, Sie nehmen über einen längeren Zeitraum Änderungen an verstreuten Bereichen der Website vor. Sie können die Struktur des Website-Stylesheets nicht vollständig verstehen. Jetzt haben Sie zwei Möglichkeiten: a. Organisieren Sie alles und gestalten Sie es innerhalb eines Monats neu (viel Glück); b.
Lassen Sie nicht zu, dass Ihr Job so wird. Das Verknüpfen oder Importieren Ihres Stylesheets ist keine zufällige Angelegenheit. Erstellen Sie ein sauberes und ordentliches Stylesheet und bewahren Sie es dort auf, und Sie werden bei der Arbeit zufriedener sein.
Hinweis: Fügen Sie Ihrem Stylesheet nicht zu viel Markup hinzu. Wenn Sie versuchen, jedes Mal, wenn Sie Inhalte aktualisieren oder neue Inhalte hinzufügen, ein neues Stylesheet zu erstellen, werden Sie definitiv Ärger bekommen. Zu viele Links und importierte Stylesheets erschweren die Beseitigung von Fehlern und erschweren die Wartung Ihres Stylesheets. Bei größeren Websites ist es verständlich, für verschiedene Teile separate Stylesheets zu erstellen. Achten Sie nur darauf, nicht zu extrem zu werden.
Es ist erwähnenswert, dass das Hinzufügen vieler Stylesheets zu mehr HTTP-Anfragen führt, was sich auch auf die nachfolgende Arbeit auswirken kann. Darüber hinaus unterliegt der Microsoft IE6-Browser bestimmten Einschränkungen hinsichtlich des 32-Verbindungs-Stylesheets. .
02. Semantik ist nicht nur ein Branchenwort
Wissen Sie, ich muss es erwähnen, Semantik wird Ihr guter Freund sein. Zusätzlich zur Auswahl der am besten geeigneten und aussagekräftigsten Elemente zum Ausdruck Ihres Inhalts müssen Sie auch sicherstellen, dass Sie Klassen- und ID-Attributwerte auswählen. Außerhalb Ihres Jobs wird es Ihr Leben einfacher machen (und es wird auch das Leben Ihres Arbeitsteams einfacher machen – wenn Sie in einem Team arbeiten). Schauen Sie sich die folgende Definition an:
.l13k { Farbe: #369 }
Wenn Sie gerade zur Arbeit kämen und diese Klasse in dieser CSS-Datei sehen würden, würden Sie diese Klasse dann sofort finden? Dies ist wahrscheinlich nicht möglich, da der Name dieser Klasse wahrscheinlich eine Abkürzung ist und es daher keine genaue Möglichkeit gibt, ihn sofort zu erkennen. Oder vielleicht haben Sie es dort platziert und wissen, was es heute bedeutet, aber können Sie garantieren, dass Sie auch viele Jahre später noch wissen, was es bedeutet?
Schauen wir uns nun diese Definition an:
.left-blue { color: #369 }
Sie werden wahrscheinlich sofort wissen, was dieser Klassenselektor tut, genauso wie Sie wissen, dass das blaue Modul in der linken Spalte vorhanden ist, was bedeutet, dass es funktioniert. Ich habe bereits erwähnt, dass Sie möglicherweise in einer Woche eine Neugestaltung vornehmen müssen. Bei der Neugestaltung wurde dieses Modul rechts platziert und war weiterhin rot. Diese Klasse hat nicht mehr den Wert einer existierenden Klasse. Jetzt muss ich mich entscheiden, entweder alle Attributwerte ändern oder es in Ruhe lassen. (Dies kann zu mehr Verwirrung führen.)
Es ist am besten, Ihren Klassenattributen keine Farbe oder Längen- und Breitendimensionen hinzuzufügen. Sie sollten alle Eigenschaftswerte vermeiden, bei denen es sich um wörtliche Wörter handelt. Direkte Attribute (z. B. Box) können zu einer inhaltlichen Trennung führen.
Schauen wir uns abschließend noch eine passendere Namenskonvention an:
.product-description { color: #369 }
Hier können Sie es sehen. Die in diesem Stil definierte Produktbeschreibung ist sehr klar, egal wie Sie sie ändern.
03.Vorteile des Hinzufügens von Kommentaren
Wenn Ihre Kommentare gut organisiert sind und im Rahmen von CSS liegen, beschriften Sie jeden Abschnitt deutlich. Stellen Sie am besten sicher, dass Kommentare optisch hervorgehoben sind, damit sie schnell gefunden werden können, wenn der Inhalt gescrollt und auf zehn Zeilen geworfen wird. Dann wird das Kommentieren Ihres CSS-Dokuments für Sie oder andere bei der zukünftigen Entwicklung eine große Hilfe sein. Die meisten grundlegenden Kommentare geben Hinweise darauf, warum diese Regel hier verwendet wird.
Tipps und Hinweise
Das Hinzufügen von Kommentaren kann Ihnen oder zukünftigen Entwicklern helfen, unnötige Verwirrung zu vermeiden. Behalten Sie diese Gewohnheit bei. Siehe Beispiel:
/* Ränder für verlinkte Bilder deaktivieren */
img { Grenze: 0;
Zeit und Unterschrift
Einige Designer und Entwickler geben gerne das Datum und die Uhrzeit der letzten Aktualisierung eines CSS-Dokuments sowie den Namen und den Ausgangszustand an. Diese Informationen können Ihnen Aufschluss darüber geben, wer beteiligt war, sowie einen Hinweis auf die aktuellste Dokumentation.
/* Sushimonster-Typografiestile
Aktualisiert: Do 18.10.07 um 17:15 Uhr
Autor: Jina Bolton
-------------------------------------------------- --*/
Dies ist insbesondere dann eine gute Idee, wenn Sie in einem Team arbeiten. Bedenken Sie, dass einige Teams diese Informationen weglassen müssen (einige Unternehmen möchten diese Namen und Daten lieber nicht im Dokument haben). Daher ist es eine gute Idee, einfach eine zu übernehmen Schauen Sie. Werden diese Informationen benötigt?
Organisationsklassifizierung
Es ist eine gute Idee, Kommentare zu verwenden, um verschiedene Teile Ihres CSS kurz zu beschreiben. Wenn beispielsweise alle Überschriftentypen in einer Gruppe zusammengefasst sind, müssen Sie sie sich ansehen, um sie unterscheiden zu können.
/* HEADER
-------------------------------------------------- --*/
Ich werde später näher darauf eingehen, wenn ich über die „Unterscheidung zwischen Typen“ spreche.
Anmerkungsmarkierung
Wenn Ihr CSS-Dokument wie oben erwähnt verstreute Stile organisiert, kann Ihnen die Kommentarmarkierung dabei helfen, das Auffinden dieses Teils der Datei zu erleichtern. Sie können Funktionssymbole und Schlüsselwörter verwenden und das Endergebnis finden.
/* =HEADER
-------------------------------------------------- --*/
Dies ist bei langen und komplexen Stylesheets hilfreich. Dies können Sie in Stop Design nachlesen. .
beziehen sich auf