Dieter Petereit 4. April 2018

CSS in 30 Sekunden: Das versteht jeder

Anstatt deine Zeit mit Candy Crush zu vertun oder dich durch unwichtige Tweets zu fräsen, könntest du die Zeit in der S-Bahn oder auf dem Klo oder im langweiligen Teammeeting nutzen, um CSS zu lernen oder deine Kenntnisse aufzufrischen. 

Der Werkzeugkasten: Dreh- und Angelpunkt des Designer-Daseins

Wenn du wenigstens gelegentlich liest, was ich so schreibe, dann wird dir aufgefallen sein, dass ich stets viel Wert darauf lege, dass dein Werkzeugkasten in Schuss ist. In meinem Werkzeugkasten befindet sich nämlich im Grunde jedes einzelne Tool, das ich fürs Schreiben, Entwickeln und Gestalten jemals brauchen könnte.

So schaust du aus der Wäsche, wenn dein Werkzeugkasten leer ist. Lass es nicht soweit kommen. (Foto: Pixabay)

Dabei spielen auch Snippets, also Schnipsel eine nicht unbeachtliche Rolle. Ich hatte mal eine riesige Sammlung unterschiedlichster Codeschnipsel in individuellen Txt-Dateien. Das war allerdings in den Nullern. Da gab es die Dienste, die uns heute beim Verwalten unserer Werkzeugkästen unterstützen noch nicht. Und es war nun wirklich alles andere als optimal, Codeschnipsel in der Form einzelner Textdateien ordentlich auf der Festplatte zu lagern. Allein, bis ich gefunden hatte, was ich suchte. Ich mag gar nicht daran zurück denken.

Heutzutage speichere ich Speicherdienste. Voll meta. Sicherlich, einzelne Schnipsel lege ich bisweilen noch ab, dann aber in Evernote. Und in eben diesem Cloud-Service speichere ich auch alle anderen digitalen Tools und Dienste, die ich so zu meinem Werkzeugkasten zähle.

CSS in 30 Sekunden: Lernen im Goldfischmodus

Heute habe ich einen neuen kleinen Helfer hinzugefügt, nämlich die Schnipsel-Sammlung „30 Seconds of CSS”, die der Nutzer mit dem fröhlichen Namen Atomiks auf Github eingepflegt hat. Schnipsel zu 18 gängigen Anwendungsfällen, darunter der immer noch nicht obsolete Clearfix, findest du hier.

Kurze CSS-Happen für zwischendurch. (Screenshot: Dr. Web)

Dabei erhältst du zu jedem Schnipsel den vollständigen Sourcecode nebst Demo-Syntax und ausführlicher Erklärung, sowie der Angabe der Browserkompatibilität. Das Ziel ist es, dass du pro Schnipsel nicht länger als 30 Sekunden brauchst, um ihn vollständig zu verstehen und sicher einsetzen zu können.

Man könnte also sagen, es gäbe hier Fastfood für Seitengestalter. Das ist zwar einerseits richtig, aber andererseits ist die Sammlung nahrhafter und macht länger satt als der durchschnittliche Burger.

Andere mögen einwenden, dass diese Schnipsel ja wohl ohnehin so eine Art Flickzeug darstellen müssen, also Lösungen, die man praktisch immer am Mann hat. Das mag so sein, aber ich persönlich habe dabei nicht den Anspruch, alles immer sofort voller Wissen aus dem Ärmel schlackern zu müssen.

Mir reicht es vollkommen, wenn ich weiß, wo ich nachsehen muss. Und „30 Seconds of CSS” wartet jetzt in meinem Werkzeugkasten auf den Moment, an dem ich darin etwas nachsehen muss.

Machs doch genauso. Übrigens, hier haben wir schon einmal eine CSS-Schnipsel-Sammlung vorgestellt.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Vielen Dank für diesen Artikel und ein weitere hübsches Tool. :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück