關於 CSS BEM 的選擇器設定

css bem

samjam 2023-11-13 11:03:08 ‧ 1059 瀏覽

分享至

如果我要設定表格儲存格的樣式，
通常是設定成
.table td { ... }

但 CSS BEM 建議不要設定元素選擇器的樣式，
只要使用 class，
那我是要每個儲存格都設定 class 嗎？
.table__cell { ... }
那麼多儲存格設定下來，好像不太好？

窮嘶發發發 iT邦高手 1 級 ‧ 2023-11-14 11:15:59 檢舉

BEM 是一種命名規範
簡單說你要把區塊跟物件分清楚歸屬
假設你有個表格，她內容是 spec 項目說明
那他的命名就該是 .spec 而不是 table 或是 .table 類似元素的名稱，避免日後維護時的混淆
CSS 內，TABLE 有三個區段，head body footer，如果你三個區段都有不同的設計
這三個區段的命名就該是 .spec__head .spec__body .spec__footer
接下來才是儲存格的設定，但原則上大部分表的CSS會定義到這裡已經很夠用
如果每個表格都有自己的名稱，表格內的物件也定義好，那儲存格就不太需要定義下去做多餘的設定
例如 .spec__head tr:nth-child(1) 就代表第一列，以下類推