CSS/Tutorials/Einstieg/Ausblick

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Einstieg(Weitergeleitet von CSS/Tutorials/Gestaltungstipps)
Wechseln zu: Navigation, Suche

In diesem Abschnitt wird erklärt, wie Sie Ihre CSS-Festlegungen nach den Regeln der "best practice" so organisieren und notieren können, dass sie später von Ihnen und anderen leichter verstanden und auch aktualisiert werden können.


Formatierung[Bearbeiten]

Die grundsätzliche Formatierung ist bei CSS weitgehend frei, man kann also zwischen den einzelnen Bestandteilen Selektor, geschweiften Klammern, Eigenschaften, Doppelpunkt, Werten und Semikola beliebig Leerzeichen, Tabulatorzeichen und Zeilenumbrüche einfügen, z.B. um das Stylesheet übersichtlicher zu gestalten. So sind die zwei folgenden – inhaltlich identischen – Definitionen beide erlaubt:

Beispiel: Formatierung von CSS-Festlegungen
h1{font-size:2.5em;margin-left: 2em;text-align:center;border-bottom:2px solid red; margin-right:2em;}
Der Regelsatz ist platzsparend innerhalb einer Zeile notiert; dies geht allerdings auf Kosten der Lesbarkeit.
h1 {
  font-size: 2.5em;
  border-bottom: 2px solid red;
  text-align: center;
  margin: 0 2em;
}
Dieser Regelsatz wirkt viel übersichtlicher:
  • Der Selektor ist gleich erkennbar
  • Deklarationen sind eingerückt
  • Eigenschaft und Wertzuweisung sind durch ein zusätzliches Leerzeichen getrennt.
  • die beiden Deklarationen margin-left und margin-right wurden zu margin zusammengefasst.
Er erscheint zwar länger, moderne Code-Editoren können solche Regelsätze mittels Code-Folding jedoch ein- und ausklappen.
Beispiel: Selektor-Listen
a.backlink:hover, 
a.backlink:focus {
  color: purple;
  background: #fffbf0 url("data:image/svg+xml,...) no-repeat right;
}
Hier werden im zweiten Regelsatz mehrere Selektoren in einer durch komma separierten Selektor-Liste angesprochen.
Der Regelsatz wird lesbarer, wenn die einzelnen Selektoren untereinander dargestellt werden.

Was ist eine gute Reihenfolge für die Deklarationen?

Ein Vorschlag könnte lauten: Zuerst display und float, dann weitere Blockeigenschaften, dann border-Eigenschaften, dann color- und background-Eigenschaften.

Die Deklarationen werden im Seiteninspektor in der festgelegten Reihenfolge aufgeführt, was auch zum Debuggen praktischer ist.

Organisation[Bearbeiten]

In der Frage, wie man CSS-Styles am besten organisiert, herrscht darin Einigkeit, dass

  • das Einbinden von externen CSS-Dateien den Notationen in style-Elementen oder gar style-Attributen vorzuziehen ist. CSS-Dateien erzeugen zwar einmalig einen zusätzlichen Request pro Datei. Da sie aber in der Regel gecachet oder von Bots gar nicht erst angefordert werden, erzeugen sie deutlich weniger Datentransfer.

Auch wenn im oben erwähnten Kapitel die Einbindung eines eigenen Print-Stylesheets vorgestellt wird, ist es empfehlenswert, in Ihrem Stylesheet zuerst grundsätzliche Festlegungen und dann mit Medienabfrage weitere Festlegungen …

  • für Print
  • für größere Viewports

zu treffen.

Normalisierung[Bearbeiten]

Browser wenden ihr eigenes Browser-Stylesheet an, bevor sie das Autoren-CSS anwenden. Die Defaultregeln können aber von Browser zu Browser abweichen.

Beispielsweise wird die Einrückung von Listen durch die Browser unterschiedlich gehandhabt. Die einen realisieren dies über Innenabstände des ul- bzw. ol-Elementes, die anderen über Außenabstände der li.

Deshalb empfehlen manche Webdesigner eine Normalisierung, bei der die CSS-Einstellungen der Browser, vor allem Abstände, Rahmen oder Schrifteinstellungen, zurückgesetzt und somit vereinheitlicht werden. Sie ist vor allem für folgende Elemente verbreitet: ul, ol, li, dl, dt, dd.

Beispiel
ul, ol, li, dl, dt, dd {
  display: block;
  padding: 0;
  margin: 0;
}

li {
  display: list-item; 
  margin-left: 2em;
}
Empfehlung: Vermeiden Sie weitreichende Normalisierungen, alle Default-Einstellungen sind sinnvoll und die meisten sind browserübergreifend sehr ähnlich.

Vorlagen und Frameworks[Bearbeiten]

Grundsätzlich sollte man vermeiden, mit jedem Projekt wieder bei null anzufangen. Vieles benötigt man in jedem Projekt. Das beginnt bei so profanen Dingen wie Ordnern für Bilder oder CSS, geht über das HTML-Grundgerüst und die Verknüpfung der HTML-Datei mit einer Formatvorlage und kann je nach Arbeitsumgebung bis hin zu Serverkonfigurationen per htaccess, der Einbindung von JavaScript-Bibliotheken und ganzen Frameworks gehen.

Um das alles nicht bei jedem Projekt neu anlegen zu müssen, arbeiten viele Entwickler mit selbst erstellten Vorlagen, die sie für neue Projekte nutzen.

Es gibt aber auch Projekte im Web, die solche Vorlagen kostenlos bereitstellen. Das wohl bekannteste ist die HTML5-Boilerplate von Paul Irish. Der Gedanke hinter so einer Boilerplate (englisch für Kochplatte) ist es, nicht jedesmal einen Herd bauen zu müssen, wenn man sich ein Spiegelei braten möchte.

Die HTML5-Boilerplate bringt all die genannten Dinge mit. Darüberhinaus sind sinnvolle und meist nötige CSS-Styles bereits in der Datei main.css vorhanden, die leicht an eigene Bedürfnisse angepasst werden können.

Für Anfänger lohnt sich ein Blick auf die Boilerplate auch weil man daran eine typische und sinnvolle Struktur nachvollziehen kann.

Noch weiter gehen CSS-Frameworks zu deren bekanntesten Vertretern Bootstrap, Skeleton und Foundation zählen. Diese bringen fertige Styles für die meisten Komponenten einer Webseite mit. Dazu gehören auch komplexere Konstrukte wie Menüs, Slider oder Tabs (Karteikartenreiter). Alles responsiv und sofort nutzbar. Insbesondere bei Bootstrap sind zudem gute Grundlagen für die Entwicklung zugänglicher Webseiten vorhanden.

Kritik an Frameworks[Bearbeiten]

Hiermit erstellte Webseiten sehen naturgemäß den vielen Millionen Seiten, die ebenfalls auf den Frameworks aufbauen, sehr ähnlich. Wenn man die Formatvorlagen weitgehend an ein vorgegebenes Layout anpassen möchte, beschreiben viele Entwickler den nötigen Aufwand als genauso hoch oder höher wie bei einer kompletten Eigenentwicklung.

Darüberhinaus wird oft die mangelnde Trennung von Inhalt und Layout kritisiert, die aufgrund der massenhaft eingesetzten präsentationsbezogenen Klassen nicht aufrechtzuhalten ist. Wie in den Zeiten vor CSS muss an alle Elemente geschrieben werden, wie diese aussehen sollen - insbesondere Änderungen an statischen Seiten werden so extrem aufwändig und sind fehleranfällig.

Nicht zuletzt steht mit CSS-Grid eine Technik zur Verfügung, die leicht zu nutzen ist und Teile eines solchen Frameworks (insbesondere die zum Seitenlayout) überflüssig macht.

Weblinks[Bearbeiten]

Wie geht es weiter?[Bearbeiten]

Ja, nun haben Sie uns tapfer durch diesen Kurs begleitet, und wir hoffen, Ihnen einen ersten Einstieg in CSS vermittelt zu haben.

Vieles haben wir aber auch weggelassen. Anderes vereinfacht. Die HTML- und CSS-Dateien, die wir Ihnen präsentiert haben, sind zwar formal korrekt, aber nicht unbedingt in jeder Hinsicht ideal und praxistauglich, und sie reizen keineswegs alle Möglichkeiten aus, die es gibt – weder technisch noch ästhetisch.

Anregungen und Ideen finden Sie eventuell in unseren fertigen Layouts, die vollständig responsiv und barrierefrei sind.

Grid Layout bietet einen völlig neuen, flexiblen Ansatz, Webseiten zu gestalten. Auch hier gibt es eine Tutorial-Reihe für Anfänger und Wiedereinsteiger:

Eventuell finden Sie hier Seitenvorlagen (Templates), die Ihnen gefallen und die Sie herunterladen und frei verwneden können: