Et avec l’éditeur de site (FSE), tout change.
Editer en direct dans l’inspecteur Web
J’édite la plupart de mes CSS (99%) dans l’inspecteur du navigateur et j’adore cette approche.
En 2017, je donnais une formation sur Grid Layout (la première en France).
Un peu par hasard, j’ai découvert cette manipulation dans l’inspecteur de Chrome. Elle était encore expérimentale. J’ai même un développeur du logiciel qui m’a donné un coup de main sur un petit bug.
Ça n’a plus rien à voir avec la technique préhistorique héritée de Firebug. Il fallait passer par des copier/coller.
Ici, tout se synchronise instantanément dans les deux sens entre l’inspecteur et le fichier source. Il n’est pas nécessaire de rafraîchir la page.
Depuis ce temps, j’ai arrêté d’utiliser les compilateurs (SASS, LESS). Si je fais la balance, les avantages qu’ils m’apportent ne dépassent pas la puissance de l’édition en direct. Et c’est d’autant plus vrai avec l’arrivée de Grid. On met en page en direct et les erreurs sont identifiées immédiatement.
Est-ce possible dans les thèmes FSE?
Début 2023, je suis passé 100% aux thèmes FSE. Je pensais ne plus utiliser cette technique. Heureusement, c’est le contraire qui est arrivé.
Le CSS est encore très vivace avec cette nouvelle approche de WordPress. Certains parlent de limitations : « il manque des styles dans l’éditeur », « pourquoi il n’y a pas de hover sur les boutons »….
Pour moi, il n’y a pas de limites et nous avons tout ce qui est nécessaire pour faire des designs avancés avec un peu de CSS.
Au début, il a fallu comprendre comment les styles étaient gérés dans un thème FSE.
En passant beaucoup de temps dessus, j’ai réalisé que ça suivait la même logique que le CSS avec la cascade. L’acronyme est clair sur ce point : Cascading Style Sheet ou Feuille de Styles en Cascade. Tout est une question d’héritage.
Ma nouvelle approche du CSS
Aujourd’hui, je code en économie.
À part ce qui est en place nativement, je n’utilise pas d’autres frameworks (Tailwind…).
Je préfère m’accorder sur ce qui est déjà en place :
- Styles par défaut.
- Réglages du back.
- Classes de blocs.
- Cascade native.
- …
Je monte mon « starter theme » au fur et à mesure :
- Le fichier theme.json est le cœur de ce système.
- Toutes les bibliothèques y sont centralisées et
- Quasi tous mes CSS reposent sur les variables automatiques
Sur un site récent, je suis passé de 9000 lignes de CSS à 400, avec un système très modulaire. Fort de toutes ces expériences, c’est ce que j’enseigne dans mon module dédié au FSE.
Article publié initialement sur LinkedIn