Meine Gedanken zu CSS

Dieser Artikel ist Teil einer Reihe darüber, wie ich meine WordPress-Projekte im Alltag entwickle, aber betrachten wir ihn vorerst einmal für sich. Ich möchte euch einen kleinen Einblick in meine Gedanken zu CSS im Zusammenhang mit der Anpassung von WordPress-Child-Themes geben.

Wie ich bereits in einigen anderen Artikeln erwähnt habe, arbeite ich im Alltag für ein SaaS-Unternehmen, in dem wir Tailwind als CSS-Framework verwenden und alles streng an ein festes Designsystem gebunden ist. In meiner „Freizeit“ jedoch, wenn ich an einfacheren Projekten arbeite und viel Spielraum habe, habe ich mein eigenes Child-Theme entwickelt, das ich in diesem Artikel vorgestellt habe: https://blog.riccardodicurti.it/my-local-development-environment-and-how-i-update-in-production. Häufiger, als mir lieb ist, gehe ich von einem kommerziellen Theme mit Visual Composer aus. Das Ausgangstheme verwendet zwar kein CSS-Framework, aber die Spaltenverwaltung und einige Muster erinnern stark an Bootstrap.

Wenn ich diese Websites erstelle, muss ich sehr oft Elemente für den Visual Composer erstellen, die stark an wiederverwendbare React-Komponenten zur Seitenerstellung erinnern, doch leider gibt es in dieser Umgebung kein Äquivalent zum CSS-Modul.

Auf jeden Fall halte ich mich beim Schreiben meines CSS an folgende Grundsätze:

• Nutzung neuer Funktionen: Ich versuche, so aktuell wie möglich zu bleiben und investiere manchmal Zeit, um neue Funktionen auszuprobieren (sofern sie ausreichend kompatibel sind https://caniuse.com/). In der Vergangenheit hat mich dieser Aufwand dazu gebracht, Funktionen kennenzulernen, die sich als bahnbrechend erwiesen haben und die meinen Arbeitsablauf bis heute erheblich beschleunigen.
  
  Hier einige einfache Beispiele: Flexbox, Grid, `calc()`, `object-fit` oder `sticky`
• Einsatz von Sass: Was soll ich sagen, ohne Sass könnte ich nicht mehr auskommen. Standard-CSS ohne Variablen, wiederverwendbaren Code und Verschachtelungen zu schreiben, ist mittlerweile eine Qual.
  
  Wer Sass noch nicht kennt, dem empfehle ich, die Website https://sass-lang.com/ zu besuchen
• Einsatz von BEM: Der Einsatz von Sass ist wichtig, um die Arbeit zu beschleunigen, aber eine klare Vorstellung davon zu haben, wie man seinen CSS-Code organisiert, hilft ebenfalls dabei, das Schreiben des Codes zu beschleunigen.
  
  Falls ihr noch keine klare Methodik für die Namensgebung eingeführt habt, lade ich euch ein, die BEM-Website zu besuchen: https://getbem.com/introduction/
• Weniger ist mehr: Ich versuche immer, so wenig CSS wie möglich zu schreiben und hochzuladen. Wenn es sich lohnt, versuche ich, nur eine Datei pro Vorlage hochzuladen, damit der Upload auf das absolute Minimum reduziert wird.

In den letzten Jahren hat sich CSS sowohl aus Sicht der Sprache als auch der Bibliotheken und Frameworks erheblich weiterentwickelt. Ich glaube, dass es – wie bei allem – wichtig ist, auf dem Laufenden zu bleiben, aber wie geht das? Ich persönlich informiere mich jedes Jahr über den aktuellen Stand von CSS (unter diesem Link findet ihr die Ausgabe für 2022: https://2022.stateofcss.com/en-US/) und gehe die Dinge, die ich noch nicht kenne, im Detail durch. Außerdem versuche ich, einige Branchenblogs zu verfolgen (https://css-tricks.com/, https://tympanus.net/codrops/ oder https://www.smashingmagazine.com/).

Nehmen Sie am „State of CSS 2023“ teil: https://survey.devographics.com/it-IT/survey/state-of-css/2023