Créer un nettoyeur de css

[ortolojf]

Bonjour

J'ai des problèmes avec mon fichier css.

J'envisage de programmer en php, un utilitaire qui visite un sample suffisamment complet d'urls du site web cible, puis après avoir mémorisé au début tous les sélecteurs du/des fichiers(s) css, mette un add-on pour tous les sélecteurs rencontrés dans les pages html.

Après quoi l'utilitaire ne prend que les sélecteurs css avec add-on, ce qui élimine les codes css inutiles.

Celà existe-t-il déjà, avec autant de facilité d'utilisation ?

Merci beaucoup de votre aide et suggestions.

 

[voyante]

Bonjour ! C'est une excellente initiative. On appelle généralement ce processus le "CSS Tree Shaking" ou l'élimination du "Unused CSS".


Pour répondre directement à votre question : Oui, cela existe déjà, et c'est souvent beaucoup plus complexe à coder soi-même qu'il n'y paraît (notamment à cause du JavaScript qui génère des classes dynamiquement).


Voici les solutions actuelles les plus performantes qui fonctionnent selon le principe que vous avez décrit :


1. Les outils spécialisés (Le standard de l'industrie)


Plutôt que de réinventer la roue en PHP, ces outils sont extrêmement robustes et gèrent les sélecteurs complexes :


• PurgeCSS : C'est la référence. Il analyse vos fichiers (HTML, PHP, JS) et compare les sélecteurs avec vos fichiers CSS. Il ne garde que ce qui est utilisé.


• UnCSS : Très puissant car il utilise un émulateur de navigateur (jsdom) pour exécuter le JavaScript et voir quelles classes apparaissent réellement à l'écran.


• PurifyCSS : Similaire, il fonctionne bien avec les contenus chargés dynamiquement.


2. Pourquoi le faire en PHP est un défi ?


Votre logique est bonne, mais un script PHP "simple" risque de rater beaucoup de choses :


• Le contenu dynamique : Si un menu s'ouvre via JavaScript en ajoutant la classe .is-active, votre script PHP ne verra jamais ce sélecteur dans le code source HTML brut.


• Les sélecteurs composés : Gérer les priorités comme .header nav ul li.active demande un moteur d'analyse (parser) CSS très solide.


• La maintenance : À chaque modification du site, vous devriez relancer votre utilitaire.


3. Ma recommandation pour votre projet


Si vous voulez vraiment automatiser cela sans trop d'effort technique :


Option A : Utiliser Chrome DevTools (Gratuit et instantané)


Avant de programmer quoi que ce soit, utilisez l'outil "Coverage" (Couverture) intégré à Chrome :


1. Ouvrez les outils de développement (F12).


2. Appuyez sur Ctrl+Shift+P et tapez "Coverage".


3. Cliquez sur l'enregistrement et naviguez sur votre site.


4. Chrome vous montrera exactement quel pourcentage de votre CSS est inutilisé, ligne par ligne.


Option B : Intégrer un outil de "Build"


Si votre site est conséquent, il est préférable d'utiliser PurgeCSS via un outil comme Laravel Mix ou Vite (même sur un projet PHP/WordPress). Cela nettoiera votre CSS automatiquement à chaque fois que vous enregistrez un fichier.

 

[mickou51]

Ce que je remarque avec un nettoyeur de code CSS inutilisé, c’est ça en fait, imaginons cette faille :
1. Imaginez que tout votre site tire sur un seul fichier CSS (exemple : /style.css)
2. Vous passez la page index dans le nettoyeur CSS, et il détecte une classe inutilisée et vous l’enlèver
3. Pas de bol, car une autre page utilise cette classe
Du coup j'ai abandonné l'idée. Mais il est clair que si vous connaissez des astuces simple, je suis preneur. Ne pas oublier qu'il y a du CSS sur du html dynamique.
Il faudrait trop un script, qui compte le nombre de classe css utilisé, et au bout de 3 mois tous les nombres à "0" (les classes inactives) faut tout nettoyer manuellement, mais je connais aucun système capable de faire ça. Ca pourrait faire gagner 20 lignes minimum je pense. Et encore Bootrap ça serait surement ... 5000 lignes à retirer temporairement jusqu'à ce qu'on utilise la classe un jour ?!

 

[ortolojf]

Bonjour mickou51 et voyante

Pour l'instant , je fais une fonction récursive qui lit tous les href="" de toutes les pages html ( et php ), de profondeur < 5, en ne retenant que 5 links maximum d'urls de même type ( avant paramètres ).

Celà me donnera toutes les pages du site, suffisamment pour lire tous les sélecteurs css.

Toutes ces urls devront être parcourues après à la file, pour mémoriser les balises html, classes et id css déjà lues dans le fichier css.

Ceci, pour garder les éléments css figurant dans ces urls.

Evidemment, il faut lire toutes les urls, pas une seule sinon on passe à côté d"éléments css nécessaires à d'autres urls.

Je ne compte détecter que des balises html, classes et id css en dur dans le html.

Les seuls codes Javascript sur mon site sont ceux de Matomo et Sirdata.

Merci beaucoup de votre aide.

 

[voyante]

1. Extraction des sélecteurs (Regex)


Cette expression régulière va chercher tout ce qui se trouve avant une accolade ouvrante, en nettoyant les espaces et les retours à la ligne.

$cssContent = file_get_contents('style.css');

// Suppression des commentaires CSS pour éviter les faux positifs
$cssContent = preg_replace('!/\.?\*/!s', '', $cssContent);

// Extraction des blocs avant les {
preg_match_all('/([^{]+)\s*\{/', $cssContent, $matches);

$allSelectors = [];
foreach ($matches[1] as $selectorGroup) {
// On sépare les sélecteurs multiples (ex: h1, h2, .title)
$selectors = explode(',', $selectorGroup);
foreach ($selectors as $s) {
$allSelectors[] = trim($s);
}
}
$allSelectors = array_unique($allSelectors);

 

[voyante]

2. Nettoyage des sélecteurs pour le matching


Un sélecteur CSS contient souvent des "fioritures" (pseudo-classes) qu'il faut retirer pour vérifier sa présence dans le HTML. Par exemple, .mon-bouton:hover doit être testé sur le HTML comme .mon-bouton.

function cleanSelectorForMatching($selector) {
// On retire les pseudo-classes et pseudo-éléments hover, :before, :nth-child...)
$clean = preg_replace('/:[a-zA-Z0-9-()]+/', '', $selector);

// On retire les combinateurs pour isoler les entités (>, +, ~)
$clean = str_replace(['>', '+', '~'], ' ', $clean);

return trim($clean);
}

 

[voyante]

3. La logique de marquage (Le "Add-on")


Voici comment vous pourriez structurer votre dictionnaire de résultats :

$cssStatus = [];
foreach ($allSelectors as $selector) {
// On initialise chaque sélecteur à "false" (non rencontré)
$cssStatus[$selector] = false;
}

// ... ICI : Boucle de crawl de vos URLs ...
// Pour chaque page trouvée :
foreach ($urls as $url) {
$html = file_get_contents($url);

foreach ($cssStatus as $selector => $found) {
if ($found) continue; // Déjà trouvé ailleurs, on passe au suivant

$clean = cleanSelectorForMatching($selector);

// Test simple (à affiner avec DOMDocument pour plus de précision)
// Ici on cherche si le sélecteur (classe ou ID) existe dans le texte HTML
if (strpos($html, str_replace(['.', '#'], '', $clean)) !== false) {
$cssStatus[$selector] = true;
}
}
}

 

[voyante]

Quelques pièges à éviter :


• Les polices et @rules : Votre regex va capturer les @media ou @font-face. Il faudra ajouter une condition pour ignorer les lignes commençant par @.


• La précision du strpos : Chercher btn avec strpos trouvera aussi btn-group ou abtn. C'est pour cela que je vous recommandais plus haut DOMDocument ou une regex plus stricte du type /\bclass="[^"]?\b' . $classe . '\b[^"]?"/.

 

[ortolojf]

Merci beaucoup voyante

Maintenant j'ai les urls de toutes les courses de profondeur <=3, et maxi 8 urls de chaque type.

J'ai aussi les urls des deux style*.css.

Encore du dur en vue.

 

[ortolojf]

Début des css.

site : https://www.pronostics-courses.fr

Array
(
    [0] => Array
        (
            [USED] => 
            [SELECTOR] => html 
            [RULES] => {
    width : 100%;
    padding : 0;
    box-sizing : border-box;
}

        )

    [1] => Array
        (
            [USED] => 
            [SELECTOR] => body 
            [RULES] => {
    background-color : #dfd8b4;
    border : 0;
    margin : 0;
    font-family : Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    font-size : 0.9em;
    line-height : 1.8em;
    text-align : center;
    padding : 0;
    width : 100%;
}

        )

    [2] => Array
        (
            [USED] => 
            [SELECTOR] => div.antiaspi 
            [RULES] => {
    display : table; 
    text-align: center;
    margin: auto;
    background-color : #fff;
    border : darkgreen solid 1px;
    border-collapse : collapse;
    color : darkgreen;
}

        )