總結一些,書寫 CSS 的時候,經常犯的錯誤!

前端小智 發表於 2023-01-23
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 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

總結一些,書寫 CSS 的時候,經常犯的錯誤!