5个常见的CSS错误,你一定要注意避免

web前端开发

共 2204字,需浏览 5分钟

 ·

2021-06-19 12:04

英文 | https://javascript.plainenglish.io/5-common-css-mistakes-that-you-need-to-avoid-53e51ed98d04

翻译 | 杨小二


CSS 是每个 Web 开发人员必须掌握的技能,以便设计网页样式并使其具有响应性。我无法想象不使用 CSS 的网页会是什么样子。你可以用这种惊人的样式表语言做很多很酷的事情。
你只需要有点创意并避免代码中的错误。在 CSS 中很容易出错,因为你必须为网页上的每个元素设置样式。
今天,我将与分享5个介绍作为 Web 开发人员需要注意避免的一些常见 CSS 错误。
现在,让我们开始吧。

1、不使用相对单位

一个常见的错误,就是我看到很多新开发者提出的是,他们在开发时,使用px单位,而不使用相对单位(rem,%,em...)。
其实,使用相对单位,可以确保布局根据用户屏幕进行缩放。因此,我建议大家尽可能使用它们,尽量注意并避免在代码中的任何地方使用 px 单位。
不好的做法:
/* wrong */element{ font-size: 18px; margin: 10px; line-height: 15px;}

比较好的做法:

/* right */element{ font-size: 1.2rem; margin: 0.5rem; line-height: 1.3em;}

2、没有重置CSS

每个 Web 浏览器都有自己的默认样式。因此,当网页不包含 CSS 时,浏览器会为文本、填充、边距等添加一些基本的默认样式。

每个浏览器都有独特的默认样式,这就是为什么通过添加 CSS 重置样式来重置这些浏览器默认样式的原因。但是,许多开发人员并没有这样做。

我们通过添加 CSS 重置样式可以避免出现这个错误。

你可以通过使用通用选择器(*)重置边距、填充、框大小和文本字体来做到这一点。

像这样:

*{ padding: 0; margin: 0; box-sizing: border-box; font-family: "your preferd font here";}

3、 重复代码

许多开发人员在谈到 CSS 时都会重复自己的代码。这是一种不好的做法,因为你需要减少代码以使其具有高性能且易于管理。

因此,请始终寻找减少 CSS 并避免重复代码的方法。

下面是一个例子:

不好的做法:

/* wrong */.container {    background-color: #000;    border-radius: 0.5rem;}
.sidebar { background-color: #000; border-radius: 0.5rem;}

好的做法:

/* right */.container, .sidebar {    background-color: #000;    border-radius: 0.5rem;}

4、不使用缩写

同样在 CSS 中,你可以使用缩写来编写更少的 CSS 代码。但是,许多开发人员不使用这些简写,或者他们甚至不知道它们。

这里有些例子:

不使用缩写(不友好的方式):

element{ background-image: url(file.png); background-repeat: no-repeat; background-position: center;}

使用缩写(比较好方法):

element{ background: url(file.png) no-repeat center;}

这是另一个例子:

/* without shorthand */element{ font-family: Helvetica; font-size: 1rem; font-weight: bold;}/* using a shorthand */element{ font: bold 1rem Helvetica;}

如你所见,缩写减少了 CSS 代码,这就是为什么,我推荐你尽可能多地使用它们的原因。

5、使用颜色名称

不要使用诸如red、blue等这样的颜色名称。相反,我建议你使用十六进制的颜色值来表示颜色。

为什么?因为当你使用颜色名称时,例如,red颜色在所有浏览器中看起来会完全不相同。你通过使用颜色名称red的话,那么就意味着你允许浏览器显示它认为是红色的颜色。

这就是为什么我建议使用十六进制颜色来表示,它可以更具体地选择你的颜色以在所有浏览器中看起来相同。

不好的方法:

/* wrong */element{ color: blue;}

好的办法:

/* correct */element{ color: #2596be;}

结论

如你所见,以上5点就是作为 Web 开发人员需要避免的一些 CSS 错误。我也犯了一些这样的错误。这就是为什么我想和你分享它们的原因,希望那些新的开发者不要再犯我之前犯过的一些错误。

最后,感谢你阅读这篇文章,希望你觉得它对你有用。


学习更多技能

请点击下方公众号


浏览 16
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报