在前端開發中，CSS是不可或缺的重要一環。好的CSS書寫和命名規范不僅能夠幫助團隊開發協作，更能提高代碼的可維護性和可讀性。下面是一些常見的CSS書寫和命名規范。

書寫規范

1.縮進：使用四個空格代替制表符，這種方式能盡可能地適配各種編輯器。

/* bad */
div{
color: #333;
}
/* good */
div {
color: #333;
}

2.空格：在屬性值前加空格，使代碼更加易讀。

/* bad */
div{
color:#333;
}
/* good */
div {
color: #333;
}

3.代碼順序：按照字母順序排列代碼，更加易于查找和維護。

/* bad */
div {
display: flex;
margin: 10px;
color: #333;
}
/* good */
div {
color: #333;
display: flex;
margin-left: 10px;
margin-right: 10px;
}

命名規范

1.類名：使用中劃線連接多個單詞，不要使用駝峰命名法，避免與JavaScript混淆。

/* bad */
.myClass {
font-size: 16px;
}
/* good */
.my-class {
font-size: 16px;
}

2.ID名：只在需要的情況下使用ID選擇器，命名方式與類名一致。

/* bad */
#myId {
width: 200px;
}
/* good */
#my-id {
width: 200px;
}

3.選擇器：避免使用通配符選擇器，盡可能使用類選擇器和ID選擇器，限制選擇器的層級。

/* bad */
* {
margin: 0;
}
/* good */
.my-class {
margin: 0;
}
#my-id {
margin: 0;
}

以上是CSS書寫和命名規范的一些常見方式，希望能給大家提供借鑒和參考。在平時的開發過程中，遵守規范，寫出易讀且易維護的CSS代碼，也是我們成為優秀前端開發者的重要一步。