{"id":52846,"date":"2022-07-28T08:39:11","date_gmt":"2022-07-28T07:39:11","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=52846&preview=true&preview_id=52846"},"modified":"2024-08-22T09:44:18","modified_gmt":"2024-08-22T08:44:18","slug":"css-best-practices","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/css-best-practices\/","title":{"rendered":"14 CSS Best Practices f\u00fcr Einsteiger"},"content":{"rendered":"

Wenn du mit Webdesign anf\u00e4ngst, ist CSS ein Schl\u00fcsselelement, damit alles richtig funktioniert und so aussieht, wie du es haben willst. Das ist die Abk\u00fcrzung f\u00fcr Cascading Style Sheets, mit denen du HTML-Elemente<\/a> nach deinen W\u00fcnschen gestalten kannst.<\/p>\n

Du kannst zwar auf verschiedene Arten mit CSS experimentieren – am h\u00e4ufigsten inline -, aber es gibt einen besseren Weg, das zu tun. Und das entspricht einer Reihe von Best Practices, die du befolgen solltest, um sicherzustellen, dass dein Code<\/a> funktional, frei von unn\u00f6tigem Ballast und gut organisiert ist.<\/p>\n

Heute stellen wir dir 14 CSS-Best-Practices f\u00fcr Anf\u00e4nger vor, aber auch erfahrene Profis sollten manchmal die Grundlagen auffrischen.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Schau dir unseren Video-Leitfaden mit den besten CSS-Praktiken f\u00fcr Einsteiger an<\/a><\/strong><\/p>\n<\/kinsta-video>\n

1. Organisieren des Stylesheets<\/h2>\n

Der erste Schritt bei der Anwendung von CSS-Best Practices ist die Organisation deiner Stylesheets. Wie du dabei vorgehst, h\u00e4ngt von deinem Projekt ab, aber als allgemeine Regel solltest du die folgenden Organisationsprinzipien beherzigen:<\/p>\n

Sei konsistent<\/h3>\n

Egal, wie du dein CSS organisierst, achte darauf, dass du deine Entscheidungen im gesamten Stylesheet und auf deiner gesamten Webseite konsistent h\u00e4ltst.<\/p>\n

Von der Benennung der Klassen \u00fcber den Zeileneinzug bis hin zur Kommentarstruktur – wenn du alles einheitlich gestaltest, kannst du deine Arbeit leichter verfolgen. Au\u00dferdem sorgt es daf\u00fcr, dass sp\u00e4tere \u00c4nderungen ohne M\u00fchen vorgenommen werden k\u00f6nnen.<\/p>\n\n

Verwende Zeilenumbr\u00fcche gro\u00dfz\u00fcgig<\/h3>\n

Obwohl CSS auch dann funktioniert, wenn es optisch nicht ansprechend ist, ist es f\u00fcr dich und alle anderen Entwickler, die mit deinem Code arbeiten, besser, wenn du viele Zeilenumbr\u00fcche verwendest, um jeden Codeschnipsel getrennt und lesbar zu halten.<\/p>\n

In der Regel ist es am besten, jede Eigenschaft und jedes Wertepaar in eine neue Zeile<\/a> zu setzen.<\/p>\n

\"Screenshot
CSS-Code<\/figcaption><\/figure>\n

Erstelle neue Abschnitte, wo es Sinn macht<\/h3>\n

Wie du deine Stylesheets einrichtest, h\u00e4ngt von der Art der Webseite ab, an der du arbeitest. Aber im Allgemeinen ist es eine gute Idee, Abschnitte f\u00fcr Stile so einzurichten, wie sie verwendet werden. Also einen Abschnitt f\u00fcr Textstile, einen Abschnitt f\u00fcr Listen und Spalten, einen Abschnitt f\u00fcr die Navigation und Links und so weiter. Du kannst auch Abschnitte f\u00fcr bestimmte Seiten erstellen, die anders gestaltet sind als der Rest, z. B. der Shop oder die FAQs.<\/p>\n

Kommentiere deinen Code<\/h3>\n

Auch wenn nur du deinen CSS-Code zu sehen bekommst, ist es eine gute Idee, ihn sorgf\u00e4ltig zu kommentieren. Die Kommentare sehen wie folgt aus:<\/p>\n

\/* This is what a standard CSS comment looks like *\/<\/code><\/pre>\n
So kannst du auf einen Blick erkennen, was die einzelnen Abschnitte miteinander zu tun haben, ohne sp\u00e4ter jede Zeile durchgehen zu m\u00fcssen.<\/p>\n
Kommentare k\u00f6nnen dir dabei helfen, Abschnitte zu definieren, aber du kannst sie auch verwenden, um dir einen \u00dcberblick \u00fcber deine Entscheidungen zu verschaffen – vor allem, wenn du denkst, dass du sie sp\u00e4ter vergessen k\u00f6nntest.<\/p>\n
Separate Stylesheets f\u00fcr gr\u00f6\u00dfere Projekte verwenden<\/h3>\n
Das gilt nicht f\u00fcr jede Webseite, aber wenn du eine gro\u00dfe Webseite hast, auf der du viele spezifische CSS-Funktionen ben\u00f6tigst, ist es eine gute Idee, mehrere Stylesheets zu verwenden. Niemand – auch du nicht – sollte lange scrollen m\u00fcssen, um die ben\u00f6tigte Codezeile zu finden.<\/p>\n
Vermeide diesen Aufwand und erstelle separate Stylesheets f\u00fcr die verschiedenen Bereiche der Webseite – vor allem, wenn sie v\u00f6llig unterschiedliche Stile haben.<\/p>\n
Du k\u00f6nntest z. B. ein Stylesheet f\u00fcr globale Stile erstellen und ein weiteres f\u00fcr deinen Onlineshop<\/a> mit speziellen Stilen f\u00fcr Produktbeschreibungen, \u00dcberschriften oder Preise.<\/p>\n
2. Inline-CSS vs. Externes CSS vs. Internes CSS<\/h2>\n
Es gibt drei verschiedene Arten von CSS, mit denen du bei der Erstellung einer Webseite und der Anpassung ihres Stils umgehen musst. Wir erkl\u00e4ren dir kurz, was die einzelnen Arten sind und was sie bewirken, und besprechen dann, welche du f\u00fcr deine Projekte tats\u00e4chlich verwenden solltest.<\/p>\n