如何命名空間與競爭的「範圍」的OOCSS類？

我知道這是要求一個非常有見解的答案，我想所有與命名約定相關的問題都是如此。如何命名空間與競爭的「範圍」的OOCSS類？

我正在使用Harry Roberts BEMIT naming convention，它爲面向對象的css增加了帶有前綴/名稱空間的BEM。這允許使用前綴o-將類組織到對象中，使用c-前綴（加上一些更多）作爲無裝飾設計模式（如the famous media object）和樣式化UI組件。

這裏是（通用）例如，通常在解釋BEM的情況下使用，有問題的命名空間增強：

.o-btn { 
    width: 100%; 
}

這裏競爭範圍，針對相同的（BEM）塊

.c-btn { 
    color: white; 
    background: gray; 
} 
.c-btn--positive { 
    background: green; 
} 
.c-btn--negative { 
    background: red; 
}

引述有關部分從哈利羅伯茨CSS指引（不夠名氣後第2鏈接，對不起）：

上面，我們可以看到.btn {}類如何簡單地爲元素提供結構樣式，而不關心任何化妝品。我們將.btn {}對象與第二個類相互補充，例如.btn - negative {}，以便爲DOM節點指定化妝品。

對我的這種解釋聽起來像我做的確切的理由。不過，它感覺不正確，要在同一個塊上使用兩個不同的名稱空間，可能會造成混淆。

如果我選擇了哪個命名空間，如果其中兩個是競爭的？

來源

2016-06-25 tstelzer

不要害怕在同一個DOM節點上有不同的BEM實體。

事實上純BEM本身在混合的幫助下解決了這個問題（參見https://en.bem.info/methodology/key-concepts/#mix）。

想法是，您應該將button塊保留爲具有最大可重用性的通用組件。然後你可以在theme修飾符的幫助下添加所有的化妝品。最後通過與父元素混合的幫助來添加定位（例如form__submit）。

所以，你可能最終的東西是這樣的：

<form class="form"> 
    <button class="button button--theme_awesome form__submit">Send</button> 
</form>

來源

2016-06-25 21:21:30 tadatuta

那不是我的問題，我可能有混淆的措辭。我意識到，我可以在沒有問題的情況下堆棧類中的類，但是使用已聲明對象（o-前綴）和組件（c-前綴）的東西具有相同的類名稱時感覺不對。 – tstelzer

如何命名空間與競爭的「範圍」的OOCSS類？

回答

相關問題