So werden Sie in 5 einfachen Schritten ein Meister in CSS

Wie Sie wissen, habe ich kürzlich meine Komfortzone verlassen, Android Studio geschlossen und bin direkt in eine unheimliche, raue See namens Web Development getaucht. Ein wesentlicher Bestandteil beim Erstellen von Web-Apps ist die Verwendung von CSS. Für diejenigen, die nicht mit Cascading Style Sheet vertraut sind - auf diese Weise gestalten Webentwickler ihre Webseiten, verleihen ihr Leben und Struktur, fügen Animationen hinzu und verlieren dabei ihren Verstand.

In diesem Beitrag versuche ich in fünf einfachen Schritten zu beschreiben, was jemand braucht, der aus einem Grund, den ich nicht verstehen kann, ein Meister in CSS werden möchte:

1. Verliere deine Intuition

Sie müssen also nur noch eine Schaltfläche am Ende des Formulars hinzufügen, wie schwer kann es werden, oder? BITTE SAGEN SIE NICHT "RICHTIG"!

Zum Beispiel mag CSS die rechte Seite nicht, es wird immer die linke Seite vorziehen. Denn wenn Sie float hinzufügen: richtig; es muss etwas falsches passieren. Einige Elemente ändern ihre Position. Einige Divs werden sich gegenseitig übergehen. Einige alte Versionen von IE werden Ihre Seite auf den Kopf stellen. Warum? Ich weiß es nicht.

Wie man es löst? Möglicherweise müssen Sie einen Überlauf hinzufügen: Dieser wird im übergeordneten Element ausgeblendet (oder Sie fügen ein Dummy-Div hinzu, um das Floating zu löschen.). Warum? Ich weiß es auch nicht.

So funktioniert CSS, Sie denken, es sollte in eine Richtung funktionieren, aber normalerweise irren Sie sich.

Lebenszyklus meiner CSS-Codierungssitzung (Quelle: tech life as graph)

2. Meditation regelmäßig üben

Um mit dem vorherigen Teil fortzufahren - beim Umgang mit CSS funktionieren viele Dinge nicht wie erwartet. Sie können versuchen, die Logik dahinter zu verstehen, aber normalerweise wäre das nur Zeitverschwendung.

Also, was ich empfehle - bevor Sie wissen, dass Sie daran arbeiten, Ihre Seite zu gestalten, nehmen Sie sich ein paar Minuten Zeit und lassen Sie Ihren Körper und Geist entspannen. Meditiere in diesem Sinne: "Das wird schwierig, das wird rau, aber das ist nur Software, und ich werde dieses nicht deterministische System nicht auf die Nerven gehen lassen."

In Kombination mit dem Entfernen scharfer Gegenstände von Ihrem Schreibtisch kann dies Ihr Leben (und das Ihres Teams) viel ruhiger gestalten.

Quelle: Giphy

3. Aktualisieren Sie Ihre Seite nicht. Je.

Wenn Sie mit CSS arbeiten, gewöhnen Sie sich daran, direkt mit dem Browser zu arbeiten. Auf diese Weise können Sie ganz einfach mit Ihren Elementeigenschaften spielen und erhalten sofortiges Feedback.

Während ein unerfahrener Entwickler alle Änderungen verliert, wenn er die Seite versehentlich aktualisiert, weiß ein CSS-Master, dass die Schaltfläche zum Aktualisieren nicht zulässig ist. Vor allem nicht, bevor das Ergebnis dem Produktmanager angezeigt wird.

Ich habe die Theorie, dass die Anwendung für einzelne Seiten so erfunden wurde.

4. Abonnieren Sie einige Newsletter.

Die Webentwicklung ist eine Umgebung, in der sich das Tempo schnell ändert. Frameworks ändern sich schnell, jede Woche gibt es eine neue glänzende Bibliothek und wöchentlich werden neue Konzepte eingeführt.

Der beste Weg, über neue Tools und Ideen auf dem Laufenden zu sein, besteht darin, einen oder mehrere Newsletter zu abonnieren.

Auf diese Weise können Sie Dinge sagen wie: "Oh, Sie verwenden immer noch Flexbox? Ich benutze jetzt nur das CSS-Raster. Es ist scheiße “, als Ihre PR das Seitenlayout völlig durcheinander brachte und Sie nicht wissen, warum.

Quelle: Huangxuan

5. Arbeiten Sie an Ihren Überzeugungsfähigkeiten.

Eines Tages kommt Ihr Designer mit einem verrückten UX-Konzept zu Ihnen, von dem Sie absolut keine Ahnung haben, wie Sie es implementieren sollen. Aber Sie sind ein CSS-Meister und Meister können nicht zugeben, dass sie nicht wissen, wie sie etwas tun sollen.

Also, was kannst du machen? Fahren Sie ihn einfach raus:

"Oh, wir können es nicht animieren, da dadurch die Zugänglichkeit unserer Website beeinträchtigt wird."
"Schwebende Aussichten sehen auf Mobilgeräten einfach schlecht aus, glauben Sie mir."
„Materielle Karten? Sind wir noch in 2015 ?! "
"Pffff, wie Facebook ?! Sie setzen ihr CSS in ihren JS! Diese Jungs sind verrückt !! "

Fahren Sie damit fort, bis er mit Ihrer Standard-Bootstrap-Starter-Template-Website einverstanden ist.

Quelle: Giphy

Nachwort: Dieser Beitrag ist sarkastisch, und ich bewundere jeden von Ihnen, der einen Text direkt neben dem Vorschaubild richtig ausrichten kann, so wie es der Designer beabsichtigt hat.

Wenn Ihnen dieser Beitrag gefallen hat, klicken Sie bitte auf die Schaltfläche "Empfehlen" und teilen Sie diese Geschichte. Ich werde auch gerne Ihre Kommentare hören. Vielen Dank!

Ursprünglich veröffentlicht bei shem8.github.io am 25. August 2017.