# 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: https://levelup.gitconnected.com/the-css-universal-selector-is-slow-and-should-be-avoided-yet-another-lie-eb4d15f4c320
- 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!