CSS預處理器mixin與標記類

我處於項目的早期階段，隨着項目的發展，它將積累大量的樣式。我們正在討論CSS預處理器mixin模式的優點，用於DRY我們的樣式代碼。當mixin參數化時，好處很明顯 - 幾乎每個實例都必須手寫，所以代碼膨脹相對較少，特別是如果不經常使用特定的參數化。CSS預處理器mixin與標記類

但是，對於未參數化的mixin，它有點模糊。以清除爲例。

在純CSS中，我們可能會創建一個cf類，然後在標記中調用它，只要有必要。這個效果很好，但是卻帶有純粹的表現類的標記。

在SASS，我們可以通過使用一個mixin做到這一點逃離這個：

//in _mixins.scss 
@mixin clear-fix() { 
    &:before, &:after { 
    content: '\0020'; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    width: 0; 
    height: 0; 
    } 
} 

//in my_component.scss 
@import 'mixins'; 

.my_component { 
    // styles ... 
    @include clear-fix() 
}

這有集中純粹的表象關注，使我們的風格代碼更易於維護的優點。但不足之處在於，編譯後的CSS將會非常不穩定，而clear-fix mixin會在它混入的每個塊中逐字重複（將其應用於我們以相同方式使用的任何類似的CSS模式）。

我的問題是在代碼中重複混合是否可能導致任何重大問題？還是有另一個我沒有想到的解決方案？

來源

2014-06-06 acjay

我認爲你給出的例子的主要缺點是你在重複使用clearfix的地方......所以在你的例子中，如果你有100個使用clear-fix類的元素，你會有693額外的CSS不需要的行。

兩個建議：

，只有當他們採取的參數和CSS屬性真正改變價值，我會用混入。使用「void」mixins似乎效率低下，因爲您可以使用普通的舊CSS代替。
查看stubbornella的面向對象的CSS：https://github.com/stubbornella/oocss/wiki。如果抽象出你clear-fix混入到一個可重用的CSS對象，你的方式更幹（雖然你還是會重複自己一點點）

來源

2014-06-06 16:26:03 biegel

聽起來像一個雙贏。關鍵是要確定少量的實際抽象模式，這些抽象模式恰好需要「清除修復」作爲細節。然後，所使用的類仍然具有語義上的意義，並且「clear-fix」可以僅作爲mixin定義一次，但重複有限次數。 – acjay

你的其他選擇是使用extend。這將是DRYer方法，而不是隨時重複使用混合，因爲它逗號分隔選擇器而不是複製樣式。

例

.bacon {  
    color: red; 
} 

.smokey { 
    @extend .bacon; 
} 

// Outputs 
.bacon, .smokey { 
    color: red; 
}

http://css-tricks.com/the-extend-concept/

來源

2014-06-06 16:29:04

謝謝你提醒我'擴展'。雖然如果我保持最高級別的工作流程，而不是擁有包含相同清除修復代碼的幾十個單獨的選擇器，那麼我會有一個選擇器，其中包含數十個逗號分隔的情況。在我看來，這仍然是一個可能的性能問題。 – acjay

CSS預處理器mixin與標記類

回答

相關問題