CSS的未來

zcfy發表於2016-07-03
CSS

　　什麼時候普通的CSS才能優秀到替代Sass, Less, Stylus, 以及 rest？

 

　　Web開發人員必須要面對的最艱難的一個事實是大多數人在瀏覽網站的時候使用的還是老版本、低功能的瀏覽器。瀏覽器一直在增加新的功能，但你通常沒法使用這些功能，除非你願意失去大量沒有更新瀏覽器的使用者。

　　當你使用 Electron 開發應用的時候就不存在這個問題了。因為你寫的Electron應用的程式碼執行在一個獨立的 Chromium 瀏覽器上。Chromium 是谷歌瀏覽器的核心引擎，由谷歌提供技術支援。同時，它也是開源的，這意味著社群大量的開發者每天都在優化它。

　CSS 自定義屬性

　　上週，Electron 釋出了一個支援CSS自定義屬性的新版本。如果你使用過類似 Sass 和 Less 的預處理語言，你可能已經很熟悉變數了，它們允許你定義可反覆使用的值，用於配色方案或者佈局等。變數可以使你的樣式表保持 DRY (Don't Repeat Yourself)，並且提高可維護性。

　　由於CSS的自定義屬性只是CSS的常規屬性， 因此它們可以通過JavaScript來操作。這微妙但強大的功能，使開發者在享受CSS硬體加速的同時可以動態地改變視覺介面，並能夠減少前端程式碼和樣式表之間的重複。

　　下面是一個使用自定義屬性的例子：

:root {  
    --primary-color: papayawhip;  
    --base-line-height: 1.4;
} 
.thing {  
    color: var(--primary-color);  
    margin: 0 0 calc(var(--base-line-height) * 1rem);
}

　　檢視 在谷歌瀏覽器的演示 (需要chrome版本高於49)

　CSS 混合(Mixin) 和 繼承

　　現在，我們的CSS中有變數了。這很不錯了，但它並不足夠讓我們寫出完美的CSS。我們真正需要的是一種可以寫可複用的CSS的方式。在 Sass, Less 以及 Stylus 這些功能早就存在了，但是在常規CSS中卻沒法實現。

　Enter the @apply Rule

　　谷歌的某人 正在開發一套新的規範：

此規範定義了@apply規則，它允許開發者在一個命名變數中儲存一組屬性，然後在其他樣式規則中的引用。

　　下面是一個使用@apply規則的例子：

body {  
    --alert: {    
        color: white;    
        padding: 15px;    
        margin: 1rem 0;    
        border-radius: 6px;  
    }
} 
.alert-success {  
    @apply --alert;  
    background-color: olivedrab;
}
.alert-warning {  
    @apply --alert;  
    background-color: firebrick;
}

　　在寫這篇文章時(2016年4月8日)，這個功能仍舊非常新，並沒有被谷歌瀏覽器甚至 Chrome Canary 支援，但是在最新的 Chromium nightly 中通過啟用標記(flag)是可以實現的。

　　自己來嘗試@apply規則的話， 可以先下載最新的Chromium，然後從通過啟用標記來實現@apply。下面是在 OS X系統中的做法：

/Applications/Chromium.app/Contents/MacOS/Chromium \  --enable-blink-features=CSSApplyAtRules

　　檢視以上規則所有組合出來的炫酷樣式，可以參考我的 codepen 演示:

　　@apply 在Chromium瀏覽器上的 Codepen 演示

　從現在開始編寫未來的的CSS

　　一旦@apply被Chromium 和 Electron所支援，我們就能夠使用原生CSS編寫乾淨可維護的樣式。但在那一天到來之前，我們仍然需要不斷地學習前處理器來填補這些空白。

　　現在有至少兩個專案允許你寫未來的CSS: Myth 和 cssnext。在這兩個專案中，cssnext 更加活躍，甚至有一個專門的git issue來促進 @apply 的實現 (譯者注: 最新版本的 postcss-cssnext 已經支援 @apply 規則)。

　　以上就是CSS的未來。

　　原文：http://zeke.sikelianos.com/css-from-the-future/

相關文章