{Carrer web log}

Don’t use CSS Reset use CSS Set

Wednesday, June 24, 2020 { 2 Comments }

CSS Reset is obsolete. It made sense 10 - 15 years ago when we had IE6, Opera, Firefox and they all behaved differently with very different HTML rendering engines. Making web sites back then was a nightmare, we first made it compatible with IE6 and after that we tested them in Firefox and other browsers. Most of the websites used HTML table tags to make the layout. CSS layouts with float were only for the bravest. For every IE browser we had a special layout hack, if the layout wasn’t px perfect it would brake. Probably the worst thing was that there were no browser profiling tools. So everything was based on trial and error.

In those chaotic times CSS Reset was born and it was loved by everyone. It served as a bridge gap between various browsers. Everyone used CSS Reset, it became so popular that people forgot why it was implemented in the first place. The main debate between web designers was what kind of CSS reset we should use. Advising against use of CSS reset was considered CSS blasphemy.

What is the purpose of CSS reset today, in the chromium dominated browsers market?

Just as a reminder, Chrome used Apple's open source WebKit browser engine to later create the Blink browser engine. So, Safari and Chrome have the same origins.

Chromium (Chrome, Edge, Opera, Brave, Vivaldi) + Safari have total browser domination. Firefox has only 8% market share in the desktop/laptop market.

In addition, the differences between Firefox, Chromium and Safari are negligible.

Conclusion: CSS Reset is obsolete.

What you may not know also, is that every browser has its own default CSS. So there’s no need to reset something that is already set with the default styling.

Let's take some random HTML element like H1 tag. Often we make the mistake to define the same element over and over. First H1 element is defined by the browser default CSS then it’s reseted in the CSS Reset and it’s set many times over before it's rendered.

My suggestion is to set the HTML elements once and try to stick with that setting. Always minimise the number of element settings and resettings.

Make your own default.css where you define colors, dimensions, round corners and all the important HMTL elements that you are planning to use. If you do not plan to use the H6 tag or some form or table tags don’t put them in your defaut.css.

Here is my take on this problem:

It’s called Basic.css and it sets the common styles without resetting anything. It’s also ultra-light, at less than 1 Kb.

Take a look.

https://vladocar.github.io/Basic.css/