我喜歡用Svelte編寫樣式

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

單文件組件：優雅的簡單性

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

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

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

範圍範圍：無衝突的樣式

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

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

全球風格：保持控制

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

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

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

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

簡明條件類：簡化的語法

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

導出讓big = false;
導出令ghost = false;

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

<slot></slot>

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

令class_name ='';
導出{class_name作為class};
<slot></slot>

這樣使用：

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

從BEM到Svelte：簡單革命

比較BEM風格的卡片組件：

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

相當於它的同等學歷：

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

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

預處理器兼容性：擴展選項

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

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

動態值和CSS變量：強大的組合

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

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

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

以上是我喜歡用Svelte編寫樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！