Comment puis-je refactoriser mon CSS? [dupliquer]

mon 2p d'une valeur d'environ css nettoyage, à partir d'une question similaire: conseils pour nettoyer et maintenir un grand fichier css

espérons que cela puisse vous aider avec les réponses des autres!

1. commencez à brancher le projet (ici je suppose que vous utilisez un outil de contrôle de version) - qui vous permettra de jouer indépendamment avec le code et de marquer tout jalon que vous atteindrez.

2. formater votre CSS avec un plus beau - il augmentera la lisibilité et aidera à rechercher des déclarations spécifiques sans manquer aucune instance.

3. essayez d'identifier non utilisés / redondante css et se débarrasser de lui.

4. vous pouvez essayer de raccourcir vos sélecteurs (par exemple .principal. foo .la barre peut être bien que .bar) - il permettra d'améliorer la lisibilité et d'augmenter les performances, mais prenez cela avec une pincée de sel et être prêt à revenir si les choses commencent à se casser à chaque étape vous prendre.

5. essayer d'éliminer, si possible, tout !important - rendre le sélecteur plus spécifique si nécessaire. Une réinitialisation css pourrait aider avec cela si la plupart des !des déclarations importantes ont été faites pour corriger les problèmes spécifiques au navigateur, sinon l'introduction d'une réinitialisation css maintenant pourrait potentiellement ajouter plus de problèmes que les résoudre-ceci, s'il n'y a pas de réinitialisation css dans votre application.

6. briser et regrouper les css en différents modules (et fichiers si cela aide) - CSS orienté objet est une technique possible pour garder les choses plus maintenable, il fonctionne mieux si vous commencez avec elle, mais il peut également vous aider dans le remaniement. https://github.com/stubbornella/oocss/wiki est valide mais il y a des alternatives que vous pouvez considérer, comme SMACSS.

7. après cela, vous pouvez envisager d'utiliser un préprocesseur css tel que Less ou Sass, vous permettant de définir des variables et des mixins (similaires aux fonctions), la modularité et bien plus encore - cela peut être très cher, donc évaluer soigneusement si cela vous apportera plus d'avantages que de douleur.

8. tester autant et aussi souvent que vous le pouvez, envisager des tests unitaires pour s'assurer que tout changement que vous faites ne casse rien ailleurs.

9. parfois, réécrire tout peut finir par prendre moins de temps que le remaniement, alors n'ayez pas peur de laisser les choses telles qu'elles sont si votre évaluation montre que le remaniement n'apporteront pas assez d'avantages.

EDIT

les choses changent et évoluent pour de bon; en ce qui concerne l'approche OOCSS/SMACSS, j'ai été heureux de suivre pendant un certain temps, méthodologie BEM de Yandex pour CSS, je voudrais l'ajouter comme une recommandation supplémentaire à ce qui précède

la première chose que je vais faire est de séparer les CSS en fonction du but. Peut-être d'abord la mise en page générale (DIVs, boxes, ...), le style (polices, H1/H2/.../ HN titles), puis des CSS plus spécialisés (CSS pour les tables, pour les formulaires, pour des composants spécifiques du site).

une telle séparation aide à organiser les changements; si vous devez changer ou ajouter une police, vous savez que vous la trouverez dans la section style. Si vous devez changer la mise en page, il va la même chose, et donc sur.

les choses ont tendance à devenir confuses quand vous avez des "pages individuelles"; est leur mise en page différentes? Vous devez probablement abstraire les traits communs des pages (par exemple, une boîte de conteneur de contenu principal) aussi longtemps que vous le pouvez. Alors pensez à vous spécialiser davantage dans la mise en page (1-colonne, 2-colonne) et ainsi de suite. Si vous avez une expérience de programmeur, il suffit de penser aux classes et à l'héritage, le concept - Oui, je sais que c'est un domaine totalement différent... - mais le concept peut être utile dans la conception de votre css.

sur la Base de cette série en cours de travail, voici ce que j'ai obtenu jusqu'à présent:

la Planification

1. avoir un système pour gérer les notations To-Do dans votre HTML et CSS. Beaucoup d'IDEs supportent directement cette fonction, ou une fonction de recherche globale fera l'affaire. En plus des questions de marquage, vous voulez noter la priorité et peut-être même le domaine fonctionnel (mais garder simple, pas un fardeau).
2. ne commencez pas à réviser votre code. Utilisation de votre système d'abord.
3. faites une liste concise de vos objectifs généraux.
   
   
   • tenir compte des changements sylistiques généraux, comme la couleur ou la police.
   • examiner les pratiques exemplaires en matière de SSC. Déterminez les domaines où votre approche est inefficace ou où une bonne approche peut être appliquée de façon plus uniforme. Exemple:
     • consolider les classes
     • Éliminer le hasard, l'utilisation de styles de ligne
     • supprimer les styles inutilisés ou redondants ou contradictoires
     • Améliorer la cohérence générale; appliquer un ensemble de conventions
     • Améliorer les unités de mesure
     • utilisez des noms de classe et d'id qui reflètent le contenu plutôt que le format
   • déterminez quelle part du marché du navigateur vous voulez prendre en charge et quelle part adopter ou compter sur les nouvelles normes.
   • décidez s'il y a de nouvelles approches que vous voulez adopter. Exemple:
     • utilisation d'une feuille de style réinitialisée pour normaliser navigateur présentation
     • utilisation d'un cadre CSS
     • Utilisation d'une bibliothèque spécialisée, par exemple, pour aider avec les formes
     • dynamique CSS (j'ai récemment suivi le Conseil D'utiliser PHP pour gérer mon CSS, donc je pouvais contrôler dynamiquement mon schéma de couleurs. Mais je suis retourné à la css droite, parce que j'aime la présentation du code CSS dans mon IDE et la méthode hybride a foiré.)
4. passez en revue votre liste d'objectifs et décider ce qui doit être poursuivie, maintenant. Toute modification à grande échelle doit être traitée séparément, si possible. Si votre mise en page de colonne est un gâchis, ce n'est pas le moment d'apprendre comment CSS peut élégamment remplacer votre javascript. Il en va de même pour les bonnes pratiques, les changements de style, etc.
5. si vous avez configuré vos fichiers CSS pour la vitesse (par exemple, compacted footprint ou tous les CSS dans un seul fichier), changez cela. Cassez le code dans un format gérable par l'humain. Plus tard, quand tu auras fini, essaie. un benchmarking pour voir si la version la plus lisible est aussi suffisamment efficace pour une utilisation en production.
6. soumettre votre CSS à un validateur. Notez toutes les violations que vous voulez corriger.

7. trouvez des instances de styles en ligne dans votre HTML (cherchez style l'attribut). Notez tout ce que devrait être déplacé vers une feuille de style.

8. Suivez votre gestionnaire de tâches. Faire de bon sens back-ups. Comme vous allez, tester votre travail sur plusieurs navigateurs.

9. si vous aimez les expressions régulières, soyez averti: regex n'est souvent pas efficace ou sûr pour réécrire CSS. (Pas aussi dangereux que HTML, mais quand même). Regex peut être utile en envoyant des modifications CSS dans le HTML, mais encore une fois soyez prudent.
10. si vous avez beaucoup de retouches aux marges et au rembourrage, essayez globalement de les réinitialiser tous à 0px (OK, utilisez regex ici). Puis les reconstruire systématiquement. Vous pouvez résoudre beaucoup de confusions de cette façon. Bien sûr, n'incluez pas de feuilles de style de bibliothèque ou de cadre dans ce processus.
11. encore une fois, soumettez votre CSS à un validateur.

je vois que les gens ont déjà suggéré d'utiliser des approches comme L'OOCSS, etc., donc je vais proposer une ligne de pensée différente/supplémentaire. Je crois que le problème est plus profond que dans votre CSS et la façon dont vous l'écrivez. Je crois que la raison de votre CSS est sorti de la main, cette citation de votre question:

... alors que je peaufine des pages individuelles ...

ça me fait penser à le problème de beaucoup de mensonge dans votre conception, plutôt que de vous CSS, donc laissez-moi développer un peu là-dessus. À mon avis, Un grand design est un design qui n'a pas à être personnalisé pour chaque page individuelle - et il ya plusieurs raisons pour cela. La raison principale est, comme vous l'avez dit vous-même, votre CSS devient hors de contrôle. petites retouches et corrections sur des éléments individuels, selon l'endroit où ils sont placés, mène souvent à un désordre c'est une douleur à maintenir et à travailler avec. Il y a aussi une utilité-raison en jeu ici. Je croyez QU'un UI devient plus facile à utiliser si l'utilisateur est familier avec L'UI et se reconnaître d'une page à l'autre, sans trop de variation. Bien sûr, vous pouvez avoir un élément qui n'est pas présent sur chaque page, ou qui varie quelque peu d'une page à l'autre, mais je m'efforce toujours de le garder au minimum.

ma suggestion est donc que si vous avez l'intention de réécrire votre CSS, qui est de toute façon fastidieuse et laborieuse, alors pourquoi ne pas réévaluer votre design à l' même temps. Vous trouverez probablement qu'il ya des éléments que vous pouvez modifier afin qu'ils se ressemblent. Faites-en un objectif de se débarrasser du plus grand nombre possible D'UI-éléments, sans compromettre la conception. Lorsque vous avez unifié le design autant que possible, alors il est temps de remanier votre CSS, et peut-être même votre markup?

À ce stade, il pourrait être préférable d' débarrassez-vous de tous vos CSS et recommencez à zéro. Si vous continuez sur votre ancien code, il est facile de devenir paresseux et obtenir je suis coincé avec ton vieux code moins efficace.

Pour le codage, je crois que les autres réponses contiennent beaucoup de bonnes recommandations et les meilleures pratiques. Je voterais personnellement pour OOCSS, une nouvelle découverte pour moi aussi, mais il a amélioré la façon dont je structure mon CSS beaucoup. Donc un coup d'oeil à ça! Cela vous aidera également à penser en termes de réutilisation des éléments et les CSS pour eux, ce qui va un long chemin pour simplement surfer votre CSS.

Cette réponse est en ce qui concerne la note; "J'utilise un cadre CSS et il est difficile de coordonner le remplissage et la marge." seulement.

L'utilisation d'un pré-processeur css résoudra ce problème. Parce que css n'a aucun moyen d'attribuer l'héritage et nous devons donc répéter 'marge:10px' encore et encore.

avec un pré-processeur vous faites juste

@margin {10px}
@padding {10px}

.mySelector{
    margin: @margin;
    padding: @padding;
}

pour la question plus générale, repensez/simplifiez votre conception comme suit: votre css est directement proportionnel à la complexité de la conception et il n'y a pas grand chose que vous puissiez faire à ce sujet.

voici plus de conseils pour rendre votre css maintenable que la Q de comment gérer le processus.

je crée un tas de fichiers CSS séparés, chacun étroitement adapté à un attribut (couleurs, polices, marges, Coins) ou une caractéristique spécifique (nav, forme). Puis j'utilise une phase de compilation pour combiner et miniifier ces fichiers en un ou plusieurs fichiers à envoyer au client. Je fais cela pendant mon processus de construction / test, mais cela pourrait être fait dynamiquement par un script CGI.

Avant de en adoptant un pré-compilateur, considérez la syntaxe souvent négligée des sélecteurs multiples:

element,
otherlement
{
  margin:10px;
}

dans cet exemple, chaque fois que je veux qu'un élément ait une marge de 10px, je l'ajoute à la liste. Je sépare différents ensembles d'attributs de cette façon - je peux énumérer le même élément 5 fois dans mon css - en l'associant à 5 ensembles différents d'attributs.

ne négligez pas non plus l'ajout de différentes classes à la balise body pour créer un héritage de type OO- disons que vous avez 3 sections principales de votre site - assignez à l'étiquette de corps une classe basée sur ces sections. De même, si vous avez 1000 pages de produit, vous pouvez donner à l'étiquette de corps une classe comme "product485" et puis créer des styles qui s'appliquent juste à cette page. Par exemple:

h1 {
  margin: 10px;
}
.product485 h1,
.product484 h1
{
  margin: 5px;
}
.contact h1 {
  margin: 15px;
}

Cela peut être dans un fichier appelé "marges.css " qui ne spécifie que les marges.