I'm a Systems Reliability and DevOps engineer for Netdata Inc. When not working, I enjoy studying linguistics and history, playing video games, and cooking all kinds of international cuisine.
This the first mistake I see devs usually making. They keep shifting between their editor and browser. Not only is this counterproductive, it is also frustrating as hell. Here is a fun fact: I write 90% of my CSS code in Devtools and it's freakishly fast. Devtools are so powerful that you just need to go to editors to write your HTML skeleton.
I'd argue that whether this is a good idea or not really depends on your workflow. Whenever I'm actually updating CSS for any of my projects, I've got multiple browsers open (usually at least Chrome and Firefox on the desktop, and often Chrome on my phone too) with all of them getting reloaded after each change so that I can see right from the beginning if everything looks right, and DevTools isn't exactly good for that type of workflow. Also, it kind of falls apart if you aren't writing vanilla CSS (say, you're using SASS or LESS).
I agree, but I think it helps beginners a lot while working only in Vanilla CSS. I think there are few tools though, using which you can edit SASS in DevTools. 🤔
I'd argue that whether this is a good idea or not really depends on your workflow. Whenever I'm actually updating CSS for any of my projects, I've got multiple browsers open (usually at least Chrome and Firefox on the desktop, and often Chrome on my phone too) with all of them getting reloaded after each change so that I can see right from the beginning if everything looks right, and DevTools isn't exactly good for that type of workflow. Also, it kind of falls apart if you aren't writing vanilla CSS (say, you're using SASS or LESS).
I agree, but I think it helps beginners a lot while working only in Vanilla CSS. I think there are few tools though, using which you can edit SASS in DevTools. 🤔
If you use grunt to compile, you can have it generate source maps which webkit/blink inspectors will show in the style pane.