你应该重置你的CSS吗?

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

你应该重置你的CSS吗?这篇文章探讨了关于网页设计师和网页开发人员是否应该重置他们的CSS的争论,分享了一些网络专业人士的想法和观点。这是关于CSS重置主题的三篇系列文章。在讨论了丰富而有趣的CSS重置历史之后(第1部分)和浏览CSS重置样式表选项(第2部分),现在我们将在第3部分中讨论使用重置样式表的优缺点。

重置CSS的好处

网页设计师/开发人员和书籍作者Morten Rand-Hendriksen是一个CSS重置的巨大粉丝;他建议每个人都使用它们作为样式表的基础。Rand-Hendriksen在他的博客中说:“如果你不在你的样式表中定义所有默认的CSS参数,浏览器就会使用它的默认参数。”“由于不同的浏览器有不同的参数,你的网站最终会根据你使用的浏览器看起来不同。”在一次电子邮件采访中,克里斯Coyier-网页开发人员和网页设计社区css -诡计的创始人表示支持通用选择器的边距/填充重置(讨论在第1部分).

他说他“用过的都是* {margin: 0;填充:0;}Coyier为“硬重置”方法辩护,概述了网页设计师通常反对使用通用选择器的两个主要顾虑。首先,它可以打破网页浏览器的默认样式,例如表单元素,他说这是“不正确的”,除非你使用一个边界:0属性。使用通用选择器重置样式的另一个问题是的性能影响由使用这种不特定的选择器引起的。

但Coyier认为,虽然从技术上讲这是正确的,但“几乎所有由此产生的减速都是非常微小的,我保证没有人会注意到。”

支持CSS不复位

Web开发人员Florent Verschelde为不使用CSS重置提供了强有力的理由,相反,他建议Web设计师应该依靠精心制作的样式表来解决跨浏览器的不一致问题。Verschelde认为“浏览器默认设置是明智和有用的。”Verschelde说,多亏了网页浏览器的默认样式规则,“你的内容总是可读的(虽然不性感)”。“如果你把它们拿走,你的内容(比如用户生成的内容)就有可能最终变成没有风格的原始内容。”Verschelde认为,大多数设计师和开发人员认为浏览器默认设置导致了大多数布局问题,这是错误的。

“有了足够的CSS知识,你会意识到,大多数你认为是浏览器默认设置造成的不一致的东西,实际上是由于对崩溃边距标准机制理解不足造成的;hasLayoutIE 6-7存在漏洞。”大多数实际的不一致出现在页边距和填充身体元素、列表的边距和填充以及标题字体大小。Verschelde说:“如果你觉得这几个不一致的地方可以让你把所有东西都设为零,然后必须在每种情况下指定大多数元素的精确空白和填充,那么就使用一个重置样式表。”

对于那些寻找不同解决方案的人,他提供了他的“不重置”基础样式表作为替代方案。2008年,开发人员/设计师Jens Meiert写道:“重置样式表很糟糕:新手不应该使用它们,专家也不会使用它们。”Meiert通过指出重置样式表分配基线默认值来证明他的论点,这些默认值稍后会被覆盖(这会使您的CSS效率低下且冗余)。在一篇题为CSS无复位开发者兼图书作者Jonathan Snook表示,“如果不同的浏览器显示的内容略有不同,他也可以接受。”他喜欢自己的“列表有项目符号,有粗体文本的强元素”。网络标准和可访问性的倡导者Tommy Olsson,在2010年底通过电子邮件接受采访时表示,他不是“CSS重置的狂热爱好者”。他说,使用CSS重置的人“陷入了印刷设计的思维模式”,并继续相信“像素完美”的神话。他发现CSS重置样式表效率很低,因为你“提供了很多你知道以后会重写的规则”。

CSS重置样式表的主要问题

拉斯·威克利指出重置CSS的三个主要问题

  1. 然后必须重新定义“归零”的每个元素。这可能会增加CSS文件的大小。
  2. 如果您删除一个元素的默认行为,然后忘记重新设置它的样式,那么CSS重置样式表可能会出现问题。
  3. 一些重置样式表可能对依赖键盘进行导航的用户有害。

在2010年的一次电子邮件采访中,威克利说,当他发现设计师和开发人员用他的警告作为根本不应该使用重置的证据时,他感到很惊讶。他说,CSS重置样式表应该被视为另一个工具,设计师可以使用,调整和修改,以满足他们自己的需要。

通用选择器的问题

网页开发人员Dave Ward指出三个问题与使用通用选择器(*)相关。首先,需要重置的属性不仅仅是空白和填充。第二,使用通用选择器带来的“附带损害”“对表单样式造成了严重破坏”。第三,通用选择器“在几乎所有场景中都有负面的性能影响,无论是CSS重置还是例行的CSS样式”。

卸载埃里克迈耶的重置CSS

埃里克·迈耶的CSS重置-可能是目前最流行的CSS重置样式表-已经在很多场合受到批评。

似乎很多用户都没有读过Meyer关于重置CSS的讨论,只是把它扔进了他们的设计中,而没有注意到作者的建议,即它应该被用作“一个起点,而不是一个独立的无触碰的黑盒子”。

剖析重置CSS

2007年,网页开发者Gary Turner剖析了Meyer的Reset CSS,部分原因是为了反对CSS重置样式表(阅读他的论坛帖子标题)全局重置被认为是有害的).他指出,重置CSS包括弃用的项目(如< applet >而且<中心>)以及对已经没有填充或空白的元素进行不必要的/多余的样式化(例如<一>而且< img >).Turner直言不讳地反对重置的整个概念,但他的观点并非完全不受反对。

在SitePoint论坛的一个帖子中,网页设计师Dan Schulz认为“能够消除非形式元素的页边距”很有帮助。“这很像海军陆战队训练新兵的方式。为了建立一支海军陆战队员,你首先必须摧毁青少年,”他说。

focus在Reset CSS中的使用

在一次幻灯片演示中,威克利列举了以下代码对键盘用户的危害:

:焦点{大纲:0}

当没有活动元素(如链接)的可视化表示时,这将使键盘用户的网页导航变得困难,因为他们无法看到他们当前在哪个HTML元素上。:“Reset CSS”中的焦点在一次电子邮件采访中,迈耶谈到了:专注他说,他没有预料到人们会在不了解Reset CSS如何工作的情况下就使用它。关于:专注他说:“说实话,我把它放在那里是为了让人们定义一个风格。

显然我应该做的是画出3px的纯红色或类似的东西。”“不幸的是,从可访问性的角度来看,错误就在于提到它。但另一方面,你也不能说,‘如果我们不提这件事,也许没人会注意到它。’他们总会注意到这一点,”迈耶说。Meyer承诺将会更新Reset CSS,可能会删除这条规则,用一条提醒用户定义一个可见的:专注样式规则。

重要的是要确保:专注伪类选择器有一个可视属性,就是这样一个网站叫做outlinenone.com有没有单任务的警示设置大纲CSS属性到没有一个0的链接。要了解更多关于这个问题,帕特里克·劳克有一个关于样式化:focus伪类的教程

适度的声音

当然,这一切都有一个中间立场。

2009年11月,作家兼设计师杰森·克兰福德·蒂格检查围绕重置CSS的问题在中心得到了坚定的解决。他建议重置的使用应该根据网页设计项目的需要来决定。他指出了其他人讨论过的使用重置的利弊,并得出结论,你应该让你的重置尽可能简单。

蒂格建议:“保持简单,保持压缩,保持在顶部。”迈耶自己也很对重置的使用一视同仁.2008年4月,他写道:“它们是一个起点。

如果有一千个人使用它们,并创建一千种不同的个性化样式表,那将是正确的。但是,使用它们并编写自己的覆盖也没有什么错。如果这对你有用,那太棒了。

对其他人来说,重置风格更像是一个障碍。这是意料之中的事;我们都以不同的方式工作。”Eric Meyer说,关键是“通过思考它们与你所做的事情的方式之间的关系来评估各种工具,然后选择使用什么工具,如何使用,以及何时使用。”这是一个认真思考自己的手艺并努力做得更好的人的标志。”

确认

感谢为这个关于CSS重置的三部分系列文章做出贡献的个人。

CSS重置资源和工具

相关内容

WebFX职业

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

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