Réorganisez vos propriétés CSS avec CSSLisible

Attention, cet article a été déplacé dans les archives, donc le contenu peut ne plus être à jour. A vous de voir 🙂

Je vous en ai parlé il y a peu, CSS Avancées est un livre fantastique. Dans les premiers chapitres (pages 53.54), l’auteur évoque une règle d’organisation des propriétés CSS dans un sélecteur qui m’a beaucoup marqué:

  • Contenu créé : ( content, etc )
  • Propriété display
  • Positionnement ( z-index, position, top )
  • Modèle de boîte ( height, margin, border … )
  • Transformations et transitions
  • Typographie
  • Décoration

L’ordre recommandé par l’auteur peut être adapté à ses goûts / à la méthode de son entreprise, mais l’essentiel reste là : regrouper les propriétés par type, afin de mieux relire son code, trouver directement un bug, et tous les avantages d’une convention de codage.

Ainsi, dans la lignée des petits scripts qui font mouche, comme img2datauri, voici CSSLisible, un simple script en PHP pour réorganiser vos CSS, disponible sur GitHub.

Le principe est simple, on télécharge, on fork ou on clone le code dans son dossier www ou htdocs de MAMP/LAMP/WAMP, et on y accède depuis son navigateur.

L’interface sobre, et sans CSS, ô ironie, vous permet de coller un bout de code à nettoyer, pour obtenir en retour un code réorganisé, et trié dans l’ordre de priorité des priorités. Il s’agit d’une base de travail à faire évoluer, l’algorithme de tri étant très primaire.

Testez directement CSSLisible

Je suis évidemment ouvert à tous retours 😉

Partager cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  • Question d’un pur noobilol : pourquoi ne pas l’avoir fait en JS ? En terme de restrictions / ressources etc ?

  • Je viens de tester ce code. J’ai constaté que mon CSS est devenu Lisible mais l’ordre des propriété n’a pas changé. Dommage, c’est principalement pour ça que ce script m’intéressait.

  • Comme expliqué plus haut, c’est un script en cours de développement et ouvert aux retours.
    Donc je veux bien le bout de code CSS qui n’a pas pu être trié pour faire des tests si possible 😉

  • De la bombe !
    Je cherchais qq dans ce genre depuis longtemps ! Bien vu 😉
    Attention, lorsque des typos sont déclarées entre guillemets doubles, le script ajoute des antislashes. il faudrait faire un
    $buffer = stripslashes($buffer);
    à la fin je pense.

    En fait, j’ai surtout une petite demande un peu exotique 🙂

    Bon, ok je suis un pur newbie en PHP donc j’arrive pas à le faire moi même.
    Perso, j’aime bien pouvoir obtenir des CSS ‘clean’ avec les déclarations de sélecteurs uniques sur une ligne chacun. Tout ça avec de l’indentation intelligente, genre

    .maDeclaration1 { propriete: valeur; propriete: valeur; }
    .uneAutre { propriete: valeur; }

    mais avec les accolades uvrantes alignées verticalement.

    Le hic, c’est qu’il faut compter le nombre de caractères de la ‘colonne’ de gauche pour aligner les { verticalement, mais là c’est trop pour mon bagage en PHP lol.

    Bon d’accord, je dois être un peu tout seul à gérer mes CSS comme ça, mais je trouve ça hyper pratique, surtout sur un grand écran.

    voila, voila 🙂

    sinon, bravo pour ce script, c’est vraiment (déjà) super bien.

    Keep up the good work !

  • Merci du retour !
    Quant à ta demande, ça n’est pas impossible, mais le souci c’est qu’un long sélecteur va décaler tout le reste.
    Tu es sûr de vouloir ça ? 🙂

  • En fait c’est bien ce que je cherche…
    Encore une fois, c’est une méthode un peu marginale, mais j’avoue que depuis que je fais mes CSS ainsi, je ne m’en passe plus 😛
    Enfin bon, si tu veux t’épargner de la besogne sur ce sujet, je ne serai pas faché 🙂

    Par contre je pense n’être pas tout seul à travailler avec les sélecteurs + déclarations sur une seule ligne… Du coup ça pourrait être utile pour beaucoup.
    Ca correspond à l’option « très compact » de http://www.cleancss.com/ par exemple

    Merci de ta réponse en tous les cas 😉

    Peace out

  • Pour la compression, il suffit d’enlever l’appel à sort_css(); dans inc/header.php.
    Et ensuite, éventuellement, un $buffer = str_replace('}',"}\n",$buffer); peut faire l’affaire 🙂

  • bon j’ai essayé mais comme ça ne me suffisait pas (soz), j’ai bidouillé un peu et le rendu que j’obtiens est très proche de ce qu’il me faut :
    en mettant $indentation=' '; (un espace), et en modifiant functions.php comme ça :
    http://www.megaupload.com/?d=93YZK61S
    ça fait presque ce que je cherche, ormis le nombre de tabulations que je ne sais pas rendre dynamique… pas grave, je virerai les \t et ça sera nickel
    Merci mille fois 😉

  • ps comme je suis un pur neophite, le fichier dont j’ai mis le lien est très probablement ‘sale’ pour les avertis, désolé…