在網頁開發中，我們常常使用CSS來美化頁面樣式，也為了讓頁面更具有可讀性和易于維護，我們需要遵守一些CSS約定和規則，使得樣式代碼看起來更加清晰美觀，方便他人的協同開發。

/*統一命名*/
/*對于不同的模塊使用相應的命名規范*/
/*使用中劃線連接*/
.my-class {}
.my-class-sub{}
/*縮進和換行*/
/*每行代碼不超過80個字符*/
/*規范縮進，可以使用2個空格或者4個空格*/
.my-class {
font-size: 16px;
line-height: 1.5;
color: #333;
}
/*顏色描述*/
/*除了常見的英文單詞，我們可以使用更具體的描述*/
/*如blue描述為"天藍色"，purple描述為"紫羅蘭色"*/
.my-class {
background-color: pink; /*粉紅色*/
border-color: #ccc; /*淺灰色*/
color: darkcyan; /*深海青色*/
}
/*避免使用過于具體的CSS選擇器*/
/*如：使用標簽名加類名組合，而不是絕對路徑*/
/*不推薦使用：.my-class ul li{}
/*推薦使用：.my-class-item {}
.my-class-item {}
/*注釋的使用*/
/*合適的注釋能有效定義你的CSS樣式，便于他人閱讀和修改*/
/*標記注釋和結構性注釋相互配合最好*/
/*標記注釋能描述CSS樣式的大致功能*/
/*結構性注釋則能區分不同模塊之間的關系*/
/*有助于開發和維護*/
/*使用雙斜線（//）或者斜桿星號（//）進行標記注釋*/
/*使用斜桿星號（/*）進行結構性注釋*/
/*如下*/
.my-class {
/*=========導航欄==========*/
/*顏色和字號*/
font-size: 16px;
color: #333;
/*=========Logo==========*/
.my-logo {
font-size: 24px;
color: #444;
}
/*=========導航欄選中狀態==========*/
.my-nav-active {
font-weight: bold;
}
}

通過遵守這些CSS約定和風格規范，我們能夠寫出更易讀、更方便維護的CSS樣式代碼。