Get back default properties after applying a global CSS reset

Question

Some legacy code that I have to build upon, really makes me feel the cons of global CSS reset.

I have the old foo.css that starts with

* {margin:0; padding:0;}

and I used to copy it to a different file bar.css, tweak it too my needs (out with the CSS reset), and use it to replace foo.css only in the code I'm writing. I do this not to worry about backwards compatibility with the older sections of the site.

Now this is quite cumbersome: for global changes I have to remember to modify both files. So now my bar.css is extending foo.css, starting with:

@import url("style.css");

The problem is that now I also inherit the CSS reset.

Is there any way(†) to bring the margin & padding properties of some elements (headers, lists etc.) back to their default values -- the ones before the reset was applied?

(†) other than manually setting every property back to its initial value, as defined in the CSS specs.

Answer 1

There’s the proposed value initial for setting a property to its initial value, without finding the explicit value. But it’s still very much draft-stage and hardly implemented in any browser.

Moreover, that’s probably even not what you’d like to achieve. If I understand you correctly, you would want to set e.g. the top and bottom margins of h2 elements to the browser default value. I don’t think there’s even any proposed way of doing that in CSS. The specifications do not define the browser defaults. The initial value of, say, the margin property is 0. The reason why headings have top and bottom margin by default is that the browser applies, at least conceptually, a browser style sheet. The CSS specs suggest a default browser style sheet but do not mandate one, and browser may (and actually do) deviate from the suggestions.

In practice, the best shot in the given situation would be to check Appendix D of the CSS 2.1 spec and use the values given there. For things like margins, this would mostly create the effect of using browser defaults.

Answer 2

Rather than wishing you could revert back to the browser-defaults, why not just set your own?

All you would need to do is add your declarations under your global CSS reset:

* { margin: 0; }
h1 { margin: 10px 0; }

The h1 takes precedence over the global selector *.

This would help normalize your CSS.

Answer 3

I would think * {margin: auto} would reset margin (or h1 {margin: auto} if only that element is being reset.), but this will not work for padding. Technically, the spec is for padding to be zero already, however, if a browser implements it otherwise, I don't think there would be a way to reset it.