CSS是前端開發中非常重要的一部分，而命名類名更是其中至關重要的一個環節。在購物車中，給類名命名可以讓我們更好地選擇和修改樣式。

.cart {
width: 100%;
height: auto;
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
}
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.cart-item img {
width: 100px;
height: 100px;
object-fit: cover;
margin-right: 20px;
}
.cart-item-info {
flex-grow: 1;
}
.cart-item-info h3 {
margin: 0;
font-weight: bold;
font-size: 20px;
}
.cart-item-info p {
margin: 10px 0;
font-size: 16px;
}
.cart-item-price {
font-weight: bold;
font-size: 20px;
}

如上，我們可以給購物車命名類名為”.cart“，這里是購物車整體的樣式。而每個購物車里的物品，則可以給類名為”.cart-item“，它是單個物品所在的標簽。接著，我們可以定義類名為”.cart-item img“，讓物品中的圖片樣式更為明顯。然后，我們也可以給物品中的文字信息命名類名，比如”.cart-item-info“。在類名為”.cart-item-info“中，我們還可以定義文字信息的標題和內容。對于價格，我們可以定義類名為”.cart-item-price“來單獨處理。這樣，我們可以更好地組織和調整購物車的樣式。