Supprimer les déclarations CSS dupliquées dans plusieurs fichiers
je cherche à supprimer les déclarations CSS dupliquées d'un certain nombre de fichiers pour faciliter la mise en œuvre des changements. Est-il un outil qui peut m'aider à le faire?
en ce moment je suis confronté à quelque chose comme ceci:
styles.css
#content {
width:800px;
height:1000px;
background: green;
}
styles.game.css
#content {
width:800px;
height:1000px;
background: blue;
}
Et je veux que cela:
styles.css
#content {
width:800px;
height:1000px;
background: green;
}
styles.game.css
#content {
background: blue;
}
le nombre total de lignes dans tous les fichiers est bien supérieur à 10k, De sorte que les techniques qui reposent sur l'édition manuelle ne sont pas une option.
6 réponses
j'ai écrit un outil à cet effet appelé csscss. En prime, il s'intègre également avec Sass et moins. Tente le coup et dis-moi si tu as un problème avec github.
m'a aidé à nettoyer les sélecteurs - Utilisation CSS-extension Firebug pour voir quelles règles CSS sont réellement utilisées.
j'ai fait un outil nodejs pour aider avec ceci, il gère actuellement des fichiers uniques mais laissez moi savoir s'il aide ou de n'importe quelles améliorations, n'hésitez pas à le bifurquer et le prendre à un autre niveau aussi :)
ce système prétend faire cela: http://sourceforge.net/projects/cssmerge/?source=dlp
mais je n'ai pas pu le faire fonctionner.
voici donc quelques outils pour comparer les fichiers CSS. Il n'est pas aussi rapide qu'une solution automatique, mais rendrait plus rapide que de passer par comparaison visuelle seul.
vous pouvez utiliser W3C CSS validator pour supprimer les doublons des propriétés. Téléchargez le fichier css en cliquant sur Télécharger Fichier par fichier et cliquez sur vérifier, puis allez dans la partie Avertissements où vous pouvez voir les propriétés dupliquées répétées. Ensuite, vous pouvez supprimer vos doublons par aller en ligne spécifique dans le fichier.
URL :http://jigsaw.w3.org/css-validator/#validate_by_upload
probablement la chose la plus proche de ce que vous recherchez est un préprocesseur css et des importations css. J'aime MOINS: http://lesscss.org/
je voudrais faire quelque chose comme
styles.css
@site-width: 800px;
@site-height: 1000px;
#content {
width: @site-width;
height: @site-height;
background: green;
}
styles.game.css
@import url("style.css");
#content {
width: @site-width;
height: @site-height;
background: blue;
}
EDIT: j'ai en quelque sorte oublié que vous n'avez même pas besoin de moins du tout, ou la hauteur et la largeur dans les styles.jeu.css
Il suffit de regarder comme
styles.game.css
@import url("style.css");
#content {
background: blue;
}