- **Epistemic status:** #evergreen Web browsers all ship with default [[Cascading Style Sheets (CSS)]] that each website inherits by default. These styles differ on each browser and can create inconsistencies. There are two ways you can solve this problem: ## CSS Reset [CSS Reset](https://meyerweb.com/eric/tools/css/reset/) is a method where the styles in the browser are completely “reset”. The engineer would need to define all the base styles for their website or web app. Any styles that aren't redefined would be raw. The recommendation when utilizing a [[Cascading Style Sheets (CSS)]] reset is to use it as a starting point and truly understand what is being reset. ### Pros - This method can be useful for a fresh project because you can create the styles from the ground up and ensure consistency. ### Cons - Every element that is reset needs to be redefined, making your [[Cascading Style Sheets (CSS)]] a bigger file size - Bugs can appear if you remove the default behavior for an element and forget to style it, such as buttons - Some resets can be harmful for users who rely on keyboards for navigation - Clutters the development tools due to inheritance as seen in the next picture: ![[Pasted image 20221101100804.png]] - Doesn't contain extensive documentation ## Normalize.css [Normalize.css](https://necolas.github.io/normalize.css/) is a method in which the styles in the browser are normalized to the W3C standards that browsers should have. Any browser that has an inconsistency would be fixed. This also means that if a browser applies a style and there is no fix on it, that style is applied to the other browsers as well. ### Pros - Preserves defaults that are necessary across browsers,, reducing the [[Cascading Style Sheets (CSS)]] file size since you don't need to re-declare the styles for each element. - Doesn't clutter the debugging tools. - Follows [[Modularity]] standards - Offers extensive documentation - Fixes common bugs on older browsers - Method is useful for fresh and ongoing projects ### Cons - In certain cases, you will need to reset the styles because the code provided by normalize.css is not ideal --- ## References - “About Normalize.Css – Nicolas Gallagher.” Accessed November 1, 2022. <https://nicolasgallagher.com/about-normalize-css/>. - Craig, William. “Should You Reset Your CSS?” WebFX. Accessed November 1, 2022. <https://www.webfx.com/blog/web-design/should-you-reset-your-css/>. - “CSS Tools: Reset CSS.” Accessed November 1, 2022. <https://meyerweb.com/eric/tools/css/reset/>. - “Normalize.Css: Make Browsers Render All Elements More Consistently.” Accessed November 1, 2022. <https://necolas.github.io/normalize.css/>. - Phuoc, Nguyen Huu. “Normalize vs Reset CSS - This vs That.” Accessed November 1, 2022. <https://thisthat.dev/normalize-vs-reset-css/>. - “Reset Reasoning – Eric’s Archived Thoughts.” Accessed November 1, 2022. <https://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/>. - Shechter, Elad. “Normalize CSS or CSS Reset?!” _Medium_ (blog), August 4, 2019. <https://elad.medium.com/normalize-css-or-css-reset-9d75175c5d1e>.