「Vue」は、実際のプロジェクトにおけるいくつかのフロントエンドスキンの実装、長所と短所について説明しています

序文

現代のフロントエンド分野では、スキニング機能がほぼすべてのアプリケーションで徐々に標準になり、特にダークナイトモードが促進された後、スキン機能が正式に一般の人々の視野に入りました。同様に、ウェブ分野では、特にバックグラウンド管理システムでは、その結果、機能がほぼ標準になり、最近行われていることにもそのような一連のメカニズムが含まれていることがあります〜

そこで本日は、実際にウェブでの複数の肌機能実装ソリューションの長所と短所についてお話します。この記事のソリューションは、ほとんど大物のブログ投稿からのものです。以下のコンテンツは、個人的な観点からのみ分析されています。それぞれの解決策自体はそうではありません。長所と短所はなく、使用環境に応じてさまざまな長所と短所が示されます。

原理

まず、スキンピーリングの原理についてお話しましょう。理解してしまえば、2種類しかありません。

1. 簡単に言うと、スタイルのオーバーライドはCSSの重みの優先順位を使用することであり、高重みのスタイルは低重みのスタイルをオーバーライドして、位置や色などを変更します。
2. 変数置換。SCSS、LESS、またはCSSの変数メカニズムを最大限に活用し、変数の値の差を使用して置換を行い、皮膚の機能を変化させます。

実際、私は個人的に、この2つの間に本質的な違いはないと感じています。

スキニングプログラム

1つ目：CSSスタイルのオーバーライド

このソリューションでは、CSS自体の機能を使用して実現でき、SCSS、LESSなどは使用されません（もちろん、SCSSとLESSは確実に実行でき、CSSプリプロセッサの機能は実際にCSSに基づいています。大きく進化しましたが、CSSでこの方法を実現できると言ってください）

例

Vueを例にとると、大まかなサンプルコードは次のとおりです。

<!-- 这是一个登陆界面的代码 -->
<template>
    <div class="page-account" :class="theme">
        <Login @on-submit="handleSubmit" class="login-conatiner">
            <UserName name="username" value="admin" class="login-username" />
            <Password name="password" class="login-password" value="admin" enter-to-submit />
            <div class="page-account-auto-login login-conatiner-light">
                <Checkbox v-model="autoLogin" size="large">{
    
    {
    
    
                    $t("page.login.remember")
                }}</Checkbox>
                <a href="">{
    
    {
    
     $t("page.login.forgot") }}</a>
            </div>
            <Submit>{
    
    {
    
     $t("page.login.submit") }}</Submit>
        </Login>
    </div>
</template>

コードに示されているように、クラスはコードにバインドされています。クラスの値は、vuexから取得したスタイル名、またはスキンのメインスタイル名である現在のインターフェイスの計算値、そしてクラス名に対応するCSSコードを大まかに次のように記述します。

<style scoped>
/** 白天模式 */
.light .login-conatiner {
    
    
    background: #ffffff;
    color: #333333;
    font-size: 1rem;
}
.light .login-username {
    
    
    background: #ffffff;
    color: #333333;
    font-size: 1rem;
}
.light .login-password {
    
    
    background: #ffffff;
    color: #333333;
    font-size: 1rem;
}

/** 夜晚模式 */
.dark .login-conatiner {
    
    
    background: #333333;
    color: #ffffff;
    font-size: 1rem;
}
.dark .login-username {
    
    
    background: #333333;
    color: #ffffff;
    font-size: 1rem;
}
.dark .login-password {
    
    
    background: #333333;
    color: #ffffff;
    font-size: 1rem;
}
</style>

Vuexのスキン名が変更されると、それに応じてスキン名の下の対応するクラス名の値が変更され、そのスタイルが元のスタイルを上書きして、スキニングの効果を実現します。

アドバンテージ

このスキンスキームの利点は、私には非常に明白です。つまり、変更が便利で、構造が非常に明確です。変更する場所はどこでも直接変更できます。結局のところ、優れたコードは、次のようなさまざまな要素を考慮するだけではありません。コードの量、原則、保守性などだけでなく、開始の難しさを考慮すると、プロジェクトを引き継ぐ新しい人でも、プロジェクトに少し慣れた後、すぐに追加と変更を開始できます。

欠点

複数のスキンセットには複数のスタイルシートがあり、コード量が多く、開発効率が比較的低く、複数の人が共同で開発する場合は、最初に合意することがあります。このスキームは実際には中小規模のプロジェクトです。、1つまたは2つのフロントエンド開発通信コストは低いです。

最適化

色を変数として均一に定義するなど、実際のプロジェクトで確実に最適化できます。実際、LESS、SASSだけでなく、CSS3の変数関数も次のようになります。

:root {
    
    
  --theme-light-bg: #ffffff; // 背景色
  --theme-light-color: #333333; // 字体色
  --theme-light-border: #e1e1e1; // 边框色
}

このように、色を統一して管理することができます。後でスキンのセットを追加するには、スキンに対応する色のセットを追加するだけで済み、より便利です。また、LESSまたはで管理する方が便利です。 SASS。これらのプリプロセッサは、可変関数を提供するだけでなく、ミキシング、ネスティング、さらには関数の関数も提供します...これらが使用されると、実際、このソリューションは実際のプロジェクトで非常に実行可能な関数だと個人的に思います。

2番目：変数の置換

実際、この方法は最初の方法とある程度似ています。最大の違いは、最初の方法はウェイトを使用してカバーするのに対し、2番目の方法はより直接的に設定することです。実際にはコア機能は1つだけです。

// 设置CSS变量值
document.body.style.setProperty(变量名，变量值);

この関数は、ルートノード上の対応するCSS変数の値を設定できます。この値を変更する限り、この値を参照するすべての場所が変更され、スキニングの効果が得られます。

例

たとえば、CSS変数のセットを設定します

// 默认值
:root {
    
    
  --theme-bg: #fff;
  --theme-color: rgb(51, 50, 50);
  --theme-size: 1rem;
}

以降のプロジェクトでは、私たち全員がこの変数のセットを使用します

<style scoped>
.login-conatiner {
    
    
    background: var(--theme-bg);
    color: var(--theme-bg);
    font-size: var(--theme-size);
}
.login-username {
    
    
    background: var(--theme-bg);
    color: var(--theme-bg);
    font-size: var(--theme-size);
}
.login-password {
    
    
   background: var(--theme-bg);
    color: var(--theme-bg);
    font-size: var(--theme-size);
}
</style>

ほぼこのようなもので、実際にスタイルを書くときに変数が一律に使われます。その後、スタイルを処理するためのjsファイルがあります。

const light = 'rgb(51, 50, 50)'
const dark = '#d6d6d6'

/**
 * 获取一组皮肤变量
 * @param {Boolean} state 样式判断条件
 */
function getTheme(state) {
    
    
    return {
    
    
        "theme-bg": state ? light : dark,
        "theme-color": state ? light : dark,
        "theme-size": state ? light : dark,
    };
}

/**
 * 设置变量值
 * @param {Boolean} state 样式判断条件
 */
function setTheme(state = true) {
    
    
    const theme = getTheme(state);

    Object.keys(theme).forEach((key) => {
    
    
        document.body.style.setProperty(`--${
      
      key}`, themeMap[key]);
    });
}

このjsファイルでは、get関数とset関数を定義できます。get関数は主にパラメーターに従ってスキンの値を取得し、set関数は主にルートノードの変数の値を設定します
。スイッチング関数がトリガーされ、直接渡すことができます。setTheme関数は、スキニングの効果を実現するためにルートノードの可変値を設定します。

アドバンテージ

明確な調整、多くのスタイルを書く必要はなく、いくつかの色を書くだけで、残りは色の値に従って自動的に塗りつぶされます。

欠点

これはCSS3の後の新しいプロパティであるため、互換性はまだ比較的低く、IEは次のように直接サポートしていません。

最適化

このスキームの最適化は主に2つの方向にあります。1つはLESSまたはSASSにアクセスし、これらのプリプロセッサの特性を使用してCSSコードの再利用性、可読性、保守性などをよりよく実現することです。
もう1つは互換性を解決することです。問題。ツールは次のとおりです。css-vars-ponyfill、npmアドレス：https ：//www.npmjs.com/package/css-vars-ponyfill、特定の使用法を検索できます。チュートリアルがたくさんあります。

参照する

Ruan Yifeng先生：" CSS変数チュートリアル";
MDN： " CSSカスタムプロパティ（変数）の使用";

まとめ

一般的に、スキニングの方向は基本的にこれら2つのスキームに基づいていますが、一部の実装方法では、CSSプリプロセッサを使用してカプセル化と実用性をさらに向上させ、優れた拡張機能を備えています。実際、まだ多くのランディングスキームがあります。たとえば、 ElementUIでのスキンの実装は非常に強力であり、学ぶ価値があります。