H5W3
当前位置:H5W3 > 其他技术问题 > 正文

总结一些,我在书写 CSS 的时候,经常犯的错误!

当我们非常专注写代码时候,我们往往会无意识的写出一些无效CSS代码。 我把这种称为 “潜意识错误”。 导致这种错误后,我们经常会反问自己:“为什么我写出这样低级错误?” 不过,这些错误都比较好解决,不需要花很多时间,只要纠正一下就行了。

跟着本文看看,我会经常写哪些有趣的 CSS 错误。

Font Size

😌 我在font-sizefont-weight之间经常犯错误,如下所示:

.title {
font-size: bold;
}

Opacity

我也不知道啥原因,但有时我会忘记写百分比 👏:

.title {
opacity: 50;
}

关于 opacity 我还经常犯下面错误:

.title {
/* 现这一点并不容易,你们看出错误在哪里吗? 😨*/
opaciy: 0.5;

Font Weight

light 还是 lighter 😲?

.title {
font-weight: light;
}

Padding

当你认为属性是padding,而实际上用的是padding-top时,就会发生这种情况🔨:

.section {
padding-top: 10px 20px;
}

人才,优秀 🙀。

CSS Grid

对于 CSS Grid 有时我会潜意识的写 grid-column 而不是 grid-template-columns 😖:

.section {
grid-columns: 1fr 1fr 1fr;
}

CSS 变量

对于 CSS 变量的使用,我也经常忘记写 var 😌:

.title {
color: --brand-color;
}

👍 正确的写法如下:

.title {
color: var(--brand-color)
}

Box Shadow

😧 对于重置 box-shadow 我经常用 0 来重置:

.title {
/* 非法的 */
box-shadow: 0;
}

👍 正确的写法如下:

.title {
box-shadow: none;
}

Visibility

隐藏元素可以使用 visibility,但我会经常这样写 😝:

.title {
visibility: none;
}

👍 正确的写法如下:

.title {
visibility: hidden;
}

Width

对于 width 有时会脑抽 😮,这样写:

.title {
widows: 100px;
}

Offset 属性

对于 css 偏移属性,我也会经常这么写:

.elem {
left: 14;
}

少了啥,大家自己体会 🐶。

CSS calc()

如果你的代码没有高亮的提示的功能,你也许也会这样写 😉:

.elem {
font-size: clac(14px + 1vw);
}

CSS color

我记得曾经遇到过这样的错误 😜:

.elem {
color: #red;
}

Display

😞 不多说了,大家自己体会:

.title {
display: absolute;
}

Transforms

😛

.title {
translate: (-50%, -50%)
}

人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。


原文: https://heydesigner.com/css-m…

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

交流

文章每周持续更新,可以微信搜索【大迁世界 】第一时间阅读,回复【福利】有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,欢迎Star。

未经允许不得转载:H5W3 » 总结一些,我在书写 CSS 的时候,经常犯的错误!

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址