Was ist CSS-Modularität? So implementieren Sie CSS-Modularität

Der Inhalt dieses Artikels befasst sich mit der Frage, was CSS-Modularität ist. Die Implementierungsmethode der CSS-Modularisierung hat einen gewissen Referenzwert. Ich hoffe, dass sie für Sie hilfreich ist.

CSS-Modularität

Für CSS (Cascading Style Sheets) wurde von Anfang an entschieden, dass es nicht programmiert werden kann und nicht einmal eine interpretierte Sprache ist. Es kann nur als einfacher Cascading-Stil verwendet werden Sheets, die HTML-Elemente formatieren.

Aber mit der Entwicklung des Front-Ends sind Front-End-Projekte immer größer und komplexer geworden, und die Community hat untersucht, wie man Front-End-Code (js/css/html) und Ressourcen (Bilder) verwaltet , Schriftarten, ...).

In diesem Prozess hat die Community die Modularität von js (amd, commonjs, es6) untersucht. Jetzt ist es einfach, große Projekte mit js zu entwickeln, aber die Modularität von CSS ist noch nicht besonders beliebt.

1. Gruppierte Modularisierung

Dies ist die früheste Implementierung der CSS-Modularisierung und die wichtigste Methode, die derzeit auf diese Weise entwickelt wird.

Gruppierte Modularisierung besteht darin, Benennungen mit unterschiedlichen Präfixen zu verwenden, die unterschiedliche Bedeutungen darstellen, um eine Stilgruppierung und Datei-Chunking zu erreichen und so den Zweck der Modularisierung zu erreichen.

Zum Beispiel:

# 目录结构
|-- 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 {
    ...
}    
...

Diese Methode ist nicht modular im eigentlichen Sinne, da sie globale Konflikte nicht vermeiden kann, sondern natives CSS Da ich nicht programmieren kann, ist dieses Problem unvermeidlich. Obwohl die Gruppierung nicht im eigentlichen Sinne modular ist, löst sie sich nicht von CSS. Da es sich um einen nativen Mechanismus handelt, verwenden viele Komponenten von Drittanbietern diese Methode beim Exportieren von CSS-Dateien.

Zum Beispiel wird das Präfix ant- im von ant-design exportierten CSS verwendet, das Präfix mui- wird im von mui exportierten CSS usw. verwendet.

1.1 Best Practices

CSS-Benennungsgruppierung wird seit der Geburt von CSS praktiziert, daher hat sich die Community sehr ausgereift entwickelt, beispielsweise das CSS-Spezifikationsframework von NetEase NEC.

Ergänzung:

Eine CSS-Datei sollte nicht zu groß sein, Sie können @import verwenden, um die Datei in Blöcke zu unterteilen

Verwenden Sie nicht #id [attr]; Versuchen Sie für die Stilwiedergabe so oft wie möglich .class; zu verwenden.

Wenn Sie die JS-Bibliothek zum Betreiben von dom verwenden, versuchen Sie, .class nicht zu verwenden, sondern #id-Datensätze wie $(' #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-Spracherweiterung

Da CSS keine Programmiersprache ist, kann es keine Variablen, Funktionen, Urteile, Schleifen und Berechnungen deklarieren und auch nicht verschachtelt werden, sodass dies das Schreiben erleichtert Stil Ein ineffizienter und langweiliger Job.

Um dieses Problem zu lösen, hat die Community während der Erkundung hauptsächlich zwei Erweiterungssprachen entwickelt, die mit CSS kompatibel sind und die Programmierfunktionen erweitern:

Sie können Variablen und Funktionen deklarieren und einige einfache Berechnungen, Beurteilungen und Schleifen durchführen.

Sie können Selektoren verschachteln, was das Schreiben von Inhalten erspart und die Lesbarkeit verbessert.

@; import vermeidet doppelte Importprobleme, sodass Sie andere Dateien bedenkenlos importieren können.

Aus modularer Sicht erweitern Less und Sass nur die Funktionen von CSS, implementieren jedoch keine Modularisierung auf Sprachebene, da das Problem globaler Namenskonflikte weiterhin besteht.

2. Modularisierung (exportiert als js-Objekt)

Wenn Sie CSS im wahrsten Sinne des Wortes modularisieren möchten, kann dies vorerst nicht auf Sprachebene berücksichtigt werden Es kann nur auf Werkzeugebene aus der Perspektive der Implementierung betrachtet werden.

Derzeit ist es besser, mit js die CSS-Datei zu laden, den CSS-Inhalt als Objekt zu exportieren, mit js den gesamten Dom-Baum zu rendern und die entsprechenden Stile den entsprechenden Elementen zuzuordnen. Wir haben die Möglichkeit, zusätzliche CSS-Verarbeitungen durchzuführen, um Modularität zu erreichen.

Zum Beispiel:

Quelldatei

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

Tatsächliche Wirkung

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

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

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

Bei diesem Konvertierungsprozess wird basierend auf dem Speicherort und Inhalt der Datei eine global eindeutige Base64-Zeichenfolge generiert und der ursprüngliche Name ersetzt, um das Problem globaler Namenskonflikte zu vermeiden und so den Zweck der Modularisierung zu erreichen . Daher gibt es während des Entwicklungsprozesses kein globales Stilkonfliktproblem.

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

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

Für die Definition der CSS-Modularität siehe CSS-Module. Die Hauptanforderungen für das Schreiben von CSS sind:

1. .class sollte anstelle von #id [attr] verwendet werden (da dort ist nur .class kann als Attribut eines Objekts exportiert werden); Letzteres muss über „styles[‘class-name‘]“ aufgerufen werden.

Weitere Funktionen finden Sie unter CSS-Module.

Natürlich erfordert diese Funktion die Unterstützung des Build-Tools. Wenn Sie Webpack zum Erstellen des Projekts verwenden, können Sie CSS-Loader verwenden und options.modules auf true setzen, um die modulare Funktion zu verwenden.

3. Modularisierung (integrierte JS, Bindungskomponenten)

Mit der Entwicklung der Front-End-Komponentisierung hat sich die Aktualisierung von Komponentisierungs-Frameworks wie React und Vue langsam entwickelt Die gesamten Ressourcen der Komponente sind gekapselt und der Aufrufer muss sich nicht um die interne Implementierung und die Ressourcen der Komponente kümmern. Es reicht aus, dieses Objekt direkt aufzurufen.

比如（以 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教程栏目。

Das obige ist der detaillierte Inhalt vonWas ist CSS-Modularität? So implementieren Sie CSS-Modularität. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!