If you’ve ever found yourself in the loop of:
- Edit CSS
- Save CSS
- Reload page
- If you don’t see your change reload cache too just in case
- Wonder why the change didn’t work
- Repeat
If you found yourself editing a lot of CSS, you might wonder how to speed up that process. I have a suggestion for you.
You could auto-reload the page or use some kind of watcher so that your CSS changes are live immediately. But if you’re going to go that far, you may as well go the extra step and edit/test your CSS changes in-browser
Personally it’s embarrassing that it took me this long to start testing my CSS this way, and it may sound obvious to you, or, like me, you may face-palm yourself if not. Using the Developer Tools seems like the way to go.
Right click an element on the page you’d like to edit and click the ‘inspect element’ option that comes up. Both Firefox and anything running on Chromium have this so most modern browsers.
At this point you can edit any of the html directly (formatted and syntax highlighted for your convenience) in the pane in the right or any of the styles from your CSS in the pane to the bottom of that.
All relevant class, ID and element styles appear showing you their names, and even the file they’re loaded from. It even shows you which options are prioritized by specificity (or not prioritized more accurately, signified by strikethrough font).
Here’s me changing this very page’s text to yellow:
Now, you may already have an even more efficient process to do this, which is likely very similar. But the point is what usually works best in a scenario like this is some kind of live update. By editing the element in this fashion I can find out what I need to change in the CSS/HTML. I figure all programming should have some equivalent of this if possible.
Also here’s what editing HTML directly looks like for reference also:
No Responses