CSS實用類 - 違反關注

Question

分離的考慮這一點，使用CSS預處理時：

.pull-right { 
    float:right; 
} 

<div class="pull-right"><span>My content being pulled to the right</span></div> 

OR

.pull-right { 
    float:right; 
} 

.login { 
    .pull-right; 
} 

<div class="login">My login form</div> 

教條，我不喜歡這樣的實用程序類風格出血關注到我的文檔標記中。

從實用角度而言，我喜歡實用類的易用性，事實上我不需要單獨的類來將每個我需要的元素都拉向右側。

有沒有人曾經在大型項目中使用工具類，其中的結構不得不改變，從而意味着對HTML標記和樣式的改變？如果我正在着手一個非常大的UI項目，我是否應該避免將風格問題納入我的標記的實用程序類？

Answer 1

這是一個有點主觀的問題，它不是最適合StackOverflow的問題。但讓我試着這樣回答。

1. 「有沒有人曾經在一個大項目中使用過實用程序類。」毫無疑問，有些人一段時間以來都是如此。任何時候你將明顯的外觀類混入html中，如果外觀必須改變，燃燒的可以跟着。
2. 實用工具類比您描述的有第三種用途。 Javascript可以用來在某些時候動態地添加一個類，以允許該類影響html。當然，這與你的第一個例子有關，但不是硬編碼到html中，因此避免你所問的問題。
3. 最後，如何使用它取決於您的需求和期望。舉個例子，將float: right添加到.logo類中比在其上使用實用程序mixin簡單易行，因爲該mixin中只有一行CSS代碼。如果有十行，則使用mixin .logo會更有意義。我假定bootstrap將mixin定義爲一個直接類，以便您可以靈活地使用它，可以直接添加該類，也可以作爲混合類。如果他們打算將它純粹作爲混合，他們的定義應該是.pull-right()（帶括號），以便它不會創建將pull-right作爲類添加到元素上的選項。

因此，不管你是否避免將它作爲一個完整的課程，都取決於你所描述的scenerio願意承擔的風險。你可以被燒，但也許不會。這一切都取決於變化的可能性，你將它引入html的次數，以及其他一些我沒有想到的因素。只有您可以評估風險級別是否使用它的獎勵級別。