Preface
A story:
Do you know normalize? What's the difference from reset?
Interviewer asks, I make it up (actually didn't know at the time, but the literal meanings of the two words are actually quite clear)
1. reset
reset: reset, zero out
Most brutal way:
* {padding:0; margin:0;}
Strip all tags bare. body, h1-h6, div, article and a bunch of originally different tags, now look exactly the same, only remaining name as last dignity
Of course, there are gentler (longer) ones:
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}
ol,ul{margin:0; padding:0;}
Gentle reset principle is: only remove what needs to be removed. For example div originally has nothing on, still stripped once, this is inhumane
Style structure containing reset might be like this:
reset.css // Remove all default styles
common.css // Public styles maintained by project
page.css // Styles needed by business (cannot be reused)
Import in order, use below to override above. So a style property may go through layers of rewriting before showing final appearance to user, there's redundant reset problem: if some style is destined to need customization support, then it will definitely be overridden by later css, no need to first strip bare with reset, right?
2. normalize
normalize: normalize, make normal, standardize
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
normalize does several things:
-
Keep useful parts of browser default styles
-
Simultaneously ensure cross-browser consistency (fix problems in various browsers that don't comply with W3C standards)
-
Set default values in appropriate places
normalize is patch nature, unlike reset which is destructive, for example normalize.css source:
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
Here through front-end solution fixed browser existing style problems, simultaneously considered low version browser compatibility, here tends to "standardization". Additionally, also has "normalization" side:
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
Seniors have already interpreted source code, please check About CSS Reset Those Things (2) Normalize.css Source Interpretation
3. Differences Between normalize and reset
A joke:
CSS Reset is revolutionary party, most radical faction in CSS Reset advocates regardless of whether you kid is useful or not, all take off that clothes for me, why does your body wear a circle of margin at birth, why does your surname h eat fatter than others, why does your ul wear a bracelet of beads. So *{margin:0;} etc movements, flattened them all. Seems like all beings are equal, actually wasted resources and got no benefit, when need to ask them still have to humbly add back, what if really need their default styles? They already threw pot into furnace and burned it, figure it out yourself.
Normalize.css is reformist party. They advocate, each element has its reason for existence, simple and crude treating equally is not good. That circle around body indeed squeezes page survival space, then change it. Scholars, farmers, craftsmen, merchants, each has their role, make them a specification, ensure they do their job well in any browser.
From Zhihu Code-writing Joke Master's Answer
reset Characteristics
Goal: Force all browsers to perform consistently
Remove most default styles from browsers, ensure common, page etc style lower layer is neat and unified initial performance
So general meaning reset is destructive, strip all bare
Mainly exists 2 problems:
- Redundant reset, affects performance
Whether wrong reset (doesn't need), or reset that will definitely be overridden at upper layer (no need), both increase style file, affect rendering performance
Easy to kill wrong, also easy to let go. Precise high-performance reset? Very difficult to implement, even doesn't exist (except FF, Chrome, Safari, there's a bunch of xx browsers, who knows what its default style is)
- Grouping lacks semantics, difficult to maintain
reset's classification of tags doesn't consider semantics, only focuses on default performance
Consequence is debugging tool views certain element, focus on certain property, chase down layer by layer, finally see a long string of unrelated tags bound together, applied one or two rules
As for performance, before becoming problem isn't problem. According to rumor * {padding:0; margin:0;} impact on rendering is only 2ms, if really like this, then no need to think much, directly strip all bare is best. Because compared to more complex (longer, more humane) reset brought negative impact (increased style file), 2ms during rendering is smaller than sesame seed
Maintenance problem, actually still points to precise high-performance reset, if reset is just right, style problems should be unrelated to reset, if debugging finds need to chase down lower layer, shows reset isn't good enough
"Can't we not reset?"
"Of course not, if not reset, so many browsers, who knows what strange default styles there might be, front-end should have 1px persistence, precisely restore design draft"
Actually think carefully, why do we need reset? Just because everyone is using it?
Indeed many reset styles will never be used in business (old antique legend, fieldset and new semantic tags aside, section for pure mobile pages are almost not needed), truly useful commonly used might just be body {margin: 0; }, others either need complete rewrite when used, or never used
So several years ago sparked a no reset movement, later welcomed normalize... but answer is what exactly?
normalize Characteristics
From source can discover normalize is just like a patch, makes browser default styles more "normal":
/* 1.Style patch, patch browser differences, make performance close to standard */
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/* 2.Minimal reset */
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
Similarly, through source can also discover it's not reset's replacement:
-
reset is like steamroller, after driving over road surface is very flat
-
normalize is like asphalt, fills cracks, small pits on road surface
But, do we need this layer of asphalt? Just because Bootstrap uses it we have to use it?
For pure mobile pages, 98% of styles in normalize are not needed, coincidentally, useful few lines might still be:
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
Of course, Bootstrap needs to simultaneously support PC and mobile, adapt large screen small screen, a framework introducing these compatibility codes is naturally correct, more robust
But our applications may really not need normalize, even if need, might only need to take truly usable 30% from it, rest should be according to business characteristics, remove some ugly default styles (such as table), then insert base styles, avoid setting these things in every page, then finally produced this css is called——base.css
4. CSS Three-Layer Structure
- base: Basic styles
Site-level, most basic, most universal styles, different style different content sites can share base styles
base is atomic, cannot be further divided, such as good compatibility flex, clearfix etc.
reset and base parallel, as basic style components, of course, can also put simple reset in base layer
- common: Universal styles
Module-level, custom style modules, can be reused by various pages
Provide more complex style modules on base layer foundation, such as calendar, popup etc.
- page: Page styles
Page-level, styles that don't need to be reused
For specific pages, add unique styles, such as specific color values, fonts, hacks etc.
Reasonable layering can effectively improve style reusability, can change final style through simply rewriting certain style rule in lower layer at high layer; Additionally can improve style maintainability, each layer has clear division of labor, new styles find corresponding seat, html achieves final styles through class combination method
base layer and common layer should be managed and maintained by very few people, won't change frequently, but can be extended, developers directly complete page layer styles against UI design draft, implement visual effects, when writing page layer styles can also organize according to three-layer structure, for example:
/* base */
body {
background-color: #eee;
}
h1 {
border-bottom: 1px solid #ccc;
}
/* common */
.panel {
border: 1px solid #ddd;
}
.line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* page */
h1 span {
border: 1px solid red;
border-raduis: 3px;
}
.panel .line {
line-height: 1.5em;
}
5. Summary
reset? normalize? Need it? Don't need it?
What's tailored for business is best, streamlined, efficient
Reference Materials
-
About CSS Reset Those Things (1) Historical Evolution and Normalize.css: These 4 articles are all good, after reading can consider cutting open Normalize.css
-
What's the Difference Between Normalize.css and Traditional CSS Reset?
No comments yet. Be the first to share your thoughts.