Working with older code that I must build upon always reminds me of the drawbacks of using global CSS resets.
I have this outdated foo.css file that begins with
* {margin:0; padding:0;}
In the past, I would duplicate it to a new file called bar.css, make adjustments (say goodbye to the CSS reset), and then use it instead of foo.css only in my current project. This was done to avoid conflicts with older sections of the website.
However, this method has become tedious as now I need to remember to update both files for any global changes. So, I decided to have bar.css extend foo.css, starting with:
@import url("style.css");
The issue now is that I am still inheriting the CSS reset from foo.css.
Is there a way(†) to revert the margin & padding properties of certain elements (headings, lists, etc.) back to their default values before the reset was applied?
(†) without manually resetting each property to its initial value as defined in the CSS specifications.