在 Svelte 中使用 CSS-in-JS

時間 2021-02-22

標籤 javascript css html java segmentfault 框架性能優化 spa code 欄目 CSS 简体版

原文原文鏈接

你即使不須要，但你能夠。

注意：原文發表於2018-12-26，隨着框架不斷演進，部份內容可能已不適用。javascript

CSS 是任何 Web 應用程序的核心部分。css

寬泛而論，若是一個 UI 框架沒有內置向組件添加樣式的方式，那麼它就是半成品。html

這即是爲什麼 Svelte 容許你在組件的 <style> 標籤中添加 CSS 的緣故。java

將 CSS 與標記共存，意味着咱們能夠解決開發人員在編寫 CSS 時遇到的最大問題，在不引入新的問題的同時，還提供極佳的開發體驗。segmentfault

可是 Svelte 的樣式處理確實存在一些限制，在組件之間共享樣式或者應用級優化都艱難重重。框架

這些是咱們計劃在將來版本中解決的，不過與此同時，若是你亟需這些功能的話，你能夠使用與框架無關的 CSS-in-JS 庫。性能

示例

在這裏，咱們用 Emotion 來生成能夠跨多個組件中使用的範圍受限的類名：優化

App.sveltespa

<script>
  import { comicSans, link } from './styles.js';
  import Hero from './Hero.svelte';
</script>

<Hero/>

<div class={comicSans}>
  <p>
    Did you enjoy your lunch, mom? You drank it fast enough. 
    I know, I just call her Annabelle cause she's shaped like a…
    she's the belle of the ball! YOU'RE the Chiclet! Not me. 
    Caw ca caw, caw ca caw, caw ca caw! 
    A Colombian cartel that WON'T kidnap and kill you. 
    You go buy a tape recorder and record yourself for a whole day. 
  <a class={link} href="https://bluthipsum.com/">I think you'll be surprised at some of your phrasing.</a>
  </p>
</div>

Hero.sveltecode

<script>
  import { title, comicSans, box } from './styles.js';
</script>

<div class="{title} {comicSans}">
  <h1>
    <div class={box}>
      <div class={box}>
        <div class={box}>CSS</div>
        in JS
      </div>
      in HTML
    </div>
  </h1>
</div>

styles.js

import emotion from 'emotion/dist/emotion.umd.min.js';

const { css } = emotion;

const brand = '#74D900';

export const title = css`
  color: ${brand};
  font-size: 1em;
  white-space: nowrap;
`;

export const comicSans = css`
  font-family: 'Comic Sans MS', cursive;
`;

export const box = css`
  position: relative;
  display: inline-block;
  border: 2px solid ${brand};
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
`;

export const link = css`
  color: inherit;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px solid ${brand};
  &:hover {
    text-decoration: none;
    background: ${brand};
  }
`;

不過必定要提醒你的是，大多數的 CSS-in-JS 庫都有一個運行時，許多庫在構建時，不支持將樣式靜態提取到單獨的 .css 文件中（這對於獲取最佳性能相當重要）。

所以，僅在你的應用有迫切須要時才建議使用 CSS-in-JS！

請注意，你也能夠混合搭配 CSS-in-JS 和 Svelte 內置的 CSS 處理二者一塊兒使用。

< The End >

- 窗明几淨，靜候時日變遷 -