Comment apporter des modifications permanentes au CSS d'un site Web à partir du navigateur?
Si j'essaie de modifier une variable CSS dans un projet de grande envergure à l'aide des outils de développement intégrés dans Firefox (accessible par un clic droit puis en sélectionnant Inspect Element ), existe-t-il un moyen de rendre ces changements permanents?
En fait, il y a un grand nombre de feuilles de style et je ne peux pas localiser cette propriété en elles? Je ne pouvais tout simplement pas trouver le fichier contenant cette propriété. Je souhaite donc apporter des modifications permanentes au CSS à partir du navigateur. Y a-t-il un moyen?
MODIFIER:- 
Pour configurer dans Chrome, vous devez d'abord ajouter votre fichier de projet à un "Espace de travail". Allez dans les outils de développement Ctrl + Maj + I puis cliquez sur l'engrenage de paramétrage. À gauche, vous devriez voir Espace de travail.
Après avoir ajouté votre dossier de projet dans un espace de travail, fermez les options et cliquez sur l'onglet "Sources" (toujours dans les outils de développement).
Maintenant, chargez votre index.html de votre LocalHost comme vous le feriez normalement. Dans le panneau des sources, vous devriez voir la page actuellement chargée et ses ressources. Cliquez avec le bouton droit de la souris sur votre fichier .css, puis sur "Mapper sur la ressource du système de fichiers". Une boîte de recherche apparaît dans laquelle vous pouvez rechercher le fichier .css correspondant dans votre dossier de projet (qui fait maintenant partie d'un espace de travail dans Chrome). Une fois le lien créé, Chrome est suffisamment intelligent pour lier tous les autres fichiers CSS et HTML contenus dans votre dossier de projet.
Vous pouvez maintenant apporter des modifications dans l'onglet Éléments dans Chrome Dev Tools. Ces modifications seront conservées. Également dans l'onglet ELements, il vous montrera quel fichier css et quelle ligne provient d'un style donné!
La meilleure chose à ce sujet est que si vous utilisez Sass ou Less, vos fichiers Scss seront ensuite mappés aux styles CSS en cours de traitement dans Chrome. (notez que si vous utilisez Sass et Less, vous devez activer les cartes source CSS)
Vous pouvez utiliser la barre d'outils de développeur Web à cet égard. En allant dans le menu CSS, puis sur "Modifier le CSS" où vous pouvez modifier et enregistrer vos modifications. Il fournit également des outils pour identifier les fichiers pertinents et les modifier manuellement. Vous pouvez aussi essayer l'extension Firebug où vous pouvez faire des choses similaires. Liens vers les deux ici:
https://addons.mozilla.org/firefox/addon/web-developer/
https://addons.mozilla.org/firefox/addon/firebug/
Si vous avez installé Firebug, vous pouvez installer cssUpdater pour simplifier le processus d’enregistrement des modifications.
Si vous ne voulez pas le faire à la main, il existe un plugin pour FF appelé Stylish qui vous permet de définir des réglages de style basés sur des règles.
MODIFIER
Je mentionne cela uniquement parce que cela vous permet de publier un ensemble de modifications de style que tout client Firefox peut récupérer et installer sur une installation spécifique. Comme il est impossible de modifier "de manière permanente" le contenu des informations de style distantes, la seule solution consiste à le manipuler de manière semi-permanente sur chaque agent utilisateur nécessitant des modifications.
Vous pouvez jeter un oeil à userContent.css:
http://www-archive.mozilla.org/unix/customizing.html#usercss