我考虑并喜欢非常无聊的CSS东西，说实话，这可能比我应该做的要多得多。这些年来，我可能花了太多时间思考的一件事是CSS重置。
在这个现代的Web开发时代，我们真的不需要繁琐的重置，甚至根本不需要重置，因为与旧版IE 6天相比，CSS浏览器兼容性问题的可能性要小得多。那个时代就是诸如normalize.css之类的重置出现并为我们节省了所有的麻烦。那些日子已经过去了，我们可以相信我们的浏览器的行为更多，所以我认为像这样的重置可能大部分都是多余的。
重置默认默认
我仍然喜欢重新设置内容，因此多年来，我一直以沉迷于代码高尔夫的方式缓慢而不断地修补自己。我将解释其中的内容以及原因，但在此之前，这里是全部内容：
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default padding */
ul[class],
ol[class] {
padding: 0;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
/* Set core body defaults */
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
list-style: none;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img {
max-width: 100%;
display: block;
}
/* Natural flow and rhythm in articles by default */
article > * + * {
margin-top: 1em;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}分解固定链接
我们从盒子大小开始。我只是将所有元素和伪元素重置为使用box-sizing: border-box。
*,
*::before,
*::after {
box-sizing: border-box;
}有人认为伪元素应按inherit大小调整大小，但我认为这很愚蠢。如果要使用不同的框大小值，请明确设置它-至少无论如何我要这样做。我在CSS From Scratch上写了更多关于框大小的文章。
/* Remove default padding */
ul[class],
ol[class] {
padding: 0;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}调整大小后，我对margin和进行了全面重置，并padding根据浏览器的样式进行设置。这一切都是不言自明的，因此我不会过多地讨论它。
我将在列表中提及这种情况。我只选择确实具有class属性的列表，因为如果使用纯文本<ul>或<ol>使用它，我希望它看起来像一个列表。许多重设，包括我以前的重设，都积极删除了。
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}接下来：身体样式。我真的很简单。<body>即使将其填充为空白，这对于填充视口也是很有用的，因此我可以将设置min-height为100vh。我也喜欢平滑的锚点滚动，所以我也进行了设置scroll-behavior: smooth。
我只设置了两种文字样式。之所以将设置为line-height，是1.5因为默认值1.2不足以容纳可访问的可读文本。我也设定text-rendering为optimizeSpeed。使用optimizeLegibility可以使您的文本看起来更好，但可能会遇到严重的性能问题，例如30秒的加载延迟，所以现在尝试避免这种情况。我有时确实将其添加到显微部分。
ul[class],
ol[class] {
list-style: none;
}就像边距和填充规则一样，我仅list-style在列表元素具有class属性的地方重置。
a:not([class]) {
text-decoration-skip-ink: auto;
}对于没有类属性的链接，我设置为text-decoration-skip-ink: auto使下划线以更易读的方式呈现。这可以在全局链接上设置，但过去对我造成了一两个冲突，因此我将其保持为这种状态。
img {
max-width: 100%;
display: block;
}好的ol’流畅的图像样式紧随其后。我将图像设置为块元素，因为坦率地说，对于在底部出现的怪异缺口来说，寿命太短了，而实际上，图像（尤其是我所做的工作）往往表现得像块。
article > * + * {
margin-top: 1em;
}我真的很喜欢这个CSS技巧，终于勇敢地将其添加到重置中。镂空猫头鹰选择器针对商品的直接后代，并1em为它们增加了上边距。这给流动内容提供了坚实的节奏。实际上，我.flow现在在每个项目中都使用了实用程序。您可以在24 Ways上阅读有关它的更多信息。实际上，我认为这是我最近使用最多的CSS。
input,
button,
textarea,
select {
font: inherit;
}我终于足够勇敢地将其设置为默认值的另一件事是font: inherit在输入元素上，它是速记功能，完全可以满足锡盒上的要求。不再有微小的文本（在某些情况下为单声道）！
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}最后，绝不是最不重要的是@media，如果用户喜欢减少运动量，则可以通过单个查询来重置动画，过渡和滚动行为。我喜欢在复位时使用特异性胜过 !important选择器，因为现在很可能，如果用户不希望运动，则不管跟随此复位的CSS是什么，他们都不会得到。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/259404.html