"But there are all kinds of inconsistencies, some more subtle than others. Headings have slightly different top and bottom margins, indentation distances are different, and so on. Even something as basic as the default line height varies from one browser to another—which can have profound effects on element heights, vertical alignments, and overall feel."-Eric A. and Kathryn S. Meyer.
The basic reason is that all browser is all browser such as Safari, Chrome, and FireFox. Has defualts for each, but none of the browsers have the same defaults. Such as differnt headings, margins, and so on. This why so many people were looking for a solution. Many peopleusally put zero out on the ir padding and margin for a universal selctor for css. But unfortuanly that does not mean all elements will have their paddinga and magin zero.
"For a long time, I used Eric Meyer's famous CSS Reset(opens in new tab). It's a solid chunk of CSS, but it's a bit long in the tooth at this point; it hasn't been updated in more than a decade, and a lot has changed since then!"-Joshua Comeau
These days, browsers don't have massive discrepancies when it comes to layout or spacing. By and large, browsers implement the CSS specification faithfully, and things behave as you'd expect. So it isn't as necessary anymore.
Josh said it's not necessary to strip away all the browsers defulat. He said he probably wants and should use < em > tags to set font-styles: italic. You can always make differnt design decisions in individual project styles, but there is no paont in stripping away common sense defulats. The bottom line is Josh's reset is smarter, and is simpler. But it also acknowleges that browsers consistency has improved while addings solutions for modern CSS challanges that really didn't exist in the year 2007. It's less about earasing all the deulats but more fixing them.
Josh Comeau's "A Modern CSS Reset""Using a well-crafted set of global CSS reset styles enables designers to make assumptions about the defualt behavior of browsers. These presentational assumptions greatly simplify the process of creating a “universally” consistent CSS design using only one set of CSS rules. Such process simplification results in great savings of time and money. Many of the industry’s top designers have been using CSS reset styles for years, reaping the rewards and sharing the results."-Jeff Starr
Jeff Starr shows that Tthere's no single "correct" approach to CSS resets—instead, developers choose methods that align with their workflow, project requirements, and personal preferences. But there is a differnece is what developer approch when using CSS reset. There are really two differnt types of approches. Thise include agressive reset and gentle normalization. For "Agressive Reset" which really mean using a universal selectro such as margin: 0; padding:0; and Eric Meyers CSS reset which is completely reseting the whole CSS. While the philosophy: Start with a blank slate, build everything from scratch."Gentel Normalization" is where you perserve the normalize defaults and fix the inconcistencies. The Philosophy: Work with browser defaults, fix the broken parts.
The author makes the case that preventing unexpected text inflation is exactly what CSS resets should handle — it's a subtle browser behavior that's easy to miss during testing but can negatively impact your design.
I find it interetsing that what this author/develper wanted you to do is just to add text-size-adjust to your CSS. Their CSS reset is super simple but not sure is affective.
Souce #2Andy Bell's "(more) Modern CSS Reset" provides an updated to his old CSS Reset, he approach to normalizing browser styles that balances modern best practices with accessibility. The reset includes essential fixes like preventing font size inflation on mobile devices, removing default margins using logical properties for better internationalization, and setting sensible typography defaults with generous line heights for body text and tighter spacing for headings
I feel like his CSS is vcery resonable and would use with in my own CSS. He appreciate that he said you should start creating your CSS Reset is by "take bits you like from ones you find on the web and create your own."
Souce #3Elad Shechter's "Normalize CSS or CSS Reset?!" shows a hybrid approach to handling browser inconsistencies, arguing that developers shouldn't choose between Normalize CSS and Reset CSS but instead use both strategically. He characterizes Normalize as a "gentle solution" that preserves useful browser defaults while fixing inconsistencies, and Reset as an "aggressive solution" that completely wipes all styles but creates ugly selector chains and debugging nightmares.
I find this very intertsing to use a hybrid style using both "Agressive Reset" and "Normalize Reset." I belive it's a smart approch but I haven't seen many people/developers use this as an approch for their CSS Reset.
Jeff Starr's "Killer Collection of CSS Resets""Historically, the main goal of a CSS reset has been to ensure consistency between browsers, and to undo all default styles, creating a blank slate.
There’s a lot of differences compared to Josh’s version and Eric’s version. Josh has developed one for the modern age and is much easier to use on browsers. There is a lot that Josh talk’s about compared to Eric.
Eric removes all the default styling including the semantic meaning. While Josh keeps defaults. He only remove the inconstant stylizing from the css. Another, difference is box-sizing. I think this one is pretty import for css. Eric never mentions any box-sizing. While Josh uses box-sizing: border-box and everything. Which he says is a must have on modern CSS.
The last example of why would should be looking at Josh’s version over Eric’s is Accessibility and Modern Features. Eric focus on the visual constancy and appearance. While Josh adds more to it. Such as line-height: 1.5, text-wrap: balance, and text-wrap: pretty. Which gives for better typography. He also applied code interpolate-size: allow-keywords; which allows for modern animations to happen.
rel="stylesheet" href="your-styles.css">
CSS @import: @import url('reset.css'); at the top of your main stylesheet (less performant)
Inline at stylesheet top: Paste reset code at the beginning of your main CSS file.
A CSS boilerplate is the baseplate for the CSS. This includes the reset and normalized stylesheet. It also includes base typography. Such as fonts, wights, and size. This can also include things such as line height. Has the basic layout structure. Such as for grid or containers. The last thing that can be included in the CSS boilerplate is utility fixes and maybe common components.CSS reset is where either removes/normalize browser defaults.
There are pros and cons to using a bolder plate.
What this means is really removes all browser defaults. Which creating a completely neutral baseline. Which than cuases you to define everything. Which then results in < h1 > to look identical to < p >.
This wher you perserve the defualts or really the useful defualts. You usally only fix the inconsistencies. While also maintaining the semantic HTML styling. Which then results in < h1 > to look like a heading instead of < p >.