Bonjour à tous,

Voici un exposé de mon problème
Concevant un site dynamique, je dois faire face à css d'une taille assez importante, plusieurs techniques existent, comme utiliser des framework comme SASS ou Less, cependant mon css étant finalisé a 80%, ca m’embêtais un peu, de partir dans cette direction.

l'idée de charger un css pour seulement son contenu m'a traverser l'esprit, cependant, j'ai préférer partir dans une direction qui est celle de compiler ts mes css présent dans un dossier de les fusionner dynamiquement en un seul fichier, et de le compresser. le fichier etant en cache, cela m'a parru plus pertinant.

je peux donc creer un fichier css par page, par fonction, ou pour un affichage particulier.
J'ai donc creer un fichier php qui s'occupe de ca. apres quelques prises de tête, j'arrive a pondre ce petit bout de code:

<?php
//Recherche des extentions css
function searchExt($nom_fichier){  
    $list = explode(".", $nom_fichier);
    $ext = end($list); 
    return strtolower($ext);       
}
//Récuperartion de tous les fichiers css present ds le repertoire
function listing_css($rep){  
    $data = array();
    $iter = new RecursiveDirectoryIterator($rep);  
    foreach (new RecursiveIteratorIterator($iter) as $file) {
        if (searchExt($file->getFilename()) == 'css') {
            $data] = $file->getPathName();
        }
    }
    return $data;
}
//Construction d'un seul fichier css 
header('Content-type: text/css'); // Ce script enverra un CSS
header("Vary: Accept-Encoding"); // Règle les problèmes de proxies
header("Cache-control: public"); // Gestion du cache
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // Gestion du cache : Date de dernière modification
$list_css = listing_css('./css');
$cssstyles = ''; // CSS finale vide
foreach ($list_css as $css) {
    $lines = file($css);
    foreach ($lines as $line_num => $line){
      $cssstyles .= $line;
    }
}
// affichage de la feuille de style exempte de commentaires
echo preg_replace('/\/\*(.+?)\*\/|\s]*(:;{},>])\s]*/','$2',$cssstyles);

j'appelle ce fichier dans mon head html, ca marche, les gains sont visibles, génial ca marche, et j'en suis plutôt fier, car je viens de trouver un moyen qui allait me permettre de faire un truc de propre facilement gérable, et performant.

Seulement voila, je déchante assez rapidement, travaillant sous netbeans, je teste mes pages avec le navigateur (chrome) et je fais mes changement avec son inspecteur.
Avant j'inspectais un div, et l'inspecteur me disait que le sélecteur se trouvait dans le fichier trucmush.css a la ligne 40 par exemple, il était donc facile pour moi de me rendre à l'endroit indiquer et de faire la modification. Seulement voila, maintenant le fichier étant construit dynamiquement. c'est le bordel...

Je ne sais si je me suis fait comprendre, mais si c'est le cas avez vous des suggestions pour résoudre ce problème
Merci d'avance à ceux qui daigneront mer répondre.

2 réponses


Bonjour.
Oui, j'ai bien une suggestion à faire.
Utiliser les sélecteur correctement dans ton script CSS.
Avec le CSS 3, il est plutôt aisé de réduire le code CSS comparé a avant.
Ensuite, le mieux c'est quand même de faire un fichier CSS général, pour le style général des pages WEB, et faire quelques fichiers spécifiques à certaines actions ou contenus et les faire intégrer au cas par cas sur les pages WEB.

Et surtout utiliser sass ou less. Tu as une commande magigue : sass-convert( http://sass-lang.com/documentation/#_2) qui convertira du css en sass.