Refactoring CSS Best Practice

Question

Nous travaillons depuis longtemps sur une grande application web avec Rails et avons produit beaucoup de CSS pour nos templates. Les définitions de feuilles de style sont organisées dans un tas de fichiers CSS qui ont grandi avec le projet. Comme les gens ne sont pas toujours aussi disciplinés qu'ils devraient l'être, il me semble que beaucoup de définitions sont devenues obsolètes et inutiles.

Existe-t-il un moyen (semi-) automatique de se débarrasser de ce genre de choses? Comment identifiez-vous les css inutiles dans votre projet?

Answer 1

Vous pouvez utiliser le Dust-Me Selector du plugin pour Firefox ou CSS redundancy checker .

Les deux sont d'excellents outils que j'utilise souvent et ils vous font économiser des heures de recherche et de suppression.

Un autre outil à noter également est le projet open source CSS Tidy. Ce minifies votre CSS, particulièrement utile dans ces cas, lorsque vous avez un énorme site avec un énorme fichier CSS :)

---

Je crois que le code source pour le vérificateur de redondance CSS se trouve here. Ran à travers le plugin JSLint à jsFiddle.net mais m'a donné quelques erreurs, enregistré pour tout le monde here.

Answer 2

Pas exactement une solution 'rails' mais vous n'en avez pas toujours besoin. J'utilise le plugin firefox Dust-Me Selectors pour trouver les sélecteurs inutilisés. Travaille pour moi.

edit: kyle me devança

Answer 3

Nous n'avions pas de fichier CSS particulièrement volumineux (environ 3500 lignes) et nous avons trouvé suffisant de grep la base de code pour chaque sélecteur. (Évidemment, cela peut être semi-automatisé avec des tubes shell, xargs et amis). Suite à ce processus, nous avons fini par supprimer un trop grand nombre de styles CSS, grâce à la génération dynamique de certains de nos noms de style CSS (une mauvaise idée en rétrospective). Pour plus de détails sur notre flux de travail et les résultats, j'ai co-écrit quelques milliers de mots sur notre expérience en transformant le CSS d'une application Rails 2.x en une configuration Rails 4.2.x SASS prête à l'emploi, réactive et modulaire.

CSS Refactoring: From append-only to modular CSS