30 CSS Best Practices für Anfänger

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

CSS ist eine Sprache, die von fast jedem Entwickler irgendwann benutzt wird. Während es eine Sprache ist, die wir manchmal für selbstverständlich halten, ist es mächtig und hat viele Nuancen, die unseren Entwürfen helfen können (oder verletzen). Hier sind dreißig der besten CSS-Praktiken, mit denen Sie solide CSS schreiben und einige kostspielige Fehler vermeiden können.

1. Mach es lesbar

Die Lesbarkeit Ihres CSS ist unglaublich wichtig, obwohl die meisten Leute übersehen, warum es wichtig ist. Die gute Lesbarkeit Ihres CSS macht die Pflege in Zukunft wesentlich einfacher, da Sie Elemente schneller finden können. Außerdem werden Sie nie wissen, wer später Ihren Code sehen muss.

<editor-note> Beim Schreiben von CSS fallen die meisten Entwickler in eine von zwei Gruppen.

Gruppe 1: Alles in einer Zeile

1
2	.someDiv { background: red; padding: 2em; border: 1px solid black; }

Gruppe 2: Jeder Stil erhält seine eigene Linie


.someDiv {
  background: red;
  padding: 2em;
  border: 1px solid black;
}

Beide Praktiken sind vollkommen akzeptabel, obwohl du im Allgemeinen feststellst, dass Gruppe zwei Gruppe eins verachtet! Denken Sie daran - wählen Sie die Methode, die Ihnen am besten aussieht. Das ist alles was zählt. </editor-note>

2. Halten Sie es konsistent

Um Ihren Code lesbar zu halten, müssen Sie sicherstellen, dass das CSS konsistent ist. Sie sollten anfangen, Ihre eigene "Untersprache" von CSS zu entwickeln, mit der Sie Dinge schnell benennen können. Es gibt bestimmte Klassen, die ich in fast jedem Thema erstelle, und ich benutze jedes Mal denselben Namen. Zum Beispiel verwende ich ".caption-right", um Bilder zu floaten, die eine Beschriftung rechts enthalten.

Denken Sie beispielsweise darüber nach, ob Sie Unterstriche oder Bindestriche in Ihren ID- und Klassennamen verwenden und in welchen Fällen Sie sie verwenden werden. Wenn Sie mit der Erstellung eigener Standards für CSS beginnen, werden Sie viel kompetenter.

3. Beginnen Sie mit einem Framework

Einige Design-Puristen spotten über den Gedanken, mit jedem Design ein CSS-Framework zu verwenden, aber ich glaube, wenn jemand anderes sich die Zeit genommen hat, ein Werkzeug zu pflegen, das die Produktion beschleunigt, warum erfinde ich das Rad neu? Ich weiß, Frameworks sollten nicht in jedem Fall verwendet werden, aber die meiste Zeit können sie helfen.

Viele Designer haben ihren eigenen Rahmen, den sie im Laufe der Zeit geschaffen haben, und das ist auch eine großartige Idee. Es hilft, die Konsistenz innerhalb der Projekte zu bewahren.

<editor-note> Ich stimme nicht zu. CSS-Frameworks sind fantastische Werkzeuge ... für diejenigen, die wissen, wie man sie benutzt.

Es geht weniger darum, das Rad neu zu erfinden, als vielmehr darum, zu verstehen, wie das Rad funktioniert.

Wenn Sie gerade erst mit CSS beginnen, empfehle ich Ihnen persönlich, sich mindestens ein Jahr lang von diesen Frameworks fernzuhalten. Sonst wirst du dich nur verwirren. Lerne CSS ... und nimm Abkürzungen! </editors-note>

4. Verwenden Sie einen Reset

Die meisten CSS-Frameworks sind standardmäßig zurückgesetzt, aber wenn Sie keine verwenden, sollten Sie zumindest einen Reset in Erwägung ziehen. Resets beseitigen im Wesentlichen Browser-Inkonsistenzen wie Höhen, Schriftgrößen, Ränder, Überschriften usw. Das Zurücksetzen lässt Ihr Layout in allen Browsern konsistent aussehen.

Das MeyerWeb ist ein beliebter Reset, zusammen mit dem Entwickler-Reset von Yahoo. Oder du könntest immer deinen eigenen Reset durchführen, wenn es dich interessiert.

5. Organisieren Sie das Stylesheet mit einer Top-down-Struktur

Es ist immer sinnvoll, Ihr Stylesheet so zu platzieren, dass Sie schnell Teile Ihres Codes finden können. Ich empfehle ein Top-Down-Format, das Stile anwendet, wie sie im Quellcode erscheinen. Ein Beispiel-Stylesheet könnte also folgendermaßen aussehen:

Generische Klassen (body, a, p, h1 usw.)
#header
#nav-menu
#main-content

<editor-note> Vergessen Sie nicht, jeden Abschnitt zu kommentieren! </editor-note>

1
2	/**** main content *******/
3
4	styles goes here...
5
6	/**** footer *******/
7
8	styles go here...

6. Kombiniere Elemente

Elemente in einem Stylesheet teilen manchmal Eigenschaften. Anstatt vorheriger Code neu zu schreiben, warum kombinieren Sie sie nicht einfach? Zum Beispiel können Ihre h1, h2 und h3 Elemente alle die gleiche Schriftart und Farbe haben:

1
2	h1, h2, h3 {font-family: tahoma, color: #333}

Wir könnten jedem dieser Header-Styles einzigartige Eigenschaften hinzufügen, wenn wir später (dh. H1 {size: 2.1em}) im Stylesheet wollen.

7. Erstellen Sie zuerst Ihr HTML

Viele Designer erstellen ihr CSS gleichzeitig mit der HTML-Erstellung. Es erscheint logisch, beide gleichzeitig zu erstellen, aber Sie sparen sogar noch mehr Zeit, wenn Sie zuerst das gesamte HTML-Modell erstellen. Der Grund für diese Methode ist, dass Sie alle Elemente Ihres Website-Layouts kennen, aber Sie wissen nicht, welche CSS Sie für Ihr Design benötigen. Durch das Erstellen des HTML-Layouts können Sie zunächst die gesamte Seite als Ganzes visualisieren und Sie können Ihr CSS ganzheitlicher und von oben nach unten betrachten.

8. Verwenden Sie mehrere Klassen

Manchmal ist es vorteilhaft, einem Element mehrere Klassen hinzuzufügen. Nehmen wir an, Sie haben eine <div> "Box", die Sie richtig floaten möchten, und Sie haben bereits eine Klasse .right in Ihrem CSS, die alles nach rechts schwebt. Sie können einfach eine zusätzliche Klasse in die Deklaration einfügen:

1
2	<div class="box right"></div>

Sie können jeder Deklaration beliebig viele Klassen hinzufügen (durch Leerzeichen getrennt).

<editor-note> Seien Sie sehr vorsichtig, wenn Sie IDs und Klassennamen wie "links" und "rechts" verwenden. Ich werde sie verwenden, aber nur für Dinge wie Blogposts. Woher? Stellen wir uns vor, dass Sie auf der Straße entscheiden, dass Sie lieber die Kiste auf der linken Seite schweben sehen. In diesem Fall müssten Sie zu Ihrem HTML-Code zurückkehren und den Klassennamen ändern, um die Darstellung der Seite anzupassen. Das ist unsemantisch. Merken - HTML ist für Markup und Inhalt. CSS dient zur Präsentation.

Wenn Sie zu Ihrem HTML zurückkehren müssen, um die Präsentation (oder das Styling) der Seite zu ändern, machen Sie es falsch!

</editors-note>

9. Verwenden Sie den richtigen Doctype

Die Doctype-Deklaration ist sehr wichtig, ob Ihr Markup und Ihr CSS validieren. Tatsächlich kann sich das gesamte Erscheinungsbild Ihrer Website je nach DOCTYPE, das Sie deklarieren, stark ändern.

Erfahren Sie mehr darüber, welcher DOCTYPE bei A List Apart zu verwenden ist.

<editors-note>

Ich benutze HTML5 Docotype für alle meine Projekte.

1
2	<!DOCTYPE html>

"Das Schöne an diesem neuen DOCTYPE ist insbesondere, dass alle aktuellen Browser (IE, FF, Opera, Safari) darauf schauen und den Inhalt in den Standardmodus schalten - obwohl sie HTML5 nicht implementieren. Das bedeutet, dass Sie heute mit dem Schreiben von HTML5-Webseiten beginnen können und diese für sehr, sehr lange Zeit erhalten bleiben. "

- John Resig

</editors-note>

10. Use Shorthand

Sie können Ihren Code erheblich verkürzen, indem Sie bei der Erstellung Ihres CSS eine Kurzschrift verwenden. Für Elemente wie Padding, Rand, Schriftart und einige andere können Sie Stile in einer Zeile kombinieren. Zum Beispiel könnte ein div diese Stile haben:


	#crayon {
		margin-left:	5px;
		margin-right:	7px;
		margin-top:	8px;
	}

Sie könnten diese Stile in einer Zeile kombinieren, etwa so:

1
2	#crayon {
3	margin: 8px 7px 0px 5px; // top, right, bottom, and left values, respectively.
4	}

Wenn Sie weitere Hilfe benötigen, finden Sie hier eine umfassende Anleitung zu CSS-Kurzschreibeigenschaften.

11. Kommentiere dein CSS

Wie bei jeder anderen Sprache ist es eine gute Idee, den Code in Abschnitten zu kommentieren. Um einen Kommentar hinzuzufügen, fügen Sie einfach / * hinter den Kommentar und * / ein, um es zu schließen, so:

1
2	/* Here's how you comment CSS */

12. Verstehen Sie den Unterschied zwischen Block- und Inline-Elementen

Blockelemente sind Elemente, die natürlich jede Zeile nach ihrer Deklaration löschen und die gesamte Breite des verfügbaren Platzes überspannen. Inline-Elemente benötigen nur so viel Platz, wie sie benötigen, und erzwingen keine neue Zeile, nachdem sie verwendet wurden.

Hier sind die Listen der Elemente, die entweder Inline oder Block sind:

1	span, a, strong, em, img, br, input, abbr, acronym

Und die Blockelemente:

1	div, h1...h6, p, ul, li, table, blockquote, pre, form

13. Benennen Sie Ihre Eigenschaften alphabetisch

Während dies eher ein frivoler Tipp ist, kann es für schnelles Scannen nützlich sein.


	#cotton-candy {
		color: #fff;
		float: left;
		font-weight:
		height: 200px;
		margin: 0;
		padding: 0;
		width: 150px;
	}

<editors-note> Ehh ... Opfergeschwindigkeit für leicht verbesserte Lesbarkeit? Ich würde gehen - aber entscheiden Sie selbst! </editors-note>

14. Verwenden Sie CSS-Komprimierer

Mithilfe von CSS-Komprimieren können CSS-Dateien verkleinert werden, indem Zeilenumbrüche, Leerräume und Kombinationselemente entfernt werden. Diese Kombination kann die Dateigröße erheblich reduzieren, was das Laden des Browsers beschleunigt. CSS Optimizer und CSS Compressor sind zwei ausgezeichnete Online-Tools, die CSS verkleinern können.

Es sollte beachtet werden, dass ein Schrumpfen Ihres CSS zu Leistungssteigerungen führen kann, aber Sie verlieren etwas an der Lesbarkeit Ihres CSS.

15. Verwenden Sie generische Klassen

Sie werden feststellen, dass es bestimmte Stile gibt, die Sie immer wieder anwenden. Anstatt diesen speziellen Stil zu jeder ID hinzuzufügen, können Sie generische Klassen erstellen und sie den IDs oder anderen CSS-Klassen hinzufügen (mit Tipp # 8).

Zum Beispiel finde ich mich mit Float: Right und Float: links über ein Over in meinen Entwürfen. Also füge ich einfach die Klassen .left und .right meinem Stylesheet hinzu und referenziere es in den Elementen.


	.left {float:left}
	.right {float:right}
	
	<div id="coolbox" class="left">...</div>

Auf diese Weise müssen Sie nicht ständig "float: left" zu allen Elementen hinzufügen, die floated werden sollen.

<editors-note> Bitte beachten Sie die Anmerkungen des Herausgebers für # 8. </editors-note>

16. Verwenden Sie "Rand: 0 automatisch", um Center Layouts

Viele Anfänger zu CSS können nicht herausfinden, warum Sie float: center nicht einfach verwenden können, um diesen zentrierten Effekt auf Block-Level-Elementen zu erreichen. Wenn es nur so einfach wäre! Leider müssen Sie verwenden

1
2	margin: 0 auto; // top, bottom - and left, right values, respectively.

um divs, Absätze oder andere Elemente in Ihrem Layout zu zentrieren.

<editord-note> Durch die Deklaration, dass sowohl der linke als auch der rechte Rand eines Elements identisch sein müssen, bleibt dem Element nichts anderes übrig, als das Element innerhalb seines enthaltenden Elements zu zentrieren. </editors-note>

17. Wickle nicht einfach einen DIV um ihn herum

Zu Beginn besteht die Versuchung, ein div mit einer ID oder Klasse um ein Element zu wickeln und einen Stil dafür zu erstellen.

1
2	<div class="header-text"><h1>Header Text</h1></div>

Manchmal scheint es einfacher zu sein, einzigartige Elementstile wie im obigen Beispiel zu erstellen, aber Sie werden Ihr Stylesheet durcheinander bringen. Das hätte gut funktioniert:

1
2	<h1>Header Text</h1>

Dann können Sie einfach einen Stil zu h1 anstelle eines Elternteils hinzufügen.

18. Verwenden Sie Firebug

Wenn Sie Firebug noch nicht heruntergeladen haben, halten Sie an und machen Sie es. Ernst. Dieses kleine Tool ist ein Muss für jeden Webentwickler. Unter den vielen Funktionen, die mit der Firefox-Erweiterung mitgeliefert werden (JavaScript debuggen, HTML untersuchen, Fehler finden), können Sie CSS auch in Echtzeit visuell untersuchen, ändern und bearbeiten. Sie können mehr über Firebug auf der offiziellen Firebug-Website erfahren.

19. Hack weniger

Vermeiden Sie so wenig browserspezifische Hacks wie möglich. Es besteht ein enormer Druck, sicherzustellen, dass Designs in allen Browsern konsistent aussehen, aber die Verwendung von Hacks macht es nur schwer, Ihre Designs in Zukunft zu warten. Außerdem können durch die Verwendung einer Reset-Datei (siehe Nr. 4) fast alle Rendering-Unregelmäßigkeiten zwischen Browsern beseitigt werden.

20. Verwenden Sie die absolute Position sparsam

Absolute Positionierung ist ein praktischer Aspekt von CSS, mit dem Sie definieren können, wo genau ein Element auf einer Seite genau auf dem Pixel positioniert werden soll. Da die absolute Positionierung jedoch andere Elemente auf der Seite ignoriert, können die Layouts ziemlich haarig werden, wenn mehrere absolut positionierte Elemente um das Layout herum angeordnet sind.

21. Verwenden Sie Text-Transformation

Text-Transformation ist eine sehr nützliche CSS-Eigenschaft, mit der Sie "standardisieren" können, wie Text auf Ihrer Site formatiert wird. Angenommen, Sie möchten einige Header erstellen, die nur aus Kleinbuchstaben bestehen. Fügen Sie einfach die text-transform -Eigenschaft zum Header-Stil wie folgt hinzu:

1	text-transform: lowercase;

Jetzt sind alle Buchstaben in der Kopfzeile standardmäßig Kleinbuchstaben. Text-Transformation ermöglicht es Ihnen, Ihren Text mit einer einfachen Eigenschaft zu modifizieren (erster Buchstabe großgeschrieben, alle Großbuchstaben oder Kleinbuchstaben).

22. Verwenden Sie keine negativen Ränder, um Ihr h1 auszublenden

Oftmals verwenden Leute ein Bild für ihren Kopftext und verwenden dann entweder display: none oder einen negativen Rand, um das h1 von der Seite zu entfernen. Matt Cutts, der Leiter des Webspam-Teams von Google, hat offiziell gesagt, dass dies eine schlechte Idee sei, da Google es für Spam halte.

Wie Herr Cutts ausdrücklich sagt, vermeiden Sie es, den Text Ihres Logos mit CSS zu verstecken. Verwenden Sie einfach das alt-Tag. Während viele behaupten, dass Sie immer noch CSS verwenden können, um ein h1-Tag zu verbergen, solange das h1 dasselbe ist wie der Logo-Text, möchte ich lieber auf der sicheren Seite bleiben.

23. Validieren Sie Ihr CSS und XHTML

Die Validierung von CSS und XHTML ist mehr als nur ein Gefühl von Stolz: Es hilft Ihnen, Fehler in Ihrem Code schnell zu erkennen. Wenn Sie an einem Design arbeiten und aus irgendeinem Grund die Dinge nicht richtig aussehen, versuchen Sie es mit dem Markup- und CSS-Validator und sehen Sie, welche Fehler auftauchen. Normalerweise werden Sie feststellen, dass Sie vergessen haben, ein Div irgendwo zu schließen, oder ein verpasstes Semikolon in einer CSS-Eigenschaft.

24. Ems gegen Pixel

Es gab immer eine heftige Debatte darüber, ob es besser ist, Pixel (px) oder ems (em) zu verwenden, wenn man Schriftgrößen definiert. Pixel sind eine eher statische Methode, um Schriftgrößen zu definieren, und ems sind mit verschiedenen Browsergrößen und mobilen Geräten besser skalierbar. Mit dem Aufkommen von vielen verschiedenen Arten von Web-Browsing (Laptop, Handy, etc.), ems werden zunehmend zum Standard für die Schriftgröße Messungen, da sie die größte Form der Flexibilität erlauben. In diesem nachdenklichen Forum-Thread erfahren Sie mehr darüber, warum Sie ems für Schriftgrößen verwenden sollten. About.com hat auch einen tollen Artikel über die Unterschiede zwischen den Messgrößen.

<editors-note> Bring mich nicht auf die Farm - aber ich wette, dass dank der Zoomfunktion des Browsers die Mehrheit der Designer auf pixelbasierte Layouts zurückgreift. Was denken Sie? </editore-note>

25. Unterschätzen Sie die Liste nicht

Listen sind eine gute Möglichkeit, Daten in einem strukturierten Format darzustellen, das den Stil leicht ändern kann. Dank der Anzeigeeigenschaft müssen Sie die Liste nicht nur als Textattribut verwenden. Listen eignen sich auch hervorragend zum Erstellen von Navigationsmenüs und solchen Dingen.

Viele Anfänger benutzen divs, um jedes Element in der Liste zu machen, weil sie nicht verstehen, wie man sie richtig einsetzt. Es lohnt sich, die Elemente der Lernliste aufzupeppen, um Daten in Zukunft zu strukturieren.

<editors-note>

Sie sehen Navigationslinks häufig so:

1
2	<a href="#">Home</a>
3	<a href="#">About</a>
4	<a href="#">Services</a>
5	<a href="#">Contact</a>

Technisch funktioniert das nach ein bisschen CSS gut, es ist schlampig. Wenn Sie eine Liste von Links hinzufügen, verwenden Sie eine ungeordnete Liste, dumme Gans!

</editors-note>

26. Vermeiden Sie zusätzliche Selektoren

Es ist leicht, unwissentlich zusätzliche Selektoren zu unserem CSS hinzuzufügen, die das Stylesheet überladen. Ein typisches Beispiel für das Hinzufügen zusätzlicher Selektoren ist die Verwendung von Listen.

1	body #container .someclass ul li {....}

In diesem Fall hätte nur der .someclass Li gut funktioniert.

1	.someclass li {...}

Das Hinzufügen von zusätzlichen Selektoren bringt Armageddon oder ähnliches nicht, aber sie halten dein CSS so einfach und sauber wie möglich.

27. Fügen Sie allen Seiten Ränder und Füllungen hinzu

Verschiedene Browser rendern Elemente unterschiedlich. IE rendert bestimmte Elemente anders als Firefox. IE 6 rendert Elemente anders als IE 7 und IE 8. Während die Browser anfangen, den W3C-Standards näher zu kommen, sind sie immer noch nicht perfekt (* hust IE hust *).

Einer der Hauptunterschiede zwischen Versionen von Browsern ist, wie Padding und Ränder gerendert werden. Wenn Sie nicht bereits einen Reset verwenden, sollten Sie den Rand und den Abstand für alle Elemente auf der Seite definieren, um auf der sicheren Seite zu sein. Sie können dies schnell mit einem globalen Reset tun, so:

1
2	* {margin:0;padding:0;}

Jetzt haben alle Elemente eine Füllung und einen Rand von 0, sofern sie nicht durch einen anderen Stil im Stylesheet definiert sind.

<editors-note> Das Problem ist, dass, weil ALLES mit dieser Methode auf Null gesetzt wird, Sie möglicherweise mehr Schaden anrichten als Hilfe. Sind Sie sicher, dass Sie die Ränder und den Abstand jedes einzelnen Elements auf Null setzen möchten? Wenn ja - das ist vollkommen akzeptabel. Aber bedenke es zumindest. </editors-note>

28. Wenn Sie bereit sind, versuchen Sie objektorientiertes CSS

Objektorientierte Programmierung ist die Trennung von Elementen im Code, sodass die Wiederverwendung einfacher ist. Objektorientiertes CSS folgt dem gleichen Prinzip, verschiedene Aspekte des Stylesheets in logischere Abschnitte zu unterteilen, wodurch Ihr CSS modularer und wiederverwendbarer wird.

Hier ist eine Folienpräsentation, wie Object Oriented CSS funktioniert:

Von Nicole Sullivan.

Wenn Sie neu im CSS / XHTML-Spiel sind, könnte OOCSS zu Beginn eine Herausforderung darstellen. Aber die Prinzipien sind gut für objektorientierte Programmierung im Allgemeinen zu verstehen.

29. Verwenden Sie mehrere Stylesheets

Abhängig von der Komplexität des Designs und der Größe der Website ist es manchmal einfacher, mehrere Stylesheets anstelle eines riesigen Stylesheets zu erstellen. Abgesehen davon, dass es für den Designer einfacher ist, sie zu verwalten, können Sie mit mehreren Stylesheets CSS auf bestimmten Seiten, die sie nicht benötigen, auslassen.

Zum Beispiel könnte ich ein Polling-Programm haben, das eine einzigartige Reihe von Stilen hätte. Anstatt die Poll-Styles in das Stylesheet zu integrieren, könnte ich einfach eine poll.css und das Stylesheet nur auf den Seiten erstellen, auf denen die Umfrage angezeigt wird.

<editors-note> Stellen Sie jedoch sicher, dass Sie die Anzahl der HTTP-Anforderungen berücksichtigen. Viele Designer ziehen es vor, mit mehreren Stylesheets zu arbeiten und diese dann zu einer Datei zusammenzufassen. Dies reduziert die Anzahl der HTTP-Anfragen auf eins. Außerdem wird die gesamte Datei auf dem Computer des Benutzers zwischengespeichert. </editore-note>

30. Beim Debuggen zuerst auf geschlossene Elemente prüfen

Wenn du merkst, dass dein Design ein bisschen wackelig aussieht, ist es sehr wahrscheinlich, dass du einen Abschluss hast </div>. Sie können den XHTML-Validator verwenden, um alle möglichen Fehler zu erkennen.

Sie könnten auch genießen ...

Folgen Sie uns auf Twitter, oder abonnieren Sie den Nettuts+ RSS Feed für mehr tägliche Web-Entwicklungstuts und -artikel.