Which HTML5 reset CSS do you use and why? [closed]

by

Real talk: Despite the markdowns kaikai is right, you only need to reset *padding & margin to 0.

Though unfortunately 99% of us do not have resources or man power to keep up with the hundreds of browser versions out there. So a reset sheet is essential for the typical website.

html5reset: (It’s too interfering)

I just took a look at http://html5reset.org/

img,
object,
embed {max-width: 100%;}

And:

html {overflow-y: scroll;}

I understand it has good intentions but, that’s not the job of a reset sheet. It’s making too many assumptions.

BluePrint Reset:(literally a blueprint) 

body {
  line-height: 1.5;
  background: white;
}

Whats up with 1.5. And why background white?(I know it’s for correcting but still not necessary)

Normalize.css: (Not normal)

https://github.com/necolas/normalize.css/blob/master/normalize.css

It started good with some webkit/ie hacks but

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

Every header tag is targeted. & they don’t reset the line-height of the body.

I’m sure all the above does the intended job well, but will probably be overridden more than necessary.

Eric Meyer

YUI

HTML5Boilerplate

The above are more for pros with Boilerplate leaning to the (over friendly) side I’m sure due to popularity. At the moment 80% of my customized reset is boilerplate.

I’m going to go though all three bit by bit and make my own, it’s not rocket science.

More Related Contents:

  1. How to remove margin space around body or clear default css styles
  2. Align elements side by side
  3. Child inside parent with min-height: 100% not inheriting height
  4. Select elements by attribute in CSS
  5. How to prevent long words from breaking my div?
  6. How can I center into a div?
  7. Canvas has white space at the bottom and scrolls too far
  8. How to make a floated div 100% height of its parent?
  9. Disable webkit’s spin buttons on input type=”number”?
  10. How do I force a DIV block to extend to the bottom of a page even if it has no content?
  11. How to make fixed header table inside scrollable div?
  12. Align two inline-blocks left and right on same line
  13. Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
  14. Proper way to apply CSS to HTML5 custom elements
  15. blur of part of Background image with css
  16. Adjacent divs with angled borders? [duplicate]
  17. Two Divs next to each other, that then stack with responsive change
  18. Make HTML5 video poster be same size as video itself
  19. How to align a div to the top of its parent but keeping its inline-block behaviour?
  20. Using background-attachment:fixed in safari on the ipad
  21. Overflow to left instead of right
  22. HTML / CSS Popup div on text click [closed]
  23. Custom tags… why not?
  24. How to push a footer to the bottom of page when content is short or missing?
  25. Why box-sizing is not working with width/height attribute on canvas element?
  26. How do I make text bold in HTML?
  27. Center fixed div with dynamic width (CSS)
  28. Is it acceptable to use tables for forms? Or is it still more correct to use divs?
  29. Change an HTML input’s placeholder color with CSS
  30. Stacking DIVs on top of each other?

Leave a Comment