Charger le CSS et le JavaScript Phoenix avec styles.json

Dans l’approche Phoenix présentée ici, les CSS et JavaScript du design sont déclarés dans assets/styles.json. Ce registre donne un point d’entrée lisible pour les ressources locales et évite de disperser des balises de chargement dans les composants.

Le chargeur du thème reste responsable de l’interprétation de ce fichier. Avant de chercher à optimiser, vérifiez son fonctionnement dans votre installation.

Déclarer des chemins relatifs au dossier assets

Un registre simple peut ressembler à ceci :

{
  "css": {
    "monDesign": "css/design.css"
  },
  "js": {
    "maNavigation": "js/navigation.js"
  }
}

Les clés doivent être distinctes et les chemins doivent correspondre à des fichiers livrés. Respectez la casse, particulièrement sur un serveur Linux. Un fichier nommé Navigation.js n’est pas nécessairement équivalent à navigation.js.

Ne mettez pas de chemin /var/www/... dans ce registre. Il s’agit d’un chemin système, alors que le navigateur doit recevoir une URL générée par le chargeur.

Organiser les styles par responsabilité

Commencez par des variables communes pour les couleurs, les rayons et les espacements récurrents. Utilisez ensuite des classes préfixées pour limiter les collisions avec les extensions et le thème.

:root {
    --md-ink: #19382f;
    --md-paper: #faf9f5;
    --md-accent: #ef8a68;
}
.md-card {
    border: 1px solid #dce1d7;
    border-radius: 18px;
    background: var(--md-paper);
    color: var(--md-ink);
}

Évitez une règle générale sur tous les button, section ou h2 si elle ne concerne qu’un composant. Une modification locale devient sinon un changement involontaire dans un formulaire ou une fenêtre modale.

Une feuille supplémentaire peut être utile pour les articles ou les événements. Elle doit avoir un rôle clair et rester déclarée dans le même registre.

Initialiser les interactions de façon tolérante

Le même script peut être chargé sur une page où le composant n’existe pas. Son initialisation doit pouvoir se terminer sans erreur dans ce cas.

function initNavigation(root = document) {
    root.querySelectorAll('[data-md-menu]').forEach((button) => {
        if (button.dataset.ready) return;
        button.dataset.ready = '1';
        button.addEventListener('click', () => {
            const open = button.getAttribute('aria-expanded') === 'true';
            button.setAttribute('aria-expanded', String(!open));
        });
    });
}
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => initNavigation());
} else {
    initNavigation();
}

Cet extrait montre l’initialisation et la mise à jour d’un état. Un menu complet doit aussi raccorder cet état à la visibilité réelle de sa zone, comme dans les fichiers du design d’exemple.

Éviter les chargements en double

Avant d’ajouter une bibliothèque, cherchez si elle est déjà présente dans le thème, une extension ou le registre. Deux versions de Bootstrap ou plusieurs initialisations du même formulaire peuvent provoquer des symptômes difficiles à relier à leur cause.

Pour Prism, le design communautaire utilise des fichiers locaux et les langages nécessaires aux guides. Il n’a pas besoin d’aller chercher un langage sur un service distant pendant la lecture.

Ne présumez pas qu’une propriété inventée dans styles.json, comme defer ou dependencies, sera comprise. Étendez le chargeur uniquement lorsque ce besoin est confirmé et que son contrat est documenté.

Diagnostiquer une ressource absente

Dans l’onglet Réseau du navigateur, contrôlez l’URL, le code de réponse et le type du contenu reçu. Une réponse HTML avec un code 200 n’est pas une feuille CSS valide. Recherchez ensuite un chemin incorrect, une différence de casse ou un cache périmé.

Videz le cache concerné après un changement et vérifiez la page comme visiteur déconnecté. Le guide de diagnostic propose un ordre de recherche plus complet.

Une bonne organisation des ressources permet de modifier le design sans chercher des chargements cachés dans chaque bloc.