关于javascript:总结一些书写-CSS-的时候经常犯的错误

微信搜寻 【大迁世界】, 我会第一工夫和你分享前端行业趋势,学习路径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

当咱们十分专一写代码时候,咱们往往会有意识的写出一些有效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%)
}

人才们的 【三连】 就是小智一直分享的最大能源,如果本篇博客有任何谬误和倡议,欢送人才们留言,最初,谢谢大家的观看。


作者:Ahmad shaded 译者:前端小智 起源:sitepoint

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

编辑中可能存在的bug没法实时晓得,预先为了解决这些bug,花了大量的工夫进行log 调试,这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

交换

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据