本篇文章给大家带来的内容是关于什么是css模块化？css模块化的实现方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
CSS 模块化
CSS(Cascading Style Sheets)，从诞生之初就决定了它无法编程，甚至连解释性语言都算不上，只能作为一种简单的层叠样式表，对 HTML 元素进行格式化。
但随着前端的发展，前端项目已经变得越来越庞大和复杂，社区也一直在探索如何以一种有效的方式去管理前端的代码（js/css/html）和资源（images, fonts, …）。
在这个过程中，社区探索出了 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 诞生之初就有了，所以社区已经发展很成熟了，比如网易的 css 规范框架 NEC，H-ui。
补充：
一个 css 文件不宜过大，可以使用 @import 进行文件分块；
样式渲染尽量不要使用 #id [attr]，应尽量使用 .class；
使用 js 库操作 dom 时，尽量不要用 .class，应尽量用 #id data-set，如 $(‘#main’), $(‘[data-tab=”1″]’)。
- tab1
- tab2
登录后复制
1.2 css 语言扩充
因为 css 不是编程语言，所以不能声明变量、函数，不能做判断、循环和计算，也不能嵌套，所以这就使得写样式是一个效率底下且又枯燥的活儿。
为了解决这个问题，社区在探索中主要衍生出了两种拓展语言 less 与 sass，它们兼容 css，并且拓展了编程的功能，主要是带来了以下的特性：
可以声明变量、函数，可以进行一些简单的计算、判断、循环；
可以嵌套选择器，这样节省了书写的内容，也更具阅读性；
.page1-section1 { ... .el-1 { ... .el-1-1 { ... } } .el-2 { ... } }
登录后复制
@import 避免重复导入问题，因此可以放心大胆的导入其他文件。
从模块化的角度来讲，less 与 sass 只是扩充了 css 的功能，但并没有在语言的层面做模块化，因为全局命名冲突的问题依然还在。
2. 模块化（导出为 js 对象）
想要让 css 具备真正意义上的模块化功能，暂时还不能从语言的层面来考虑，所以只能从工具的角度来实现。
目前比较好的方式是使用 js 来加载 css 文件，并将 css 的内容导出为一个对象，使用 js 来渲染整个 dom 树和匹配相应的样式到对应的元素上，在这个过程中，我们便有机会对 css 做额外的处理，来达到模块化的目的。
比如：
源文件
# style.css 文件.className { color: green;}# js 文件import styles from "./style.css";element.innerHTML = 'Hello!
';
登录后复制
实际效果
# style.css 文件._23_aKvs-b8bW2Vg3fwHozO { color: green;}# DOMHello!
登录后复制
在这个转换过程中，根据文件的位置、内容生成一个全局唯一的 base64 字符串，替换原来的名称，避免了全局命名冲突的问题，这样便达到了模块化的目的。所以，开发的过程中便无全局样式冲突的问题。
# common.css 文件.container { ...}.el1 { ...}.el2 { ...} ... # page1/section1.css 文件.container { ...}.title { ...} .content { ...} ...# page2/section1.css 文件.container { ...}.title { ...} .content { ...}...
登录后复制
对 css 模块化的定义参见 css-modules，其中对 css 书写需求主要是：
1、应当用 .class，而非#id [attr]（因为只有 .class 才能导出为对象的属性）；
2、推荐用 .className 书写，而非 .class-name（前者可以通过 styles.className 访问，后者需要通过 styles[‘class-name’] 才能访问）。
更多功能可以查看 css-modules。
当然这个功能需要构建工具的支持，如果你是使用 webpack 构建工程的话，可以使用 css-loader，并设置 options.modules 为 true， 便可使用模块化的功能了。
3. 模块化（内置 js，绑定组件）
随着前端组件化的发展，组件化框架的更新，如 react、vue，慢慢的发展为把整个组件的资源进行封装，并只对外暴露一个对象，而调用者无需关心组件的内部实现和资源，直接调用这个对象就够了。
比如（以 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 () => ()Hello! Hello!
Hi!{` .container { color: blue; } p:first-child { color: red; } .hello { color: yellow; } #hi { color: green; } `}
登录后复制
3.1.4 转码
babel path/to/hello.js -d target/dir
登录后复制
转码后的文件
import _JSXStyle from 'styled-jsx/style';export default () => ();Hello! Hello!
Hi!
登录后复制
3.1.5 运行
实际渲染效果
.container.jsx-234963469{ color:blue;}p.jsx-234963469:first-child{ color:red;}.hello.jsx-234963469{ color:yellow;}#hi.jsx-234963469{ color:green;} Hello! Hello!
Hi!
登录后复制
以上就是本篇文章的全部内容了，更多css相关内容请关注【创想鸟】的css教程栏目。
以上就是什么是css模块化？css模块化的实现方法的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2891941.html
