Svelteでスタイルを書くのが好きなこと

Svelteの人気の高まり（24,000以上のGithub Stars）は当然のことです。 Rich Harris（Rollupの背後）によって作成されたこれは、間違いなく利用可能な最も単純なJavaScriptフレームワークです。そのパフォーマンス、ビルトイン州管理、クリーンマークアップは説得力がありますが、CSSの取り扱いは私にとって傑出した機能です。

シングルファイルコンポーネント：シンプルさの優雅さ

Reactの文書は、「Reactはスタイルがどのように定義されているかについて意見を持っていない」と有名に述べています。 Svelteは別のアプローチを取ります。「コンポーネントにスタイルを追加するための組み込みの方法がないUIフレームワークは未完成です」とHarris氏は言います。

Svelteを使用すると、標準のプロジェクトワークフローをミラーリングして、コンポーネント内にCSSを直接​​記述できます。 CSS-in-JSソリューションは引き続きオプションですが、Svelteのアプローチは、JavaScript、Markup、およびStylingを単一の.svelteファイルに組み合わせて開発を合理化します。

 // button.svelte
ボタン {
  ボーダーラジウス：0;
  背景色：アクア;
}
<slot></slot>

スコープスタイル：競合のないスタイリング

Svelteのデフォルトのスコープスタイリングは、コンポーネント間のスタイルの競合を防ぎます。 CSSモジュールまたはCSS-in-JSと同様に、コンピレーション中に一意のクラス名を生成します。これにより、複雑なクラス名管理なしで単純なセレクター（ divやbuttonなど）を使用できます。コンポーネント内の複数のボタンは、引き続き区別のためにクラスが必要であり、これらのクラスもスコープされています。

生成されたクラス名（例えば、 svelte-433xyz ）はDevtoolsでは謎めいたと思われるかもしれませんが、このアプローチはBEMの命名規則よりもはるかに単純です。 Svelteのスコープスタイルを、グローバルスタイル、ユーティリティクラス、またはCSSフレームワーク用の外部スタイルシートと組み合わせることができます。

グローバルスタイル：コントロールの維持

グローバルスタイルは、リンクされたスタイルシートで、または必要に応じて、 :globalを使用してスベルトコンポーネント内で定義できます。これにより、必要に応じてターゲットを絞ったスコーピングのオーバーライドが可能になります。たとえば、モーダルコンポーネントは以下を使用する場合があります。

 ：global（.noscroll）{
  オーバーフロー：隠し;
}

未使用スタイルの検出：効率向上

Svelteのコンパイラは未使用のスタイルにフラグを立て、冗長コードを識別および排除することにより効率を高めます。

簡潔な条件クラス：合理化された構文

Svelteは条件付きクラスアプリケーションを簡素化します。 JavaScript変数とクラス名が一致する場合、構文は非常に簡潔です。

 Export big = false;
ghost = falseをエクスポートします。

.big {font-size：20px;表示：ブロック;幅：100％; }
.ghost {background-color：透過;ボーダー：ソリッド電流color 2px; }

<slot></slot>

ghostとbigクラスは、対応する小道具に基づいて適用されます。名前が一致しなくても、単一のプロップを介して複数のクラスを効率的に渡すことができます。

 let class_name = '';
export {class_name as class};
<slot></slot>

このように使用：

<button class="my-class another-class">私をクリックしてください</button>

BEMからSvelteまで：シンプルさの革命

BEMスタイルのカードコンポーネントを比較してください。

 .c-card {border-radius：3px;国境：ソリッド2px; }
.c-card__title {text-transform：appercase; }
.c-card__text {color：gray; }
.c-card  -  featured {border-color：gold; }

その膨大な同等物へ：

 div {border-radius：3px;国境：ソリッド2px; }
H2 {Text-Transform：大文字; }
p {color：灰色; }
.Featured {Border-Color：Gold; }
<div class:featured="">
  <h2 id="タイトル">{タイトル}</h2>
  <p><slot></slot></p>
</div>

Svelteバージョンは、非常に簡潔で読みやすいです。

プリプロセッサの互換性：オプションの拡大

Svelteではあまり重要ではありませんが、Preprocessorsはsvelte-preprocessを介してサポートされています。これにより、SASS、Less、Stylus、およびPostCSSを使用できます。 SASSの場合、 svelte-preprocessとnode-sassをインストールし、 rollup.config.jsを構成し、 type="text/scss"またはlang="scss"を使用します。

 $ピンク：RGB（200、0、220）;
p {color：black; span {color：$ pink; }}

動的値とCSS変数：強力な組み合わせ

SvelteはCSSでJavaScript変数を直接使用することはできませんが、CSS変数は回避策を提供します。

 cols = 4をエクスポートします。
ul {
  ディスプレイ：グリッド;
  幅：100％;
  Grid-Column-Gap：16px;
  グリッドローギャップ：16px;
  Grid-Template-Columns：Repeat（var（ - 列）、1fr）;
}
<slot></slot>

結論として、Svelteは非常に直感的でユーザーフレンドリーなスタイリングAPIを提供し、私が使用した他のアプローチ（SASS、Shadow Dom、CSS-in-JS、BEM、Atomic CSS、PostCSS）を上回ります。より深いダイビングについては、リッチハリスの「CSSを書くだけの禅」を参照してください。

以上がSvelteでスタイルを書くのが好きなことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。