用ITCSS，BEM和OOCSS分離結構和蒙皮

我在創建一個受ITCSS，BEM和OOCSS啓發的樣式表，我不確定如何從化妝品屬性中分離結構特性。用ITCSS，BEM和OOCSS分離結構和蒙皮

我瞭解ITCSS和OOCSS一個例子：

//First the structure. Button is an object (ITCSS) 
.o-btn { 
    height: ...; 
    width: ...; 
} 

//Then declare the cosmetics in components 
.c-btn-login { 
    background: ...; 
    color: ...; 
    ... 
}

我有什麼問題，看到ITCSS更相關。同一元素有兩個不同的前綴（兩個類別），當我可以爲同一元素使用相同的前綴時，可能會更清楚地理解。

這種方法是否正確？

來源

2015-09-29 Ismael Ordás

在我的oponion我認爲c-btn登錄是錯誤的...在這種情況下，組件是形式。

<form class="o-form c-form-login t-form-dark" > 
    <input type="text" class="o-input"> 
    <input type="password" class="o-input" > 
    <input type="submit" value="Login" class="o-btn"> 
    </form>

這種結構可以應用化妝風格與T形暗類的所有組件的兒童或者使用特定的類來的孩子，就像T-BTN-暗

.t-form-dark { 
    .o-input{} 
    .o-btn{} 
}

來源

2015-09-30 11:39:54

在這種情況下，做你將表單聲明爲一個對象（只有結構），然後作爲一個組件（化妝品）？ –

我使用組件類c-form-login爲特定樣式和主題類t-form-dark用於化妝品樣式...如果在c-form-login中添加化妝品樣式，我不能在其他形式中使用此樣式.. 。想一個網站，我們有一個c形式登錄，c形式聯繫，c形式時事通訊，c形式查尋，c形式用戶配置文件等...然後創造一個t - 表單風格所有我的形式，如果想要一個特定的風格的c - 表單登錄，然後創建主題類稱爲t形式 - 登錄爲那 –

是的，這些不同類的不同形式是有道理的。但我會用「t-」類來表示網頁的一般主題，而不是元素。這些方法（或體系結構）似乎有個人觀點。無論如何，感謝您的評論，我現在看到它更清晰。 –

用ITCSS，BEM和OOCSS分離結構和蒙皮

回答

相關問題