Qu'est-ce que la modularité CSS ? Comment implémenter la modularité CSS

Le contenu de cet article porte sur qu'est-ce que la modularité CSS ? La méthode d'implémentation de la modularisation CSS a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère qu'elle vous sera utile.

Modularité CSS

CSS (Cascading Style Sheets) a été décidé dès le début qu'il ne peut pas être programmé et n'est même pas un langage interprété. Il ne peut être utilisé que comme un simple style en cascade. feuilles, qui formatent les éléments HTML.

Mais avec le développement du front-end, les projets front-end sont devenus de plus en plus vastes et complexes, et la communauté a exploré comment gérer le code front-end (js/css/html) et les ressources (images , polices, ...).

Dans ce processus, la communauté a exploré la modularité de js (amd, commonjs, es6). Il est désormais facile de développer de grands projets avec js, mais la modularité de css n'a pas encore été particulièrement populaire.

1. Modularisation groupée

Il s'agit de la première implémentation de la modularisation CSS et de la manière la plus importante de développer désormais de nombreux composants et développeurs.

La modularisation groupée consiste à utiliser la dénomination, avec différents préfixes représentant différentes significations, pour obtenir un regroupement de styles et un regroupement de fichiers afin d'atteindre l'objectif de modularisation.

Par exemple :

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

Cette méthode n'est pas modulaire au sens propre car elle ne peut pas éviter les conflits globaux, mais du CSS natif Je n'ai pas la capacité de programmer, ce problème est donc inévitable. Bien que le regroupement ne soit pas modulaire au sens propre du terme, cette méthode ne rompt pas avec le CSS. Il s'agit d'un mécanisme natif, c'est pourquoi de nombreux composants tiers utilisent cette méthode lors de l'exportation de fichiers CSS.

Par exemple, le préfixe ant- est utilisé dans le css exporté par ant-design, le préfixe mui- est utilisé dans le css exporté par mui, etc.

1.1 Meilleures pratiques

Le regroupement de noms CSS est pratiqué depuis longtemps. Il existe depuis la naissance du CSS, la communauté s'est donc développée de manière très mature, comme le cadre de spécification CSS de NetEase. NEC.

Supplément :

Un fichier CSS ne doit pas être trop volumineux, vous pouvez utiliser @import pour diviser le fichier en blocs

N'utilisez pas #id [attr] ; pour le rendu de style, essayez de l'utiliser autant que possible .class;

Lorsque vous utilisez la bibliothèque js pour faire fonctionner dom, essayez de ne pas utiliser .class, essayez d'utiliser l'ensemble de données #id, tel que $(' #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 Extension du langage CSS

Parce que CSS n'est pas un langage de programmation, il ne peut pas déclarer de variables, de fonctions, faire des jugements, des boucles et des calculs, et ne peut pas s'imbriquer, ce qui rend l'écriture du style est un travail inefficace et ennuyeux.

Afin de résoudre ce problème, la communauté a principalement dérivé deux langages d'extension​​less et sass lors de l'exploration. Ils sont compatibles avec CSS et disposent de fonctions de programmation étendues. Ils apportent principalement les fonctionnalités suivantes :

Vous pouvez déclarer des variables et des fonctions, et effectuer des calculs, des jugements et des boucles simples ;

Vous pouvez imbriquer des sélecteurs, ce qui permet d'économiser du contenu et est plus lisible ;

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

@import évite les problèmes d'importation répétés, vous pouvez donc importer d'autres fichiers en toute confiance.

D'un point de vue modulaire, less et sass ne font qu'étendre les fonctions du CSS, mais n'implémentent pas la modularisation au niveau du langage car le problème des conflits de noms globaux existe toujours.

2. Modularisation (exportée comme objet js)

Si vous souhaitez que CSS ait une fonction modulaire au vrai sens du terme, cela ne peut pas être envisagé au niveau du langage pour le moment, donc vous ne pouvez utiliser les outils que du point de vue de la mise en œuvre.

Actuellement, une meilleure façon consiste à utiliser js pour charger le fichier CSS, à exporter le contenu CSS en tant qu'objet, à utiliser js pour restituer l'intégralité de l'arborescence dom et à faire correspondre les styles correspondants aux éléments correspondants. nous avons la possibilité de faire des traitements supplémentaires sur css pour atteindre la modularité.

Par exemple :

Fichier source

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

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

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

Effet réel

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

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

Au cours de ce processus de conversion, une chaîne base64 unique au monde est générée en fonction de l'emplacement et du contenu du fichier, et le nom d'origine est remplacé, évitant ainsi le problème des conflits de noms globaux, ainsi atteindre l'objectif de modularité. Par conséquent, il n’y a pas de problème de conflit de style global pendant le processus de développement.

# common.css 文件
.container {
    ...
}
.el1 {
    ...
}
.el2 {
    ...
}    
...    
    
# page1/section1.css 文件
.container {
    ...
}
.title {
    ...
}    
.content {
    ...
}    
...

# page2/section1.css 文件
.container {
    ...
}
.title {
    ...
}    
.content {
    ...
}
...

Pour la définition de la modularité CSS, voir css-modules. Les principales exigences pour écrire du CSS sont :

1.class doit être utilisé à la place de #id [attr] ( car Seul .class peut être exporté en tant qu'attribut d'un objet);

2 Il est recommandé d'écrire dans .className au lieu de .class-name (le premier est accessible via styles.className et le ce dernier doit être accessible via styles['class-name '] accessible).

Pour plus de fonctionnalités, consultez les modules CSS.

Bien sûr, cette fonction nécessite la prise en charge de l'outil de construction. Si vous utilisez webpack pour construire le projet, vous pouvez utiliser css-loader et définir options.modules sur true pour utiliser la fonction modulaire.

3. Modularisation (js intégré, composants de liaison)

Avec le développement de la composantisation frontale, la mise à jour des frameworks de composantisation, tels que React et Vue, s'est lentement développée pour devenir le entier Les ressources du composant sont encapsulées et un seul objet est exposé au monde extérieur. L'appelant n'a pas besoin de se soucier de l'implémentation interne et des ressources du composant. Il suffit d'appeler directement cet objet.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!