本篇文章給大家總結(jié)5個(gè)最常見的css錯(cuò)誤，并介紹一下避坑方法，希望對(duì)大家有所幫助！

正如我們今天所知，CSS語言是web的一個(gè)重要組成部分。它使我們有能力繪制元素在屏幕、網(wǎng)頁或其他媒體中的展示方式。

它簡單、強(qiáng)大，而且是聲明式的。我們可以很容易地實(shí)現(xiàn)復(fù)雜的事情，如暗黑/光明模式。然而，對(duì)它有很多誤解和錯(cuò)誤的使用。這些會(huì)把CSS標(biāo)記變成復(fù)雜的不可讀且不可擴(kuò)展的代碼。

我們?nèi)绾尾拍芊乐惯@種情況的發(fā)生？通過遵循最佳實(shí)踐，避免最常見的錯(cuò)誤。在這篇文章中，我們將總結(jié)出5個(gè)最常見的錯(cuò)誤以及如何避免它們。

1. 不預(yù)先設(shè)計(jì)

不經(jīng)過思考，立馬動(dòng)手，這樣可能會(huì)更快的完成任務(wù)，這也給了我們一種速度和成就感。但，從長遠(yuǎn)來看，這會(huì)有相反的效果。

在寫代碼之前，必須要先想清楚。我們將采取什么方式來設(shè)計(jì)組件？我們想以原子的方式建立我們的組件嗎？我們是否愿意創(chuàng)建一個(gè)可組合的實(shí)用系統(tǒng)？我們想要一個(gè)已經(jīng)內(nèi)置的UI庫嗎？我們希望我們的CSS是全局作用域的還是按組件作用域的？

有一個(gè)明確的目標(biāo)將幫助我們選擇最好的工具。這將使我們免于冗余和違反DRY。 有許多有效的方法來設(shè)計(jì)一個(gè)應(yīng)用程序。最常見的無效的是即興創(chuàng)作。

我們的代碼必須是可預(yù)測的，易于擴(kuò)展和維護(hù)。

看個(gè)例子：

/* ❌ 到處添加離散值 */ .card {   color: #edb361;   background-color: #274530;   padding: 1rem; }  /* ✅ 定義基于主題的屬性 */ :root {   --primary-bg-color: #274530;   --accent-text-color: #edb361;   --spacing-unit: 0.5; }  .card {   color: var(--accent-text-color);   background-color: var(--primary-bg-color);   padding: calc(var(--spacing-unit) * 2rem); }

在上面的例子中，我們可以看到當(dāng)使用CSS變量進(jìn)行主題設(shè)計(jì)時(shí)，一切都變得可讀和清晰。第一個(gè) .card 定義看起來完全是隨機(jī)的，這個(gè)組件不容易被擴(kuò)展。

2. CSS Code Smells

Code Smell中文譯名一般為“代碼異味”，或“代碼味道”，它是提示代碼中某個(gè)地方存在錯(cuò)誤的一個(gè)暗示，開發(fā)人員可以通過這種smell（異味）在代碼中追捕到問題。

Code smells 不是bug。它們也不會(huì)妨礙系統(tǒng)的正常工作。它們只是一些不好的做法，會(huì)使我們的代碼更難閱讀和維護(hù)。

在這里，列舉一些最常見的以及如何克服它們：

:: 符號(hào)

在偽元素和偽類中使用 :: 符號(hào)是很常見的。這是舊的CSS規(guī)范的一部分，瀏覽器繼續(xù)支持它作為一種回退。然而，我們應(yīng)該在偽元素中使用 ::，比如 ::before, ::after, ::frist-line…，在偽類中使用:，比如:link, :visited, :first-child…

使用字符串連接類

使用Sass預(yù)處理器來幫助處理我們的CSS代碼庫是非常流行的。有時(shí)在嘗試DRY時(shí)，我們通過連接&操作符來創(chuàng)建類。

.card {   border: 0.5 solid rem #fff;      /* ❌ failed attempt to be dry */   &-selected {     border-color: #000;   } }

在開發(fā)人員試圖在代碼庫中搜索.card-selected類之前，似乎沒有什么問題。開發(fā)者將很難找到這個(gè)類。

不正確地使用縮寫

CSS的簡寫非常好，可以讓我們避免代碼過于冗長。但是，有時(shí)我們并沒有刻意地使用它們。大多數(shù)情況下，background 簡寫是偶然使用的。

/* ❌ 由于我們只是在設(shè)置一個(gè)屬性，所以不需要使用簡寫。*/ .foo {   background: #274530; }  /* ✅ 使用正確的CSS屬性 */ .foo {   background-color: #274530; }

!important 的錯(cuò)誤使用

!important 規(guī)則用于覆蓋特定性規(guī)則。它的使用主要集中在覆蓋一個(gè)不能以任何其他方式覆蓋的樣式。

它通常用于更具體的選擇器可以完成任務(wù)的場景。

<div class="inner">   <p>This text is in the inner div.</p> </div>   <style>   .inner {     color: blue;   }      /* ❌ 重寫 color */   .inner {     color: orange !important;   } </style>   <style>   .inner {     color: blue;   }      /* ✅ 使用一個(gè)更具體的選擇器規(guī)則，該規(guī)則將優(yōu)先于更一般的規(guī)則。 */   .inner p {     color: orange;   } </style>

強(qiáng)制使用屬性值

在CSS代碼庫中出現(xiàn)一個(gè)神奇的數(shù)字是很常見的。它們帶來了相當(dāng)多的混亂。有時(shí)，我們可能會(huì)在代碼中發(fā)現(xiàn)長的數(shù)字，因?yàn)殚_發(fā)者是為了覆蓋一個(gè)他不確定的屬性。

/* ❌ Brute 強(qiáng)制使這個(gè)元素位于z軸的最前面 */ .modal-confirm-dialog {   z-index: 9999999; }  /* ✅ 提前計(jì)劃并定義所有可能的用例 */ .modal-confirm-dialog {   z-index: var(--z-index-modal-type); }

3.不對(duì)CSS類名進(jìn)行作用域劃分

由于CSS語言的特性，很容易出現(xiàn)元素在無意中被一個(gè)糟糕的類名定型的情況。這個(gè)問題非常頻繁，所以有相當(dāng)多的解決方案來解決這個(gè)問題。

在我看來，最好的兩個(gè)是：

• 使用命名約定
• CSS Modules

命名約定

最流行的命名方式是BEM 101。它代表了 Block、Element、Modifier方法。

[block]__[element]--[modifier] /* Example */ .menu__link--blue {   ... }

其目的是通過讓開發(fā)者了解HTML和CSS之間的關(guān)系來創(chuàng)建獨(dú)特的名稱。

CSS Modules

我對(duì)BEM方法最大的擔(dān)心是，它很耗時(shí)，而且要依靠開發(fā)人員來實(shí)現(xiàn)。CSS模塊發(fā)生在預(yù)處理器一側(cè)，這使得它沒有錯(cuò)誤。它為我們的CSS模塊類名生成了隨機(jī)的前綴/名稱。

4. 使用 px 單位

像素的使用相當(dāng)頻繁，因?yàn)樗鸪蹩雌饋砗苋菀缀椭庇^的使用。事實(shí)恰恰相反。很久以來，像素已經(jīng)不再基于硬件了。它們只是基于一個(gè)光學(xué)參考單元。

px是一個(gè)絕對(duì)單位。這意味著什么呢？那就是我們不能適當(dāng)?shù)乜s放以滿足