最好的CSS重置样式表

WebFX总统。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

将CSS重置为基线属性值有助于在浏览器呈现HTML元素的方式方面获得控制、可预测性和一致性。要更详细地了解CSS重置,请参阅以下文章:

如果您正在寻找样式表来帮助您重置你的CSS在我看来,这些是你目前的最佳选择:

CSS重置

CSS重置Eric Meyer的Reset CSS——这个样式表使CSS重置成为主流。Reset CSS要么通过将默认CSS属性设置为0来使其无效,要么将属性设置为一个常识性值(例如,行高:1身体< >元素)。显式声明某些CSS属性值可以帮助减少浏览器呈现HTML元素方式的不一致。

相关:注意Reset CSS上一次更新是在2011年。我们将要讨论的许多CSS重置样式表已经有一段时间没有更新了。

HTML5重置样式表

HTML5重置样式表Richard Clark的这个reset样式表是对Eric Meyer的reset CSS的修改。这次CSS重置是为了适应现代HTML 5元素。在HTML5重置样式表中发现的其他调整是删除:专注伪类重置和使用属性选择器的目标<方法>< dfn >元素,使其样式规则的范围最小化。

CSS迷你重置

这是一个极简的CSS重置Vladimir Carrer。它只有四条CSS样式规则。它只重置最常使用的HTML元素——那些你将在你的web开发项目中实际使用的元素。

检查CSS迷你复位GitHub上

reset.css(从HTML5重置)

样式表的一部分HTML5重置样板。它的开始受到三个开源项目的启发:重置CSS、HTML5重置样式表和HTML5样板。这个重置样式表健壮而有主见。

例如,它具有特定的样式规则:在:在伪类,它设置box-sizing财产border-box,这是你其他选择做不到的。

马克思

马克思这个CSS重置是小型网站开发项目的样板样式表。对于简单的网站,比如单页网站,您很可能不需要使用Bootstrap这样的大型前端框架。在这些情况下,马克思是一个可以考虑的选择。

专门的CSS重置

这两个CSS重置样式表是特定于目的的:

Typeset.css

这是只针对Web排版的基线CSS重置。它适用于大量文本的网站和网页,如博客和新闻网站。注意,Typeset.css将只作用于那些是类元素的子元素的HTML元素排版

所以要实现Typeset.css,你需要做如下的事情:

< div class = "篇排版"> 

博文标题

我的博文。< / p > < / div >

Cleanslate

Cleanslate这个CSS重置样式表非常激进。它被设计用于将在另一个网站上发布的内容,在这种情况下,你对样式规则的控制是有限的。Cleanslate使用一个重要的!声明,以强制浏览器不遵循正常的级联和CSS特异性规则。

当涉及到改写第三方网站的样式规则时,这给了你一个战斗的机会。

CSS标准化:一个现代的选择

现在的浏览器非常擅长设置适当的默认样式。此外,他们现在遵守现代标准和最佳实践。默认样式现在更加可预测和一致。

因此,我们不必对所有默认的浏览器样式进行全面重置,而是可以只关注在不同浏览器中没有统一呈现的特定HTML元素和CSS属性。我们保持其他有用的浏览器默认值。这就是CSS规范化背后的主要思想。

换句话说,对于没有样式的HTML元素,我们隐式地让浏览器或规范化样式表为我们设置样式规则。这样,如果我们忘记或没有为元素分配样式规则,它们仍然会在不同的浏览器中呈现可预测的和一致的。CSS规范化的一个好处是它保持了样式表

我们没有将HTML元素的属性值重置为0,只是用另一种样式规则覆盖级联更下方的属性声明。相关:你应该重置你的CSS吗?下面是两个最常用的CSS标准化样式表:

Normalize.css

Normalize.css这个流行的CSS规范化样式表在Twitter和GitHub等主要网站中使用,并且是Bootstrap和HTML5 Boilerplate等大型开源项目的依赖项。css是这一切的开始。

sanitize.css

sanitize.css此CSS规范化样式表由Jonathan Neal编写,他是Normalize.css的合著者。css具有样式规则,可以帮助您在不同的浏览器中一致地呈现HTML元素。这个规范化样式表有一个Sass版本,许多开发人员会喜欢这个版本。

进一步的阅读

相关内容

雅各Gube是Six Revisions网站的创始人。他是一个前端开发人员。与他联系推特

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!