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 😉

Tags : , , ,