10 Prinzipien der CSS Masters

() translation by (you can also view the original English article)

Wenn es um CSS geht, gibt es im Web viele Ressourcen und angebliche "Expertentipps". Diese stammen von unbewiesenen, selbsternannten "Gurus", die in der Designwelt keinen Ruf auf der Straße haben. Obwohl sie möglicherweise gültige Punkte haben, wie kann man wissen, ob ein CSS-Tipp eine gültige Ressource oder nur ein ungetesteter Hack ist?

Anstatt sich auf unbekannte Quellen für Ratschläge zu verlassen, schauen wir uns Designer an, die einen hervorragenden Designhintergrund haben und den Weg gegangen sind. Diese CSS-Tipps stammen von einigen der angesehensten Designer der Welt. Sie haben die Portfolios, um ihre Ratschläge zu untermauern, sodass Sie wissen, dass jeder Leckerbissen von höchster Qualität ist.

Im Folgenden finden Sie 10 hervorragende Prinzipien, die jeder Webentwickler oder Designer als nützlich, sinnvoll oder herausfordernd empfinden kann. Betrachten Sie diesen weisen Rat von Gesellen (und Frauen), die den langen, harten Weg der herausragenden Designqualität gegangen sind. Dies sind die wahren Meister von CSS. Trinken Sie tief aus ihrem Wissen und nehmen Sie ihre Weisheit bei Ihrem nächsten Design-Abenteuer mit.

1. Halten Sie CSS einfach - Peter-Paul Koch

Was mich an der Denkweise von CSS-Hackern am meisten stört, ist, dass sie aktiv nach komplizierten Lösungen suchen. Suche und du wirst gefunden werden, wenn du Komplexität willst, wird es dich am Hals packen. Es wird dich niemals loslassen und es wird dir auch nicht helfen.

Peter-Paul Koch ist ein Pate der Webentwicklung. Während er ein Entwickler der alten Schule ist und der Großteil seines Web-Portfolios zwischen 1998 und 2002 war, hat er mit Leuten wie Apple und anderen Schwergewichten zusammengearbeitet. Er hat ein Buch über Javascript geschrieben, aber denken Sie keine Sekunde lang, dass er nichts über CSS zu sagen hat.

Die Gefahr von CSS-Hacks

Koch hat etwas angesprochen, dem jeder Designer und Webentwickler mit Eifer folgen sollte: Halten Sie Ihr CSS einfach. Einfachheit ist schwer zu erreichen, insbesondere im CSS-Design. Es gibt eine Vielzahl von CSS-Hacks, mit denen alle Browser unabhängig von Version oder Typ gleich aussehen. Die Verwendung vieler CSS-Hacks weist jedoch einen grundlegenden Fehler auf. Mit der Weiterentwicklung der Webbrowser ist es viel schwieriger, mit den Änderungen Schritt zu halten.

Koch macht einen interessanten Punkt über die Entwicklung für das Web. Das Internet als Ganzes ist ein sehr unvorhersehbarer Ort, und es ist eine sehr schlechte Strategie, zu überlegen, wie es in Zukunft funktionieren wird.

Das Web ist ein unsicherer Ort. Sie werden nie sicher sein, dass Ihre Websites genau so funktionieren, wie Sie es möchten, auch wenn Sie alle modernen Erkenntnisse aus CSS, Barrierefreiheit und Benutzerfreundlichkeit anwenden. Anstatt bei Hacks, die aufgrund ihrer Komplexität umso komfortabler erscheinen, nach falschem Komfort zu suchen, sollten Sie Unsicherheit als Grundprinzip akzeptieren.

Browser haben keine perfekte CSS-Unterstützung. Besonders für Leute, die gerade erst angefangen haben, CSS zu lernen, kann das ärgerlich sein. Dennoch sind CSS-Hacks nicht die Lösung. Die Akzeptanz der Art und Weise, wie das Web derzeit funktioniert, ist der beste Weg, da Ihre Websites dadurch einfach gehalten werden.

Peter-Paul hat etwas gefunden, das nicht nur für CSS, sondern für die gesamte Webentwicklung gilt. Einfachheit ist der Schlüssel für die Effizienz bei der Codierung.

2. Halten Sie CSS-Deklarationen in einer Zeile - Jonathan Snook

Jonathan Snook ist ein unglaublich beliebter Designer aus Ottawa, Kanada, der sich in Bezug auf Webstandards und Design einen Namen gemacht hat. Er hat auf renommierten Konferenzen wie SXSW gesprochen und über Sitepoint einige technische Ressourcen zum Thema Design veröffentlicht.

Einer von Jonathans Mietern für die Codierung von CSS ist es, Erklärungen in einer Zeile zu halten.

Der zweite mag hübscher aussehen, aber er hilft mir sicher nicht, etwas zu finden. Bei der Suche nach etwas in einem Stylesheet ist der Regelsatz das Wichtigste (das ist der Teil vor dem { and } ). Ich suche ein Element, eine ID oder eine Klasse. Wenn Sie alles in einer Zeile haben, können Sie das Dokument viel schneller scannen, da Sie einfach mehr auf einer Seite sehen. Sobald ich den gesuchten Regelsatz gefunden habe, ist es normalerweise einfach genug, die gewünschte Eigenschaft zu finden, da es selten so viele gibt.

Jonathan gibt ein Beispiel für einzeilige Deklarationen, die so aussehen:

Gut

{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

Schlecht

h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF; }

Dieser Ansatz hilft nicht nur beim schnellen Scannen Ihres CSS, sondern auch beim Verkleinern Ihrer CSS-Datei, indem nicht benötigte Leerzeichen und Zeichen entfernt werden.

3. Verwenden Sie die CSS-Kurzform - Roger Johansson

Die meisten Menschen kennen und verwenden eine Kurzform, aber viele nutzen diese platzsparenden Eigenschaften nicht in vollem Umfang.

Roger Johansson weiß ein oder zwei Dinge über das Entwerfen für das Web. Der schwedische Webdesigner arbeitet seit 1994 im Internet und hat einen beliebten Webdesign-Blog. Wenn es um einfache und elegante Lösungen geht, ist Roger einer der kompetentesten auf seinem Gebiet.

Johansson hat einen sehr ausführlichen Artikel über die Bedeutung von CSS-Kurzform und gibt einige Beispiele für die Verwendung beim Codieren von CSS. Hier ist ein Beispiel:

Die Verwendung der Kurzform für diese Eigenschaften kann viel Platz sparen. Um beispielsweise unterschiedliche Ränder für alle Seiten eines Felds anzugeben, können Sie Folgendes verwenden: margin-top:1em; margin-right:0; margin-bottom:2em; margin-left:0.5em; Das ist aber viel effizienter: margin:1em 0 2em 0.5em;

Die gleiche Syntax wird für die Auffüllungseigenschaft verwendet.

Die CSS-Kurzform reduziert zwar die Größe des Stylesheets, hilft aber auch dabei, den Code zu organisieren und einfach zu halten. Schönes CSS ist einfaches CSS.

4. Lassen Sie Blockelemente den Raum auf natürliche Weise füllen - Jonathan Snook

Mr. Snook hat einen weiteren wichtigen Ratschlag, nach dem jeder Webentwickler leben sollte: Blockelementen erlauben, den Raum organisch zu füllen. Wenn es in der CSS-Entwicklung ein wiederkehrendes Thema gibt, müssen Sie den Code nicht dazu zwingen, Dinge zu tun, für die er nicht bestimmt ist. Dies bedeutet, CSS-Hacks zu vermeiden und die einfachste mögliche Lösung zu finden.

Meine Faustregel lautet: Wenn ich eine Breite einstelle, lege ich weder Rand noch Polsterung fest. Wenn ich einen Rand oder eine Auffüllung einstelle, lege ich ebenfalls keine Breite fest. Der Umgang mit dem Box-Modell kann sehr schmerzhaft sein, insbesondere wenn es sich um Prozentsätze handelt. Daher setze ich die Breite für die Container und dann den Rand und die Polsterung für die darin enthaltenen Elemente. Alles läuft normalerweise schwimmend ab.

Jonathans Faustregel ist ideal, um sicherzustellen, dass Ihre Layouts nicht beschädigt werden und dass beim Erstellen von Layouts mit Blockelementen der einfachste Ansatz verwendet wird.

5. Stellen Sie einen Schwimmer ein, um einen Schwimmer zu löschen - Trevor Davis

Floating ist wahrscheinlich eines der wichtigsten Dinge, die mit CSS zu verstehen sind, aber es ist auch notwendig zu wissen, wie Floats gelöscht werden.

Trevor Davis ist in der Designwelt vielleicht nicht so bekannt wie Zeldman oder Snook. Er verdient sicherlich eine Erwähnung, nur aufgrund seines hervorragenden Portfolios an Weblayouts. Sein Blog ist eine hervorragende Ressource für jeden Webentwickler, der seine Design-Chops auffrischen möchte.

Clearing schwimmt

In Trevors Flaggschiff-Artikel Die 6 wichtigsten CSS-Techniken, die Sie kennen müssen, hat er ein Nugget hinzugefügt, das bei der Verwendung von Spalten in Ihren Layouts viele Kopfschmerzen ersparen kann.

Ich habe eine einfache Seite mit zwei schwebenden Spalten nebeneinander erstellt. Sie werden im Beispiel feststellen, dass der graue Hintergrund die schwebenden Spalten nicht enthält. Am einfachsten ist es also, das enthaltende Element auf float zu setzen. Jetzt sehen Sie jedoch, dass der Containerhintergrund den Inhaltsbereich nicht enthält.

Da der Container den margin :0 auto hat, möchten wir ihn nicht schweben lassen, da er auf die Seite verschoben wird, auf der wir ihn schweben lassen. Eine andere Möglichkeit, den Schwimmer zu löschen, besteht darin, ein Löschelement einzufügen. In diesem Fall verwende ich nur ein leeres Div-Set, um Folgendes zu löschen: beides. Jetzt gibt es andere Möglichkeiten, einen Float ohne Markup zu löschen, aber ich habe einige Inkonsistenzen mit dieser Technik festgestellt, also opfere ich einfach einen leeren Div.

6. Verwenden Sie negative Ränder - Dan Cederholm

Manchmal ist es einfacher, mit der Ausnahme von der Regel umzugehen, als Deklarationen für alle anderen Elemente in der Umgebung hinzuzufügen.

Dan Cederholms Firma SimpleBits ist das Kraftpaket einer Designfirma. Dan hat mit Leuten gearbeitet wie:

Google
Blogger
MTV
Fast Company
Inc.com

... und viele andere hochkarätige Webunternehmen. Glücklicherweise gibt Dan einen Teil des Wissens, das er bei der Arbeit mit diesen massiven Namen gelernt hat, in seinem Blog bei SimpleBits weiter. Hier ist eine Faustregel für Ihre Webdesigner und Entwickler: Wenn Dan Cederholm etwas sagt, hören Sie zu. Stellen Sie sich ihn als digitalen Sherpa vor, der Sie zum Gipfel Ihres Designberges führt.

Negative Margen

Es mag zwar nicht intuitiv erscheinen, vor einer Deklaration ein Negativ zu setzen (z. B. margin-left: -5px), aber es ist eigentlich eine gute Idee. Herr Cedarholm erklärt, dass es manchmal einfacher ist, negative Ränder für Elemente zu verwenden, als jeden anderen Aspekt des Designs zu ändern, damit es nach Ihren Wünschen ausgerichtet wird.

Es gibt Situationen, in denen die Verwendung negativer Ränder für ein Element der einfachste Weg ist, es vom Rest abzuheben und die Ausnahme von der Regel zu behandeln, um den Code zu vereinfachen.

Sie können sein Beispiel für die ordnungsgemäße Verwendung negativer Margen hier sehen.

7. Verwenden Sie CSS, um Layouts zu zentrieren - Dan Cederholm

"Wie zentriere ich ein Layout mit fester Breite mithilfe von CSS?" Für diejenigen, die es wissen, ist es einfach. Für diejenigen, die dies nicht tun, kann es frustrierend sein, die beiden erforderlichen Regeln zu finden, um den Job abzuschließen.

Es ist keine Überraschung, dass Dan diese Liste zweimal machen wird. Zentrierte Layouts sind an der Oberfläche eine sehr einfache Idee, aber aus irgendeinem Grund funktionieren sie nicht immer so einfach wie beworben. Das Zentrieren von Layouts mit CSS kann für Anfänger ein frustrierendes Unterfangen sein, wenn sie es noch nie zuvor ausprobiert haben.

Dan hat eine bewährte Methode, die er häufig verwendet, um ein Nirvana mit zentriertem Layout zu erreichen.

#container { margin: 0 auto; width: xxxpx; text-align: left; }

Viele moderne Designs basieren auf zentrierten Layouts, daher wird die Verwendung dieser Methode für Webentwickler und Designer irgendwann nützlich sein.

8. Verwenden Sie den richtigen DOCTYPE - Jeffrey Zeldman

Sie haben gültiges XHTML und CSS geschrieben. Sie haben das W3C-Standard-Dokumentobjektmodell (DOM) verwendet, um dynamische Seitenelemente zu bearbeiten. In Browsern, die genau diese Standards unterstützen, schlägt Ihre Website jedoch fehl. Ein fehlerhafter DOCTYPE ist wahrscheinlich schuld.

Jeffrey Zeldman ist einer der Mitbegründer der exzellenten Ressourcenseite A List Apart, Mitbegründer und Leiter von The Web Standards Project, Leiter des Happy Cog-Designstudios und sogar Verfassen des Buches über das Entwerfen von Webstandards. Kurz gesagt, Zeldman gehört zu den Top-Webdesignern.

DOCTYPE-Missverständnis

Der DOKTYP einer Webseite ist einer der am meisten übersehenen Aspekte des Designs. Die Verwendung des richtigen DOCTYPE ist entscheidend, und Zeldman erklärt, warum.

Wenn Sie einen unvollständigen oder veralteten DOCTYPE verwenden - oder überhaupt keinen DOCTYPE -, werden dieselben Browser in den "Quirks"-Modus versetzt, in dem der Browser davon ausgeht, dass Sie altmodische, ungültige Markups und Codes gemäß den deprimierenden Industrienormen der späten 1990er Jahre geschrieben haben.

Zeldman betont, wie wichtig es ist, a) tatsächlich einen DOCTYPE zu verwenden, und weist darauf hin, dass Sie der Deklaration wie folgt eine URL hinzufügen müssen:

Wenn Sie ungeklärte Probleme mit Ihren Layouts finden, ist der DOCTYPE wahrscheinlich das Problem.

9. Center Items mit CSS - Wolfgang Bartelme

Das Zentrieren von Elementen ist eine häufige Aufgabe beim Entwerfen von Websites. Für CSS-Neulinge ist es jedoch meistens ein Rätsel, wie beispielsweise eine ganze Website in anderen Browsern als dem Internet Explorer zentriert werden kann.

Wolfgang Bartelme ist Webdesigner bei Bartelme Design, einer Webdesignfirma. Bartelme hat einen der elegantesten Blogs und kreiert kontinuierlich exzellente Ikonen- und Designarbeiten. Er hat Designarbeiten für die Blogging-Plattform Squarespace sowie für das beliebte Software-Event MacHeist durchgeführt.

Wolfgang hat ein Tutorial erstellt, das bei der komplizierten Aufgabe hilft, Elemente mit CSS zu zentrieren. Zentrierte Elemente sind wahnsinnig nützlich, aber angesichts des Designs manchmal schwer zu erreichen. Das Tutorial von Bartelme stellt die zentrierte Ausrichtung sicher, indem es den richtigen DOCTYPE auswählt und sein CSS-Voodoo hinzufügt. Der Code ist nichts Besonderes und erledigt die Arbeit und entspricht direkt dem Streben nach Einfachheit in CSS.

10. Verwenden Sie Texttransformationsbefehle - Trenton Moss

Trenton Moss kennt die Benutzerfreundlichkeit des Webs. Er hat eine eigene Web-Usability-Firma, die Menschen in Usability-Training und Web-Schreiben schult. Er schreibt auch für Websites wie Sitepoint. Trenton gibt aufgrund seiner Erfahrung als Web-Usability-Experte hervorragende Tipps.

Es ist eine einfache Tatsache, dass sich Designs im Laufe der Zeit ändern, insbesondere in der Art und Weise, wie Text auf Websites angezeigt wird. Das Beste, was ein Webdesigner tun kann, ist, für die Zukunft zu planen, um sicherzustellen, dass die Darstellung von Text nicht manuell geändert werden muss, sondern das Erscheinungsbild des Textes mithilfe von CSS geändert wird. Trenton Moss zeigt uns, wie dies mithilfe eines einfachen, nicht ausreichend genutzten CSS-Befehls namens text-transfom erreicht werden kann.

Einer der weniger bekannten, aber wirklich nützlichen CSS-Befehle ist der Texttransformationsbefehl. Drei der gebräuchlichsten Werte für diese Regel sind: text-transform: uppercase, text-transform: lowercase und text-transform: capitalize. Die erste Regel wandelt alle Zeichen in Großbuchstaben um, die zweite in Kleinbuchstaben und die dritte macht den ersten Buchstaben jedes Wortes zu einem Großbuchstaben.

Durch die Verwendung von CSS zur Anzeige des Erscheinungsbilds von Text auf der Website können Änderungen in der Zukunft vorgenommen werden, und die Dinge bleiben im Laufe der Zeit konsistent.

Dieser Befehl ist unglaublich nützlich, um die Konsistenz des Stils auf einer gesamten Website sicherzustellen, insbesondere wenn mehrere Inhaltseditoren vorhanden sind. Angenommen, Ihr Styleguide schreibt vor, dass Wörter in Überschriften immer mit Großbuchstaben beginnen müssen. Um sicherzustellen, dass dies immer der Fall ist, verwenden Sie text-transform: großschreiben. Selbst wenn Website-Redakteure die Großschreibung vergessen, wird ihr Fehler nicht auf der Website angezeigt.

Während die text-transform eine kleine Sache ist, die hinzugefügt werden muss, um sie einem CSS-Layout hinzuzufügen, kann sie in Zukunft einen großen Unterschied machen, wenn Änderungen vorgenommen werden müssen.

Abonnieren Sie den NETTUTS RSS-Feed, um weitere tägliche Tutorials und Artikel zur Webentwicklung zu erhalten.

Glen Stansberry ist ein Webentwickler und Blogger, der öfter Probleme hatte, als er mit CSS zugeben möchte. Weitere Tipps zur Webentwicklung finden Sie in seinem Blog Web Jackalope.