CSS: Normalise vs Reset

We normally think about CSS in terms of the author style sheets (the CSS written inline in the HTML style tags, or placed in the head of the HTML or linked to the HTML document via an external CSS file). There is also a user agent style sheet applied first (this is the browsers own CSS file). The accepted answer to this StackOverflow question links to the user agent stylesheets for the different browsers.

CSS is applied in the following order:

  1. Declarations in user agent style sheets (e.g. the browser’s default styles, used when no other styling is set).
  2. Normal declarations in user style sheets (custom styles set by a user).
  3. Normal declarations in author style sheets (these are the styles set by us, the web developers).
  4. Important declarations in author style sheets
  5. Important declarations in user style sheets
    (Mozilla, 2017)

Even leaving the implementation of the CSS standards aside, each browser has its own style sheet. Disparate tools known as ‘CSS resets’ (which is a slight misnomer as they do not always ‘reset’ the CSS) are available online from various authors:

Mini Reset CSS
Sanitize.css
Typeset.css
Cleanslate.css
HTML5 Reset Stylesheet

The two I’m going to focus on are Nicolas Gallagher’s normalise.css (2017) and the Eric Meyer built meyerweb reset (2017).

The idea of both tools is to give a common starting point, but they achieve it in slightly different ways (which have their own pros and cons).

The starker changes are made by the Meyer approach. Essentially the idea is to strip away all browser formatting on elements and therefore remove the browser’s default styling from consideration – creating a baseline from which to start styling. The reset removes ALL formatting, resetting most margins to zero for example. The result is that all elements have no default styling. A good example of this is the heading tags h1-h6. After the Meyer reset is applied h1-h6 look exactly the same, all styled identically, and any changes in font size or emphasis (or any other styling) will need to be added by the developer in the author style sheets.

Normalise is a slightly different approach that attempts to make the various browsers display consistent output from the same code. The changes are less severe and the idea is that you build on elements that have a useful amount of styling applied e.g. h1-h6 keep their size differentials and margins. I suppose the aphorism that fits is ‘not reinventing the wheel’.

Nicolas Gallagher puts forward his arguments for his normalise.css creation here and this page discusses the pros and cons of using a CSS reset.

For my project i am going to use Normalise. This is because I am already familiar with the Meyer Reset and use it frequently. In the interests of learning I’m going to try using the Normalise approach. I am just going to link multiple stylesheets – keeping ‘Normalise’ as a base (not a black-box of no-touchy, as the author eloquently puts it) but a solid foundation that can be edited if required. Then I will apply a ‘main’ stylesheet (in the interests of minimising HTTP requests this will be a ‘monolithic’ (Stack Overflow) stylesheet), but the pages will require slightly different breakpoints for the grid – I could add extra CSS and make entire new grid areas for the contact or feature pages, but I think that splitting the breakpoints out into their own links is the best way.

I briefly considered using JavaScript to determine the page, then change the CSS downloaded accordingly.

 

https://meyerweb.com/eric/tools/css/reset/

https://necolas.github.io/normalize.css/

https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance


References

Please find all references here.

Leave a Reply