CSSのモジュール性とは何ですか? CSSモジュール性を実装する方法

この記事の内容は、CSS モジュール性とは何ですか? CSSモジュール化の実装方法は参考になると思います。

CSS のモジュール性

CSS (Cascading Style Sheets) はプログラムできないことが最初から決まっており、インタプリタ言語ですらないため、単純な Cascading スタイルとしてのみ使用できます。 HTML 要素をフォーマットするシート。

しかし、フロントエンドの開発に伴い、フロントエンド プロジェクトはますます大規模かつ複雑になり、コミュニティはフロントエンド コード (js/css/html) とリソース (画像) を管理する方法を模索してきました。 、フォント、...)。

このプロセスで、コミュニティは js のモジュール性 (amd、commonjs、es6) を検討してきました。現在では、js を使用して大規模なプロジェクトを開発するのは簡単ですが、css のモジュール性はまだあまり普及していません。

1. グループ化モジュール化

これは CSS モジュール化の初期の実装であり、現在多くのコンポーネントと開発者がこの方法で開発しています。

グループ化されたモジュール化では、異なる意味を表す異なるプレフィックスを使用した名前付けを使用して、スタイルのグループ化とファイルのチャンク化を実現し、モジュール化の目的を達成します。

例:

# 目录结构
|-- one/page/css/ 某个页面的 css 目录
    |-- common.css 通用的 css
    |-- page1/ 单页面1
        |-- section1.css 区域1 css
        |-- section2.css 区域2 css
    |-- page2/ 单页面2
    |-- ...
    
# common.css 文件
.c-el-1 {
    ...
}
.c-el-2 {
    ...
}    
...    
    
# page1/section1.css 文件
.page1-section1 {
    ...
}
.page1-section1 .el-1 {
    ...
}    
.page1-section1 .el-2 {
    ...
}    
...

# page1/section2.css 文件
.page1-section2 {
    ...
}
.page1-section2 .el-1 {
    ...
}    
.page1-section2 .el-2 {
    ...
}    
...

このメソッドは、グローバルな競合を回避できないため、本当の意味ではモジュール式ではありませんが、ネイティブ CSS 私にはプログラミング能力がないので、この問題は避けられません。グループ化は本当の意味ではモジュール化されていませんが、この方法は CSS から脱却するものではありません。 これはネイティブ メカニズムであるため、CSS ファイルをエクスポートするときに多くのサードパーティ コンポーネントがこのメソッドを使用します。

たとえば、ant-design によってエクスポートされた CSS では ant- 接頭辞が使用され、mui によってエクスポートされた CSS では mui- 接頭辞が使用されます。

1.1 ベスト プラクティス

css 名前付けグループ化は CSS の誕生以来ずっと実践されてきたため、NetEase の CSS 仕様フレームワークなど、コミュニティは非常に成熟して発展しました。 NEC。

補足:

CSS ファイルは大きすぎないように注意してください。@import を使用してファイルをブロックに分割できます。#id [attr] は使用しないでください。スタイルのレンダリングに使用しますが、できる限り .class; を使用するようにしてください。

js ライブラリを使用して dom を操作する場合は、.class を使用せず、$( などの #id data-set を使用するようにしてください。 '#main')、$('[data-tab="1 "]')。

<ul>
    <li data-tab="1">tab1</li>
    <li data-tab="2">tab2</li>
</ul>
<p data-tab-container="1"></p>
<p data-tab-container="2"></p>

1.2 css 言語の拡張

css はプログラミング言語ではないため、変数、関数の宣言、判定、ループ、計算、ネストができないため、書き方が複雑になります。非効率的で退屈な仕事。

この問題を解決するために、コミュニティは主に、CSS と互換性があり、プログラミング機能を拡張する 2 つの拡張言語を開発しました。

変数と関数を宣言し、簡単な計算、判定、ループを実行できます。

セレクターをネストできるため、記述内容が節約され、読みやすくなります。 import によりインポートの問題が繰り返されることが回避されるため、他のファイルを安心してインポートできます。

モジュールの観点から見ると、less と sass は css の機能を拡張するだけであり、グローバルな名前の競合の問題が依然として存在するため、言語レベルでのモジュール化は実装されていません。

2. モジュール化（js オブジェクトとしてエクスポート）

CSS に本当の意味でモジュール機能を持​​たせたい場合は、当面は言語レベルで考えることはできませんので、ツールは実装の観点からのみ使用できます。

現時点では、js を使用して css ファイルをロードし、css コンテンツをオブジェクトとしてエクスポートし、js を使用して dom ツリー全体をレンダリングし、このプロセスで対応するスタイルを対応する要素に一致させる方が良い方法です。モジュール性を実現するために CSS で追加の処理を行う機会があります。

例:

ソース ファイル

.page1-section1 {
    ...
    
    .el-1 {
        ...
        
        .el-1-1 {
            ...
        }
    }
        
    .el-2 {
        ...
    }   
}

実際の効果

# style.css 文件
.className {
  color: green;
}

# js 文件
import styles from "./style.css";

element.innerHTML = '<p class="&#39; + styles.className + &#39;">Hello!</p>';

この変換プロセスでは、ファイルの場所と内容に基づいてグローバルに一意な Base64 文字列が生成され、グローバルな名前の競合の問題を回避するために元の名前が置き換えられ、モジュール化の目的が達成されます。 。したがって、開発プロセス中にグローバル スタイルの競合の問題は発生しません。

# style.css 文件
._23_aKvs-b8bW2Vg3fwHozO {
  color: green;
}

# DOM
<p class="_23_aKvs-b8bW2Vg3fwHozO">Hello!</p>

CSS のモジュール性の定義については、css-modules を参照してください。CSS を記述するための主な要件は次のとおりです。

1. #id [attr] の代わりに .class を使用する必要があります。 .class のみをオブジェクトの属性としてエクスポートできます);

2.class-name の代わりに .className に記述することをお勧めします (前者は、styles.className を通じてアクセスできます)。後者にアクセスするには、styles['class-name'] を通じてアクセスする必要があります)。

その他の機能については、css モジュールをご覧ください。

もちろん、この関数にはビルド ツールのサポートが必要です。webpack を使用してプロジェクトをビルドする場合は、css-loader を使用し、options.modules を true に設定してモジュラー関数を使用できます。

3. モジュール化 (組み込み js、バインディング コンポーネント)

フロントエンドのコンポーネント化の発展に伴い、react や vue などのコンポーネント化フレームワークの更新が徐々に発展してきました。全体 コンポーネントのリソースはカプセル化され、1 つのオブジェクトだけが外部に公開されます。呼び出し元は、このオブジェクトを直接呼び出すだけで十分です。

比如（以 react 为例），一个 Welcome 组件，包括一个 js 文件、一个 css 文件、图片：

# Welcome 组件
|-- welcome.js
|-- welcome.css
|-- images/

在 welcome.js 中便可如下加载（使用“导出为 js 对象”的 css 模块化）：

import styles from './welcome.css';
import image1 from './images/1.jpg';

其实，还有另外一种思路，就是将 css 内置 js 中，成为 js 的一部分。

这样做的目的，一是 css 的模块化，二是直接绑定到组件上。

比如，material-ui、styled-jsx、jss、vue style scoped 便是使用的这种方式。

这种方式的实现有很多种，这里主要介绍一下 styled-jsx。

3.1 styled-jsx

styled-jsx 的原理是根据当前文件的位置、内容生成一个全局唯一的标识，然后把这个标识追加到组件每一个元素上，每一个样式选择器上，达到模块化的目的。

可以参考官方文档，查看详细的用法，我在这里给个例子：

3.1.1 安装工具（babel 转码所需）

npm install --save styled-jsx

3.1.2 配置 babel plugins（如 .babelrc）

{
  "plugins": [
    "styled-jsx/babel"
  ]
}

3.1.3 添加源文件代码

hello.js

export default () => (
    <div className={&#39;container&#39;}>
        <p className={&#39;hello&#39;}>Hello! Hello!</p>
        <div id={&#39;hi&#39;}>Hi!</div>
        <style jsx>{`
          .container {
            color: blue;
          }
          p:first-child {
            color: red;
          }
          .hello {
            color: yellow;
          }
          #hi {
            color: green;
          }
        `}</style>
    </div>
)

3.1.4 转码

babel path/to/hello.js -d target/dir

转码后的文件

import _JSXStyle from 'styled-jsx/style';
export default () => (
    <div className={&#39;jsx-234963469&#39; + &#39; &#39; + &#39;container&#39;}>
        <p className={&#39;jsx-234963469&#39; + &#39; &#39; + &#39;hello&#39;}>Hello! Hello!</p>
        <div id={&#39;hi&#39;} className={"jsx-234963469"}>Hi!</div>
        <_JSXStyle styleId={"234963469"} css={".container.jsx-234963469{color:blue;}p.jsx-234963469:first-child{color:red;}.hello.jsx-234963469{color:yellow;}#hi.jsx-234963469{color:green;}"} />
    </div>
);

3.1.5 运行

实际渲染效果

<style type="text/css" data-styled-jsx="">
.container.jsx-234963469{
  color:blue;
}
p.jsx-234963469:first-child{
  color:red;
}
.hello.jsx-234963469{
  color:yellow;
}
#hi.jsx-234963469{
  color:green;
}
</style>
<div class="jsx-234963469 container">
  <p class="jsx-234963469 hello">Hello! Hello!</p>
  <div id="hi" class="jsx-234963469">Hi!</div>
</div>

以上就是本篇文章的全部内容了，更多css相关内容请关注php中文网的css教程栏目。

以上がCSSのモジュール性とは何ですか? CSSモジュール性を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。