Does Compass reset utility overwrite normalize.css and HTML5 boilerplate?

Question

So I'm making a website using Middleman, which I'm trying out for the first time, and just getting my teeth into Susy and Compass, which I plan on using with it. I am not familiar with these tools and was curious if anyone knew whether the reset utilities Compass provides cascade over any of the CSS rules from HTML5 Boilerplate (mainly those from normalize.css). Does anyone know?

Answer 1

The reset included in Compass style is the Eric Meyer's one (version 2.0).

I'm not familiar with HTML5 Boilerplate. Although I know they are a set of good practices, I've never seen myself on need of using it. I like to build my own boilerplates.

After reading the source code of normalize.css and the Eric Meyer's reset I found you will have some colliding rules.

I'd say that if you're interested on keeping normalize.css over the reset mixin just include normalize.css after it.

Answer 2

You choose whether to use compass/reset or normalize.css. Using both at the same time does not make sense. The reset basically sets the same properties on all elements, then you add your styles on top. What normalize does is that it only sets the properties that vary between browsers to one common set. The difference becomes obvious with elements like <strong>, <em> or <ul>: Using reset, they will just be “plain” text. No list indicators, no paddings, no margins, no bold, no italics. Using normalize, they will look as you would expect them to look: bold, italicized, like a list, etc.

When using normalize.css, you can either use the compass normalize plugin or just download normalize.css and @include it at the top of your SCSS/Sass file. Then, don’t include compass/reset.