Komplexität und Mental Load vs Einfachheit und Effizienz

Ich mag webpack, vite und sass. Aber meine Güte, sitz da mal nach 2-3 Jahren wieder ran, update alles und prüfe das Setup. Es geht bei einer guten Doku schnell. Aber du brauchst trotzdem 10-15min, bis du wieder drin bist. Die Komplexität ist enorm.

Mein Setup

Kadence Child Theme

Warum Kadence als Parent Theme? 90% der Funktionen die ich üblicherweise brauche sind da drin. Fokus auf Barrierefreiheit und Core Web Vitals. Damit erreichst du 100er Werte in allen Lighthouse Scores – auch auf Mobile. Das Kadence Ökosystem ist unglaublich mächtig und flexibel. Fonts, Conversions, Pattern Cloud Sync, Layouts und barrierefreie Blocks für den Block Editor.

Wie kam es dazu? Ich habe vorher ab und zu GeneratePress und GeneratBlocks genutzt. Aber das bietet etwa 50% der Funktionen – der Rest musst du selbst machen. Die Entwickler hinter GeneratePress haben einen zu strikten Ansatz: Es kommt wirklich nur das minimalste rein. Heisst, du musst sehr vieles selbst programmieren. Das lohnte sich bei vielen Projekten einfach nicht mehr. Kadence zeigt, wie es anders geht, ohne bei Ladezeit, Sicherheit und Barrierefreiheit abstriche machen zu müssen. Versuche mal in 5 Minuten verschiedene responsive Layouts mit Kadence und mit GenerateBlocks zu machen. Oder versuche mal in 5min einen Header in GeneratePress und einen in Kadence zu erstellen. Du siehst, der Ansatz ist schon sehr mächtig.

Für eine grössere Seite habe ich einen Prototypen umgesetzt. Zuerst habe ich da mit GeneratePress angefangen – aber das wurde mir echt zu blöd. Das ist schlicht nicht effizient. Also habe ich Kadence installiert und in 4 Stunden war die komplette Website mit allen Funktionen fertig in einem schwarz-weiss Prototyp.

Die Kunden waren sehr zufrieden. Nun ging es darum, dem Prototypen die richtigen Inhalte und die richtigen Schriften und Farben hinzuzufügen. Alle Funktionen standen aber schon. Ich habe also wieder begonnen, das mit GeneratePress sauber aufzusetzen – boah. Nach 1 Stunde gab ich es auf. Macht schlicht keinen Sinn. Ich testete Kadence kurz durch – und auch ohne Caching und Ladezeitoptimierungen spuckte das Tool Lighthouse Scores von 90+ raus. Also entschied ich mich dazu (etwas unsicher), Kadence zu verwenden. Drei Jahre später – ich bereue nichts. Kadence ist unglaublich mächtig und flexibel.

Warum nicht custom Theme und custom Blocks?

Wenn die Website das Produkt ist und du quasi Templates verkaufst oder immer das gleiche machst, die gleichen Layouts nutzt – dann macht es Sinn, das selbst zu machen. 20% meines Angebots richtet sich da dran – dort mache ich alles Custom, weil es alles so bleiben wird und die Sites sich nicht verändern werden.

Bei 80% der anderen Arbeiten sind es immer custom Entwicklungen. Da nutze ich lieber vorgefertigte Komponenten und programmiere diese den Anforderungen entsprechend um. Ist nochmals effizienter. Da wurden alle Tests über Jahre schon gemacht von verschiedenen Testern und Entwicklern – diese Schritte müsste ich alle noch durchgehen. Lohnt sich nicht.

Hybrider Ansatz

Core Blocks erweitern und Kadence Blocks sowie GenerateBlocks verwenden je nach Projekt.

YAML
assets
	scripts
		main.js
		main.min.js (automatisch)
	styles
		admin.css
		admin.min.css (automatisch)
		login.css
		login.min.css (automatisch)
		main.css
		main.min.css (automatisch)
includes
	acf
		custom-shortcodes.php
		custom-loops.php
	01-enqueue.php
	02-theme-setup.php
	03-admin-tweaks.php
	04-login-tweaks.php
	05-security-headers.php
	06-optimierungen.php
functions.php
screenshot.php
style.css

Functions.php steuert nur die Einbundung der Includes

PHP

<?php

/**
 * Lädt alle PHP-Dateien aus dem Verzeichnis rekursiv
 * 
 * @param string $dir Verzeichnispfad
 * @param bool $sort Dateien sortieren (default: true)
 */
function require_all_php(string $dir, bool $sort = true): void
{
    $iterator = new RecursiveIteratorIterator(
        new RecursiveDirectoryIterator($dir, RecursiveDirectoryIterator::SKIP_DOTS)
    );
    
    $files = [];
    foreach ($iterator as $file) {
        if ($file->getExtension() === 'php') {
            $files[] = $file->getPathname();
        }
    }
    
    if ($sort) sort($files);
    
    foreach ($files as $file) {
        require_once $file;
    }
}

// Verwendung
require_all_php(get_stylesheet_directory() . '/includes/');

Visual Studio Code Features & Extensions

Region Folding & Minify Extension

CSS
/*#region #1 utility classes */
/* ---------------------------------------- */
.pos-rel {
  position: relative;
}
/*#endregion*/