我最近剛剛被介紹給BEM，我很高興在我的react組件庫(kù)中實(shí)現(xiàn)這種方法。

我有一個(gè)不同的變體排版組件。值得注意的是，變量是必需的(即沒(méi)有默認(rèn)值)。

假設(shè)我有這些變體:

header1 header2 header3 我正試圖找出為這個(gè)排版組件實(shí)現(xiàn)BEM的最佳方式。 一種選擇是讓每個(gè)變體都有自己的塊元素，如下所示:

.header1 {}

.header2 {}

.header3 {}

然而，這些都是技術(shù)上的變體或修飾詞，不是嗎？ 因此，另一種選擇是讓每個(gè)變體都成為一個(gè)修飾符，如下所示:

.typography {
  &--header1 {}  

  &--header2 {}  

  &--header3 {}  
}

但是塊元素排版應(yīng)該是獨(dú)立的。在這種情況下，變量是必需的... 我想得越多，就越不確定如何給它起個(gè)最好的名字。 有什么建議嗎？

第二種選擇更符合邊界元法的理念，即:

.typography {
  &--header1 {}  

  &--header2 {}  

  &--header3 {}  
}

& quot每個(gè)組件一個(gè)類& quot原則通常是一個(gè)很好的經(jīng)驗(yàn)法則。