以下是大多數網路開發人員常犯的一些錯誤，以及如何識別和避免這些錯誤才能幫助你寫得更好、更多。
1. 使用速記
CSS 速記是一組允許同時設定多個屬性值的 CSS 屬性。這些值之間用空格隔開。例如， border 屬性是 margin-top 、 margin-right 、 margin-left 和 margin-bottom 屬性的速記。
//Not Using Shorthand
.example{
margin-top:10px;
margin-bottom:19px;
margin-left:10px;
margin-right:19px;
}
//Better way
.example{
margin:10px 19px;
}
2. 響應式設計
如果您的網站是響應式設計，請避免使用 px，而使用百分比。下面的示例中，容器的大小為 1000px，這是不正確的，因為不同的螢幕裝置會有不同的顯示效果，所以在顯示的時候會固定為 1000px。
//Not correct way
.container{
width:1000px;
}
//correct way for responsive
.container{
width:100%;
}
3. 重複相同的程式碼
如果你需要其他類的屬性，不要寫新的程式碼，使用用逗號( , )分隔的類。
還有一點，如果需要為元素新增額外屬性，請使用其他類，併為該類編寫 css，這樣可以減少重複程式碼。
//Not correct
.box1{
width:50%;
margin:20px;
}
.box2{
width:50%;
margin:20px;
}
//Correct
.box1,.box2{
width:50%;
margin:20px;
}
4. 無字型後備
什麼是後備字型？後備字型是指在主字型尚未載入或缺少呈現頁面內容所需的字形時使用的字型。例如，下面的 CSS 表明 Helvetica 字型家族應作為 “Arial” 的後備字型使用。
//Not good
body{
font-family:Helvetica;
}
//Good
body{
font-family:Helvetica, Arial,Sans-serif;
}
有些瀏覽器可能不支援某些 CSS 字型檔，因此我們可以使用回退功能，它將支援下一個字型檔，而不是預設字型檔。
5. 使用顏色名稱
更好的方法是使用十六進位制顏色程式碼，而不是顏色名稱。
//Not good
.example{
color:green;
}
//Good
.example{
color:#00ff00;
}
6. 複雜的選擇器
當你可以對某個元素直接使用類時，就不應該用不同的選擇器巢狀來使其複雜化。
//It is good some times, but better to don't go eith complicate
header .navigation ul.nav-links{
list-style-type:none;
}
為簡單起見，您可以只使用類，這樣也便於閱讀和理解。
//Better
.nav-links{
list-style-type:none;
}
7. Z-Index 錯誤
許多開發人員使用很高的 Z-Index 值將元素放在前面。
當你想把另一個元素放在其他元素前面時，Z-Index 值就會變得越來越高。
.modal-container{
z-index:545;
}
.modal{
z-index:5345345;
}
解決的辦法是使用適度的數值，這樣就不會造成長時間執行的現象。
.modal-container{
z-index:1;
}
.modal{
z-index:2;
}
8. 名稱不一致
我的觀點是，在準備網頁內容的基礎上，CSS 類名或 id 名應該是這樣的才更好。
我的意思是，如果我們使用的是其他開發人員一眼就能理解的名稱，那就不需要搜尋了。
.header{
font-size:2rem;
}
9. 何時使用類和 ID
當我們訪問元素的值時，最好使用 ” id “，在準備設計時，我們使用類， id 是唯一的，類可以多次使用。
i) id 是唯一的，因此訪問資料很容易，使用類時，我們需要為該元素新增索引，如 [ 0 ]。
let name = document.getElementById('name').value;
console.log(name);
ii) 類可以重複使用，因此最好採用這種方式。
Paragrah
.classData{
margin:20px
}
10. 忽視跨瀏覽器相容性
不同瀏覽器對 CSS 規則的解釋可能不同，從而導致跨平臺的視覺效果不一致。在多個瀏覽器上測試你的 CSS 程式碼，並考慮使用 CSS 字首或特定於供應商的字首來相容舊版本的瀏覽器。
在程式碼中編寫新的 CSS 屬性之前，使用 https://caniuse.com/ 檢查哪些瀏覽器支援哪些 CSS 屬性。
結論
總之，避免 CSS（層疊樣式表）中的常見錯誤對於建立設計良好、高效的網頁至關重要。CSS 在控制網頁內容的視覺呈現和佈局方面發揮著重要作用。避免這些錯誤，就能確保你的 CSS 程式碼整潔、可維護，併相容不同的瀏覽器和裝置。
評論留言