5個需要避免的CSS錯誤
作者：前端小智
簡介：思否百萬閱讀，勵志退休后，回家擺地攤的人。
來源：SegmentFault 思否社區(qū)
正如我們今天所知，CSS語言是web的一個重要組成部分。它使我們有能力繪制元素在屏幕、網(wǎng)頁或其他媒體中的展示方式。
它簡單、強大，而且是聲明式的。我們可以很容易地實現(xiàn)復(fù)雜的事情，如暗黑/光明模式。然而，對它有很多誤解和錯誤的使用。這些會把CSS標(biāo)記變成復(fù)雜的不可讀且不可擴展的代碼。
我們?nèi)绾尾拍芊乐惯@種情況的發(fā)生？通過遵循最佳實踐，避免最常見的錯誤。在這篇文章中，我們將總結(jié)出5個最常見的錯誤以及如何避免它們。
1. 不預(yù)先設(shè)計
不經(jīng)過思考，立馬動手，這樣可能會更快的完成任務(wù)，這也給了我們一種速度和成就感。但，從長遠來看，這會有相反的效果。
在寫代碼之前，必須要先想清楚。我們將采取什么方式來設(shè)計組件？我們想以原子的方式建立我們的組件嗎？我們是否愿意創(chuàng)建一個可組合的實用系統(tǒng)？我們想要一個已經(jīng)內(nèi)置的UI庫嗎？我們希望我們的CSS是全局作用域的還是按組件作用域的？
有一個明確的目標(biāo)將幫助我們選擇最好的工具。這將使我們免于冗余和違反DRY。 有許多有效的方法來設(shè)計一個應(yīng)用程序。最常見的無效的是即興創(chuàng)作。
我們的代碼必須是可預(yù)測的，易于擴展和維護。
看個例子：
/* ? 到處添加離散值 */
.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變量進行主題設(shè)計時，一切都變得可讀和清晰。第一個 .card 定義看起來完全是隨機的，這個組件不容易被擴展。
2. CSS Code Smells
Code Smell中文譯名一般為“代碼異味”，或“代碼味道”，它是提示代碼中某個地方存在錯誤的一個暗示，開發(fā)人員可以通過這種smell（異味）在代碼中追捕到問題。
Code smells 不是bug。它們也不會妨礙系統(tǒng)的正常工作。它們只是一些不好的做法，會使我們的代碼更難閱讀和維護。
在這里，列舉一些最常見的以及如何克服它們：
:: 符號
在偽元素和偽類中使用 :: 符號是很常見的。這是舊的CSS規(guī)范的一部分，瀏覽器繼續(xù)支持它作為一種回退。然而，我們應(yīng)該在偽元素中使用 ::，比如 ::before, ::after, ::frist-line...，在偽類中使用:，比如:link, :visited, :first-child...
使用字符串連接類
使用Sass預(yù)處理器來幫助處理我們的CSS代碼庫是非常流行的。有時在嘗試DRY時，我們通過連接&操作符來創(chuàng)建類。
.card {
border: 0.5 solid rem #fff;
/* ? failed attempt to be dry */
&-selected {
border-color: #000;
}
}
在開發(fā)人員試圖在代碼庫中搜索.card-selected類之前，似乎沒有什么問題。開發(fā)者將很難找到這個類。
不正確地使用縮寫
CSS的簡寫非常好，可以讓我們避免代碼過于冗長。但是，有時我們并沒有刻意地使用它們。大多數(shù)情況下，background 簡寫是偶然使用的。
/* ? 由于我們只是在設(shè)置一個屬性，所以不需要使用簡寫。*/
.foo {
background: #274530;
}
/* ? 使用正確的CSS屬性 */
.foo {
background-color: #274530;
}
!important 的錯誤使用
!important 規(guī)則用于覆蓋特定性規(guī)則。它的使用主要集中在覆蓋一個不能以任何其他方式覆蓋的樣式。
它通常用于更具體的選擇器可以完成任務(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;
}
/* ? 使用一個更具體的選擇器規(guī)則，該規(guī)則將優(yōu)先于更一般的規(guī)則。 */
.inner p {
color: orange;
}
</style>
強制使用屬性值
在CSS代碼庫中出現(xiàn)一個神奇的數(shù)字是很常見的。它們帶來了相當(dāng)多的混亂。有時，我們可能會在代碼中發(fā)現(xiàn)長的數(shù)字，因為開發(fā)者是為了覆蓋一個他不確定的屬性。
/* ? Brute 強制使這個元素位于z軸的最前面 */
.modal-confirm-dialog {
z-index: 9999999;
}
/* ? 提前計劃并定義所有可能的用例 */
.modal-confirm-dialog {
z-index: var(--z-index-modal-type);
}
3.不對CSS類名進行作用域劃分
由于CSS語言的特性，很容易出現(xiàn)元素在無意中被一個糟糕的類名定型的情況。這個問題非常頻繁，所以有相當(dāng)多的解決方案來解決這個問題。
在我看來，最好的兩個是：
使用命名約定 CSS Modules
命名約定
[block]__[element]--[modifier]
/* Example */
.menu__link--blue {
...
}
CSS Modules
4. 使用 px 單位
.article-column {
/* ? 我們的元素將最多容納20個繼承的字體大小的字符。 */
max-width: 20ch;
}
rem 表示相對于根 font-size 的大小。 em 表示相對于元素大小的大小。
5. 忽略瀏覽器支持
總結(jié)
