I have a dillema working with CSS. I use a pre-processor to add all necessary vendor prefixes to CSS when it's served, keeping my source code short and simple. However the issue is, by far the most effective way to to edit styles realistically (and see real-time updating of the page) is to use the web page's dev tools in whichever browser(s) you're currently testing, edit the CSS there, and copy/paste it to the source code after making significant changes. So then my CSS source code is full of vendor prefixes. Is there a simple solution to this? What solutions exist to solve this problem?
How do web developers deal with editing (pre-processed) vendor prefixed CSS in browser dev tools?
css
What you want is live/hot reload.If you use live reloading, as soon as you make and save a change to your css file, the tools will rebuild the final css and load the new version into the browser. No need to refresh, it just happens. That way you can make change and see quick feedback, just like if you had modified the dev tools in the browser. But your changes are already in your source (no need to copy back).How do to this depends on your the rest of your stack. But the chances are that whatever tool you are using to build your css: grunt/gulp/webpack/etc has addons to support livereload available. 