避免这9个常见的CSS错误，提升你的网页设计

发表时间: 2023-10-24 09:48

转载说明：原创不易，未经授权，谢绝任何形式的转载

层叠样式表（CSS）是一种强大的样式表语言，可以帮助前端开发人员为简单的网页添加样式。然而，在使用这种样式表语言时，开发人员可能会犯一些错误。这些错误会妨碍开发人员编写高效的代码。本文探讨了一些常见的错误，并为每个错误提供了解决方案。

以下是我们开发人员经常犯的九个最常见的错误；你也犯过其中一些吗？

1、滥用“!important”

!important 是 CSS 中的一个关键字，它可以帮助我们将属性值设置为比其他样式选项更重要。例如，如果您将 !important 声明应用于元素样式，那么该样式将覆盖该属性类别的所有其他样式。以下是语法：

selector { property: value !important;}

例如，如果您有一个标题元素 - h1 ，就像这样：

<h1 class="css-mistake">CSS Mistakes</h1>

然后您应用以下样式规则：

h1 { color: red;}.css-mistake { color: green;}

默认情况下，标题文本的颜色将为“绿色”，因为类选择器具有比元素（标签）选择器更高的CSS特异性选择器。但是使用 !important ，您可以覆盖该样式CSS规则（从而使元素（标签）选择器覆盖类选择器）。通过这种方式，标题文本的颜色将为红色，优先于类选择器设置的绿色。

h1 { color: red !important;}

过度使用 !important 会导致特异性战争-一种状态，其中样式开始互相覆盖，无法按照样式表的作者定义的方式工作。下一节将通过列举适当使用 !important 的实例来提供解决此问题的方法。

什么时候应该使用？

就像本节标题所说的那样——“过度使用 !important ”，我们在使用这个关键词时必须小心谨慎。只有在迫切需要时才应该节制地使用 !important 。以下是一些使用它的情况：

在一个样式表中，你使用了第三方库或框架，并且你需要你自己编写的自定义样式（自定义的CSS）来覆盖该库中的样式，而不需要修改该库的主题。
当您需要覆盖一些预定义的样式以增强可访问性时。这种情况在您尝试使您的网站对所有用户包括视力受损的用户（低视力患者）都可访问时经常发生。例如，您设置了一些颜色值，最终发现对于视力受损的人来说很具挑战性，无法产生共鸣。您可以使用 !important 来覆盖默认的颜色值。
如果你遇到了CSS样式调整无法有效解决的布局问题，你可以使用 !important 来解决这个特定的样式问题。然而，请记住这种方法应该被视为最后的手段。
你需要知道一些浏览器对CSS有默认样式。在这种情况下，你可以使用 !important 来覆盖默认样式，确保在不同浏览器上的样式一致性。
您还可以将其用于测试和调试样式表。如果某个样式不起作用，您可以应用 !important 来强制应用所需的样式，覆盖任何冲突的样式。这种方法可以帮助您快速定位代码中的问题所在。

2、使用绝对单位

在进行样式设计时，使用正确的长度单位对于创建响应式设计至关重要。CSS有两类长度单位：绝对单位和相对单位。许多CSS属性，如“宽度”、“高度”、“字体大小”等，都使用单位来表示其值。下面的代码片段给出了单位的使用示例：

selector { font-size: 14px;}

在上面的代码片段中，我们声明了“font-size”CSS属性，然后给它赋了一个14px的值。

什么是绝对单位？

这些是长度单位，无论渲染媒体如何，都具有固定的值，与设备的屏幕尺寸无关。这些单位非常适合在不同屏幕尺寸上保持元素的相同大小。你可能已经使用过一些标准的绝对单位，如像素 - px, 点 - pt, 英寸 - in, 毫米 - mm, 厘米 - cm, 和派卡 - pc. 绝对单位为我们提供了准确、固定和精确的样式值，但它们不会根据屏幕尺寸进行缩放。绝对单位不适用于实现响应式设计。因此，将它们限制在不需要根据浏览器尺寸或设备屏幕尺寸进行调整的元素上。另一方面，相对单位如其名称所示，是相对于另一个属性（大多数情况下是父元素）的。这些单位具有灵活性，可以根据视口动态增长，适应响应式设计，与绝对单位不同。一些相对单位的例子是百分比（%）- rem, em, 等等。

如何使用相对单位及其解释

了解每个相关单位的重要性，使您具备有效使用它们的知识。以下是一些相关单位及其解释：

% - 这个单位完全依赖于父元素。因此，它是相对于父元素的。例如，如果你将一个元素的宽度设置为80%，它将是父元素宽度的80%。请注意，在以下属性的值中使用百分比：宽度、高度、边距和内边距。

em - 这与父元素的字体大小相关。例如，如果您将元素的字体大小设置为4em，则它将是父元素字体大小的四倍。在处理排版（文本）时使用 em - 这使文本按比例缩放。

rem - 这是相对于根元素的字体大小。通常使用 rem 来实现整个布局的一致样式。

vh - 相对于视口高度的1%。

vw - 相对于视口宽度的1%。

3、使用内联样式

内联样式是一种通过 style 属性将直接样式传递给HTML元素的样式系统。虽然存在这种样式系统，但重要的是要理解它的使用不支持应用程序构建的最佳实践，因为它会创建不可重用的代码。只有在测试或美化简单的HTML文件时才使用内联样式。以下是一些避免使用这种样式系统的原因：

使用内联样式，你无法遵循DRY（不要重复自己）原则。内联样式会导致代码重复和不可重用的代码，因为每个元素都会被单独设置样式，即使它们共享相同的样式。内联样式会导致冗余的代码。
代码变得难以阅读，也变得臃肿。这会导致HTML文件大小增加，影响性能。此外，您的代码变得混乱而没有结构性；因此，应该区分结构（HTML）和样式（CSS）。
这导致了一种被称为“可维护性复杂性”的情况，基本上意味着你的代码变得难以维护。例如，如果你需要修改一个元素的外观，你必须找到相应的HTML标签并进行直接的样式调整。想象一下，如果内联样式散布在各个地方，这种方法就不适合扩展。

最佳实践

为了克服内联样式的缺点，您必须使用内部样式表（位于 <style> 标签内的样式）或外部样式表来保持您的代码健康和有组织。

外部样式表：创建一个外部CSS文件。存储您的样式，然后将其与HTML链接起来。通过这样做，您可以区分HTML和CSS代码，使您的样式易于维护和重用。
内部样式表：在您的HTML文件中，使用 <style> 标签在HTML文档的 <head>. 中。尽管这种方法是在HTML文件中，但您仍然可以实现内容（元素）与表现（样式）的分离。

4、不使用CSS重置

不同的浏览器具有各种默认样式，这些样式不同，导致元素的外观不一致。这就是为什么我们必须定义一些样式，以便在其他浏览器上为网页样式提供一致的起点。这些样式被称为“CSS重置”。CSS重置是一种CSS样式，用于删除浏览器默认样式的规则。如果您熟悉CSS，并且在使用过程中有时会注意到某些特定属性的默认样式，如 margin. ，CSS重置可以帮助我们将样式基础调整到一致的水平。以下是使用这些重置的原因：

一致的样式：我们可以通过CSS重置覆盖浏览器的默认样式，使样式表保持一致。
为了保持对样式表的控制，CSS重置确保您的样式受到您作为样式表作者的影响，而不是您的浏览器。

如何创建自己的CSS重置

这里是要遵循的简单步骤：

首先，您必须确定您想要删除或覆盖的默认样式。这是起点，因为在提出解决方案之前，您必须先确定问题。
然后，针对已确定的样式，编写自己的CSS样式。这些样式将作为你的样式表遵循的规则。
最后，在各种浏览器上测试您的样式表，以确保您的CSS重置优先于特定于浏览器的样式。为了使事情看起来不那么抽象，这里是一个使用通用CSS选择器（*）实现的简单CSS重置。

* { margin: 0; padding: 0; border: 0;}

上面的代码是一个基本的CSS重置，它针对边距、内边距和边框属性，将每个属性的值设为0。这个过程被称为“标准化过程”，它可以消除浏览器默认的间距和边框。这里有一些在线的CSS重置：

Normalize.css（https://necolas.github.io/normalize.css/）
Josh Comeau custom CSS reset（https://www.joshwcomeau.com/css/custom-css-reset/）
HTML5 Boilerplate HTML5模板（https://html5boilerplate.com/）
The popular Eric Meyer’s Reset CSS（https://meyerweb.com/eric/tools/css/reset/）

5、不使用单行CSS代码

CSS中的单行代码是CSS代码的速记样式。它可以使代码更加清晰和有结构。掌握这些速记技巧将有助于您编写更简洁的代码（将多行代码压缩为单行）。例如，当您想要在所有边缘（上，下，左，右）处对元素边距进行样式设置时，您不需要明确地指定所有属性（如 margin-top, margin-right, margin-bottom, 和 margin-left, ），您可以直接使用边距属性的速记方式。下面的代码解释了这一点：

/* Don't do this */margin-top: 10px;margin-bottom: 10px;margin-right: 15px;margin-left: 15px;/* Instead, use Margin Shorthand */margin: 10px 20px 10px 20px;/* Margin Shorthand can even be more simplified */margin: 10px 20px;

这些简短的话语带来了许多优点：

简洁的代码：您可以编写更短、整洁且易读的代码。
高效的代码：您可以编写高效的代码，减小样式表文件的大小并提高性能。
可维护的代码：样式表变得更易维护和无错误。修改样式和调试样式也变得更容易。要发掘这些一行代码的全部威力，您必须查看可用的CSS一行代码。以下是一些经过筛选的资源，以帮助您的探险：
Mozilla（https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties）
Plainenglish（https://javascript.plainenglish.io/11-css-one-liners-that-are-insanely-useful-8a2878200474）
Web dev（https://web.dev/one-line-layouts/）

6、未有效地使用选择器

CSS选择器可以在外部或内部样式表中定位HTML元素。CSS中有许多选择器方法，包括标签（元素）、类、ID和伪元素。知道何时使用选择器以及何时不使用选择器非常重要。此外，您还必须了解CSS选择器的工作原理。

标签选择器：这些选择器使用标签名称（例如： div, p ）来定位特定的HTML元素。它们具有最低的特异性，因为它们也会导致广泛的样式，即将样式应用于所有具有指定标签的HTML元素。
类选择器：这些选择器更具体，不像标签选择器那样，因为它们使用应用于HTML元素的类属性。例如：（ .container ），（ .header ）。
ID选择器：在我们日常活动中，ID是一个唯一的值；同样，在CSS中，ID选择器也是如此。ID选择器是用于定位单个或唯一HTML元素的唯一ID属性。例如，( #name )，( #title )。它们具有很高的特异性，适度使用可以使它们变得独一无二。上面是一些CSS选择器。本指南假设您已经熟悉CSS选择器。然而，本指南仍然解释了一些常见的选择器及其工作原理。那么，在选择选择器时，您应该注意什么呢？

具体性：使用特定于目标元素的选择器。这将创建一个样式约束，并帮助避免过于具体的选择器，这可能会影响代码的可重用性。
可读性：所选择的选择器应易于阅读和理解，帮助我们实现清晰的代码架构。
尽量减少使用ID选择器：仅在需要使用唯一ID时才使用ID选择器。如果不小心使用，由于其高度特异性，将会带来极大的复杂性。
当您需要可重用的代码时，请使用类选择器。

如何避免使用过于复杂的选择器

如果你在你的样式表中遇到了像下面这样的代码片段，那就意味着你正在使用过于复杂的选择器。

#container > .box > content .section .title p > span .italic { color: blue; font-weight: bold;}

以下是避免过于复杂选择器的技巧：

为元素选择器选择最具体的选择器。
为元素选择器选择最具体的选择器。
使用选择器组合器来选取具有相同样式的元素。
经常学习代码重构（您将能够发现复杂的选择器）。
使用CSS模块来组织代码结构。
避免使用后代选择器。例如，使用（ ul, li, 和 a ）来选择一个元素。这样可能很高效，但随着时间的推移，它们最终会导致选择器过于复杂。

7、忽略浏览器兼容性

浏览器兼容性很重要，因为你不希望样式在一个浏览器上良好运行，在另一个浏览器上则运行不正常。忽略浏览器兼容性可能会导致用户在不同浏览器上的体验不一致。这是因为不同的浏览器有其自己的CSS样式渲染方式。但是，你可以通过考虑浏览器兼容性并确保你的样式与不同浏览器兼容来实现样式一致性。实现浏览器兼容性代码的一种方法是实施以下操作：

使用供应商前缀：某些CSS属性需要您使用前缀来渲染，无论使用哪种浏览器。需要这些前缀的浏览器包括Internet Explorer，Mozilla Firefox和Safari。这些前缀被称为供应商前缀，因为它们是特定类型的浏览器独有的。前缀的示例： -webkit-, -moz-, 和 -ms-. 。

/* webkit-prefixed version - used by browsers that use the WebKit layout engine, such as Chrome and Safari- */-webkit-border-radius: 8px;/* ms-prefixed version -used by browsers that use the Microsoft layout engine, such as Internet Explorer. */-ms-border-radius: 10px;/* standard version */border-radius: 8px;

声明字体回退：在为“font-family”等属性分配值时，您必须添加回退字体。如果自定义字体不可用，回退字体将是实施的选项之一。

利用Can I Use网站检查CSS属性在各种浏览器中的兼容性。（https://caniuse.com/）

8、使用颜色名称而不是十六进制代码

Hex码是颜色的十六进制表示。它是一个由“#”符号前缀的6位代码，后跟三对十六进制数字，其中第一对表示红色值，第二对表示绿色值，最后一对表示蓝色值。语法：

使用直接的颜色关键词有一些限制：

颜色名称在不同的浏览器中是不一致的。例如，如果你将颜色属性设置为绿色，不同的浏览器对其解释的方式也会有所不同。因此，不同浏览器之间的渲染是不一致的。

颜色名称受到限制，因为您无法调整它们的色调、阴影等。

颜色名称的选择有限。由于使用颜色名称的限制，我们需要选择使用十六进制代码，这些代码没有这些限制。以下是十六进制代码比颜色关键字更合适的原因：

十六进制代码在各种浏览器中都是精确且一致的。
现代浏览器广泛支持它们
他们有各种颜色供开发人员选择
不受限于实施 - 您可以轻松调整它们以适应您的偏好。

寻找十六进制代码的高效方法

以下是获取十六进制代码的几种方法：

使用在线颜色选择器 - 打开您的浏览器并输入此查询 - “在线颜色选择器”，然后搜索。在返回的页面上，您会得到一个颜色选择器。
你还可以通过色彩图表了解十六进制代码。
在浏览器开发者工具的控制台中，您还可以访问一个颜色选择器工具。
最后，您可以在网上查找已经进行了适当研究并整理了这些十六进制代码列表的资源。

9、其他忽视的额外错误

使用0px替代0：毫无疑问，这可能不会对样式表产生影响，但为了最佳实践，请确保使用0而不是0px。

selector { /*Don't do this*/ padding: 10px 12px 15px 0px; /*Do this*/ padding: 10px 12px 15px 0;}

设置高的z-index值：给 z-index 分配高值是非常不必要和过度的。迟早，这将在你的样式表中造成问题，特别是当 z-index. 有多个实现时。

selector { /*Don't do this*/ z-index: 50; /*Do this*/ z-index: 2; /*Let the value be minimal*/}

结论

本文深入探讨了常见的CSS错误，并为每个错误提供了深入的解决方案。通过阅读本指南，毫无疑问您已经了解了一些常见的CSS错误，并且从此以后，您将知道如何解决它们，因为我们还要研究每个错误的解决方案。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。