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.
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.
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>
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'extensionless 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 {
...
}
}Fichier source
# style.css 文件
.className {
color: green;
}
# js 文件
import styles from "./style.css";
element.innerHTML = '<p class="' + styles.className + '">Hello!</p>';Effet réel
# style.css 文件
._23_aKvs-b8bW2Vg3fwHozO {
color: green;
}
# DOM
<p class="_23_aKvs-b8bW2Vg3fwHozO">Hello!</p># common.css 文件
.container {
...
}
.el1 {
...
}
.el2 {
...
}
...
# page1/section1.css 文件
.container {
...
}
.title {
...
}
.content {
...
}
...
# page2/section1.css 文件
.container {
...
}
.title {
...
}
.content {
...
}
...比如（以 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。
styled-jsx 的原理是根据当前文件的位置、内容生成一个全局唯一的标识，然后把这个标识追加到组件每一个元素上，每一个样式选择器上，达到模块化的目的。
可以参考官方文档，查看详细的用法，我在这里给个例子：
npm install --save styled-jsx
.babelrc）{
"plugins": [
"styled-jsx/babel"
]
}hello.js
export default () => (
<div className={'container'}>
<p className={'hello'}>Hello! Hello!</p>
<div id={'hi'}>Hi!</div>
<style jsx>{`
.container {
color: blue;
}
p:first-child {
color: red;
}
.hello {
color: yellow;
}
#hi {
color: green;
}
`}</style>
</div>
)babel path/to/hello.js -d target/dir
转码后的文件
import _JSXStyle from 'styled-jsx/style';
export default () => (
<div className={'jsx-234963469' + ' ' + 'container'}>
<p className={'jsx-234963469' + ' ' + 'hello'}>Hello! Hello!</p>
<div id={'hi'} 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>
);实际渲染效果
<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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
