CSS Reset

Why do I use this as the base CSS for any project?

The jargon that you will find for this practice on the internet is CSS-Reset.

CSS Reset is the standard-practice of setting CSS values to a baseline so as to prevent cross-browser inconsistencies. By giving values a baseline, you will prevent them from reverting to your browser-defaults.

Base code

Properties break-down

*, ::after, *::before { margin: 0, padding: 0; box-sizing: inherit; }

• The first part involves setting all default margin(s) and padding(s) to 0. All browser-added margins and paddings are removed. This is especially helpful for beginners: when I started out, I just couldn't figure where the extra space was coming from!
  
  
• The pseudo-elements have specifically been selected because the wildcard * selector covers only elements, pseudo-elements have to be specifically selected to ensure the reset applies to them as well.
  
  
• As far as 'box-sizing: inherit', let's just keep it as it is (we will revisit it shortly).

html { font-size: 62.5%; }

Let's break this down point-by-point.

• I mostly prefer using 'rem'(s) as my unit of choice to ensure responsiveness in web pages. How much does 1 rem equal? 1 rem equals the root-font size of the page.
• What is the root-font-size of most browsers today? It is 16px. So 1 rem usually equals 16px.
• The size(in px) that I prefer to have as my base is 10px. So we want to specify 10px in terms of rem(s). 1 rem equals 16px so 62.5% will equal 10px.
• Why not specify the font-size directly as 0.625 rem? Using percentages will allow the font-size to scale up and down if the user changes the font-size of the page.
  If we set the font-size as 0.625 rem, this will override the users ability to change the font-size of the page and hamper accessibility for users who might be visually challenged. Remember, accessibility is a very important part of modern web design.
• It's okay to feel slightly confused here as font-size in CSS is a separate topic in itself. Read up about rems, ems, percentages and pixels if you are feeling slightly dizzy after going through the calculations above.

body { box-sizing: border-box; }

• The box-sizing property defines how the width and height of elements is calculated.

• box-sizing: border-box ensures that the width and height of elements includes padding + border + content.
  Without it, if for example's sake you add a padding-right of 10px to your element of width: 100px, the total width of your element will be 110px instead of 100 px. With it, the width will remain 100px and the padding will be part of the defined with.

• Now, to revisit our first block where we used the wildcard * selector and set box-sizing to inherit:
  
  Let's say we wanted a particular element (say div) inside our body to have box-sizing as content-box. Every element inside that div will be expected to inherit the property of it's parent i.e box-sizing: content-box.
  
  If we set box-sizing: border-box directly with the wildcard * selector, the div would have box-sizing: content-box but because of the wildcard * selector, every child element would have box-sizing: border-box.

Additional Points:

• This is the version of CSS-Reset that I use. There is also a school of thought according to which you should limit the use of the wildcard * selector as it will slow things down. However, browsers these days are extremely performant and I haven't seen much difference in performance, if at all.

• Here is an article which corroborates my point with some experimental results: levelup.gitconnected.com/the-css-universal-..

• There are other CSS resets which specify commonly used elements instead of using the wildcard * selector, you can look them up on the internet.

That's all about CSS Resets!