在編寫 CSS 樣式時，為了讓樣式名稱清晰易懂，有時候會在樣式名稱中加點來表示類別。這種命名方式常常被稱為“BEM 命名法”。以下是一些關于加點命名的使用方法。

/* .header 表示頭部 */
.header {
background-color: #fff;
color: #333;
}
/* .header__logo 表示頭部中的 logo */
.header__logo {
width: 100px;
height: 30px;
}
/* .header__nav 表示頭部中的導航欄 */
.header__nav {
display: flex;
justify-content: space-between;
}
/* .header__nav-item 表示頭部導航欄中的每個選項 */
.header__nav-item {
margin-right: 10px;
}

在這里，我們將頭部視為一個模塊。“.header”是模塊的名稱，而“.header__”用于表示模塊中的子元素。在這種方式下，我們可以避免使用多層的 CSS 嵌套，同時也能使樣式名稱更加清晰易懂，方便其他人員協作開發。

除了 BEM 命名法，有些設計師還喜歡使用加點命名法來表示狀態。例如：

/* .button 表示按鈕 */
.button {
background-color: #000;
color: #fff;
}
/* .button.pending 表示正在處理中 */
.button.pending {
background-color: #ccc;
color: #999;
}
/* .button.disabled 表示已禁用 */
.button.disabled {
opacity: .5;
cursor: not-allowed;
}
/* .button.active 表示處于激活狀態 */
.button.active {
background-color: #f00;
}

在這里，“.button”是按鈕的基本樣式，而“.button.pending”、“.button.disabled”和“.button.active”則分別表示按鈕的不同狀態。這樣做既可以避免使用冗長的選擇器，又能使樣式更加清晰易懂。