Visual Studio Code Region Fold

  • Automation
  • Vereinfachung
  • Effizienz
  • Stabilität

Aus diesen Gründen habe ich früher einfach WPCodeBox innerhalb von WordPress genutzt. Schnell und flexibel PHP, JS, HTML und SCSS direkt aus einem Panel verwalten und schreiben.

Das Problem: Das geht bei gängigen Websites ohne viel Komplexität sehr gut. Man muss sich aber bewusst sein, dass WPCodeBox alles in der Datenbank speichert und somit auch alles von dort wieder abrufen muss. Das spielt in 9/10 Fällen keine Rolle.

Bei einem Projekt schrieb ich sehr viel PHP – gab viele Shortcodes aus und es mussten verschiedene JS Libraries eingebunden werden. Dort ist die Reihenfolge wichtig. Das kann zwar bequem in WPCodeBox gemacht werden – aber wenn du dann 20+ Snippets hast, wird das schnell zu überladen.

Also habe ich alles wieder direkt im Theme oder Child-Theme ausgelagert.

Dort wollte ich aber alles haben, was ich mit WPCodeBox automatisch mitnutzen konnte. SCSS mitsamt partials, Autoreload on save und automatische Code Minifizierung.

Ich habe verschiedene Setups getestet. Gupl, Webpack, Vite – funktioniert in jedem Setup. Aber irgendwie fühlte sich alles zu „überladen“ an. Und in 3 Jahren will ich nicht noch zuerst irgendwelche dependencies updaten und ggf. config Files anpassen müssen. Da habe ich kein Bock.

Lösung? Vanilla CSS, Vanilla JS und reines PHP – fertig.

Ich will aber auch nicht 5-6 verschiedene CSS Files im head einbingen. Und ich möchte weder wepback, gulp oder vite nutzen.

Pragmatische einfache Lösung
Ich binde einfach ein main.css im head ein. Dort rein schreibe ich während der Entwicklung das gesamte CSS. Alles in einem File. Übersichtlich? Geht prima mit Visual Studio Code Folds.

CSS
/*#region utility classes */
.fw-400 {
	font-weight: 400;
}

.fw-500 {
	font-weight: 500;
}

.fw-700 {
	font-weight: 700;
}
/*#endregion*/

/*#region buttons */
.button {
	background: var(--bg);
	color: var(--white);
}
.button:hover,
.button:focus-visible {
	background: var(--bg-accent);
	color: var(--white-accent);
}
/*#endregion*/

Nun kannst du alles von Zeile 1-13 sowie 15-25 einklappen. Fertig.

Und bei der Live-Schaltung?

Einfach CSS manuell mittels https://www.cleancss.com/css-minify/ minifizieren und ins main.min.css File kopieren. Dann in der functions.php noch das main.css in main.min.css wechseln, fertig.

Geht max 10 Sekunden länger als mit npm run build – aber ohne die ganze Komplexität.