Table Of Contents
A modern CSS reset.
Last Tended | |
---|---|
Planted | |
Status | Seed |
Code
To me, the purpose of a CSS reset is to define baseline styles. A blank canvas. This reset was adpated from Josh W. Comeau's. The main difference stems from this comment:
”
I also don't believe it's necessary to strip away all of the browser defaults. I probably do want <em> tags to set font-style: italic, for example! I can always make different design decisions in the individual project styles, but I see no point in stripping away common-sense defaults.”
From my perspective, it's best to strip away all defaults. I consider the CSS Reset as a global. In my experience, the effect of globals should be minimized, or totally avoided where possible. It's harder to understand a file effected by globals compared to 1 that isn't. Because there is no indication within the file that the global is effecting it, you can easily forget it's there. Then you get stuck questioning why your file isn't behaving like it's coded. I don't see a significant advantage to making the CSS Reset an exception to this rule.
/reset.css
Changes from Josh's CSS Reset
- Set
padding: 0
to all elements. - Add
overscrollBehavior: none
tobody
. - Added
strong
to typography elements & setfont-weight: 400
. - Added
iframe
to media elements. - Removed
line-height
rule. In most circumstances, Capsize would be responsible for typography vertical space. - Removed
max-width
from media elements. - Removed
font: inherit
from form elements (as I'm not defining a global font to inherit from). - Set
text-size-adjust: none
to prevent mobile browsers increasing font-size. - Set
text-decoration: none
to anchor elements. - Set
list-style: none
to list elements. - Set
border: none
to input elements.