Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics (retired) Speeding up Workflow with Sass Importing Files

Santiago Enciso
Santiago Enciso
17,789 Points

Is reset css the same thing as normalize.css?

can I use the normalize.css to reset all the defaults?

3 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points

Hi, Santiago. While similar, the two are quite different in terms of their end results.

Normalize will attempt to do just that: normalize markup so that it appears consistent across all browsers. It keeps things like bullets for lists and some margin and padding, but tries to make these consistent across browsers.

Reset, on the other hand, will reset everything. It gets rid of all margins, eliminates bullet points, removes all font sizes from things like heading elements, and more. It is more of an aggressive reset than normalize and really will give you a blank slate.

Personally, I prefer normalize as it will keep things intact that we expect (like different font sizes for heading elements, etc.), but it comes down to personal preference.

Santiago Enciso
Santiago Enciso
17,789 Points

That definitively clears things up :)

Thanks Ryan!

Steven Ventimiglia
Steven Ventimiglia
27,371 Points

You can use them both, just make sure you look it over and practice the DRY method (Don't Repeat Yourself). I've started using Sass, love it, and import "_normalize.scss", and well as "_reset.scss".

Normalize is quickly becoming the industry standard in bringing all browsers to a neutral zone when it comes to the way they've all translated certain elements... and then your reset can make those elements appear as you'd prefer them to. Such as setting the default list styles to none, as well as removing any margins from headers.

I feel it's important not to add custom code to normalize since there's a specific function to it, and you should be able to update it without any issues. It's also small enough that it doesn't intrude. Then, you can play with a reset, and trim it according to the elements you use.

Santiago Enciso
Santiago Enciso
17,789 Points

Awesome, glad to know you can actually import both of them.

My first impression of Sass was a little skeptical but now I love it too! And it looks like its evolving pretty quickly.

Thanks Steven!

Steven Ventimiglia
Steven Ventimiglia
27,371 Points

I also highly-recommend Codekit (for Mac users) or Prepros (for Windows or Linux). For $30, they're awesome tools for web development. Add any project folder, then they both automatically watch your files for any changes and processes whatever needs to be.

I love the command terminal. but this will literally "watch" sass for you, as well as refresh any and all browsers when you save a file in the project. I keep up IE, Firefox, Chrome, and Safari, size Chrome so it gives me mobile and tablet layouts in profile and landscape; have them on a Macbook, a Linux-based laptop and Windows 7 Ultimate on my desktop - as well as my TV when using HDMI on one of the laptops - and they both will refresh every single browser on every OS platform that's visible. Huzzah!

Nice, Steven. I always am looking for those applications that make my job that much easier.

The CSS Basics course goes over using Normalize and Reset.