Svelte的受歡迎程度不斷增長（超過24,000個Github星星）當(dāng)之無愧。由Rich Harris（也在滾動後面）創(chuàng)建，可以說是最簡單的JavaScript框架。儘管其性能，內(nèi)置狀態(tài)管理和乾淨(jìng)的標(biāo)記令人信服，但其CSS處理是我的出色功能。

單文件組件：優(yōu)雅的簡單性

React的文檔著名地指出：“ React對樣式的定義沒有意見?！?Svelte採用了另一種方法：“一個沒有內(nèi)置方式可以在組件中添加樣式的UI框架是未完成的，” Harris說。

Svelte可讓您直接在組件中編寫CSS，從而鏡像標(biāo)準(zhǔn)項目工作流程。 CSS-IN-JS解決方案仍然是一種選項，但是Svelte的方法通過將JavaScript，Markup和樣式組合在單個.svelte文件中來簡化開發(fā)，這是VUE用戶熟悉的概念。

 // button.svelte
按鈕 {
  邊界拉迪烏斯：0;
  背景色：aqua;
}
<slot></slot>

範(fàn)圍範(fàn)圍：無衝突的樣式

Svelte的默認示範(fàn)樣式可以防止組件之間的樣式衝突。類似於CSS模塊或CSS-IN-JS，它在編譯過程中生成了唯一的類名稱。這允許在沒有復(fù)雜的類名稱管理的情況下使用簡單的選擇器（例如div和button ）。組件中的多個按鈕仍然需要分類的類，並且這些類也被範(fàn)圍範(fàn)圍。

雖然生成的類名稱（例如svelte-433xyz ）在DevTools中似乎是隱秘的，但這種方法比BEM命名約定要簡單得多。您可以將Svelte的示範(fàn)樣式與用於全球樣式，公用事業(yè)類或CSS框架的外部樣式表相結(jié)合。

全球風(fēng)格：保持控制

可以在鏈接的樣式表中定義全局樣式，或者在必要時使用以下方式在Svelte組件中使用:global 。這允許在需要時有針對性的範(fàn)圍範(fàn)圍。例如，模態(tài)組件可能會使用：

 ：global（.noscroll）{
  溢出：隱藏；
}

未使用的樣式檢測：提高效率

Svelte的編譯器標(biāo)誌未使用的樣式，通過識別和消除冗餘代碼來提高效率。

簡明條件類：簡化的語法

Svelte簡化了有條件的類應(yīng)用程序。當(dāng)JavaScript變量和類名稱匹配時，語法非常簡潔：

導(dǎo)出讓big = false;
導(dǎo)出令ghost = false;

.big {font-size：20px;顯示：塊;寬度：100％； }
.ghost {Background-Color：透明;邊界：固體電流2px; }

<slot></slot>

ghost和big類是根據(jù)相應(yīng)的道具應(yīng)用的。即使名稱不匹配，也可以通過單個道具有效地傳遞多個類：

令class_name ='';
導(dǎo)出{class_name作為class};
<slot></slot>

這樣使用：

<button class="my-class another-class">點擊我</button>

從BEM到Svelte：簡單革命

比較BEM風(fēng)格的卡片組件：

 .c-card {border-radius：3px;邊界：實心2px; }
.c-card__title {text-transform：uppercase; }
.c-card__Text {顏色：灰色; }
。 }

相當(dāng)於它的同等學(xué)歷：

 div {border-radius：3px;邊界：實心2px; }
h2 {text-transform：uppercase; }
p {顏色：灰色; }
。 }
<div class:featured="">
  <h2>{標(biāo)題}</h2>
  <p><slot></slot></p>
</div>

Svelte版本明顯更簡潔和可讀。

預(yù)處理器兼容性：擴展選項

儘管對敏捷的關(guān)鍵較少，但通過svelte-preprocess支持了預(yù)處理器。這允許使用Sass，Simest，手寫筆和Postcss。對於Sass，在樣式標(biāo)籤中安裝svelte-preprocess和node-sass ，配置rollup.config.js ，然後使用type="text/scss"或lang="scss" 。

 $ pink：RGB（200，0，220）;
p {顏色：黑色;跨度{顏色：$ pink; }}}

動態(tài)值和CSS變量：強大的組合

儘管Svelte無法直接使用CSS中的JavaScript變量，但CSS變量提供了解決方法：

導(dǎo)出令cols = 4;
ul {
  顯示：網(wǎng)格；
  寬度：100％；
  網(wǎng)格柱隙：16px;
  網(wǎng)格 - 行隙：16px;
  網(wǎng)格板柱：重複（var（ - 列），1fr）;
}
<slot></slot>

總之，Svelte提供了一種非常直觀且用戶友好的API，超過了我使用的其他方法（Sass，Shadow Dom，CSS-In-JS，BEM，BEM，Atomic CSS和PostCSS）。要深入研究，請參閱里奇·哈里斯（Rich Harris）的“僅寫CSS的禪宗”。

以上是我喜歡用Svelte編寫樣式的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！