搜索
首页web前端css教程什么是css模块化?css模块化的实现方法

什么是css模块化?css模块化的实现方法

Sep 17, 2018 pm 02:18 PM
cssjavascript前端

本篇文章给大家带来的内容是关于什么是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"]')。

<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 不是编程语言,所以不能声明变量、函数,不能做判断、循环和计算,也不能嵌套,所以这就使得写样式是一个效率底下且又枯燥的活儿。

为了解决这个问题,社区在探索中主要衍生出了两种拓展语言 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 = '<p class="&#39; + styles.className + &#39;">Hello!</p>';

实际效果

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

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

在这个转换过程中,根据文件的位置、内容生成一个全局唯一的 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 () => (
    <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中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
我们如何标记Google字体并创建Goofonts.com我们如何标记Google字体并创建Goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts是由开发人员和设计师丈夫签名的附带项目,它们都是版式的忠实拥护者。我们一直在标记Google

永恒的Web开发文章永恒的Web开发文章Apr 12, 2025 am 11:44 AM

Pavithra Kodmad向人们询问了他们认为是关于网络开发的一些最永恒的文章的建议

与部分元素的交易与部分元素的交易Apr 12, 2025 am 11:39 AM

同一天发表了两篇文章:

使用JavaScript API的状态练习GraphQl查询使用JavaScript API的状态练习GraphQl查询Apr 12, 2025 am 11:33 AM

学习如何构建GraphQL API可能具有挑战性。但是您可以学习如何在10分钟内使用GraphQL API!碰巧的是,我得到了完美的

组件级CMS组件级CMSApr 12, 2025 am 11:09 AM

当一个组件生活在数据查询居住在附近的数据查询的环境中时,视觉组件与

将类型设置在圆上...带偏移路径将类型设置在圆上...带偏移路径Apr 12, 2025 am 11:00 AM

这里是Yuanchuan的一些合法CSS骗局。有此CSS属性偏移路径。曾几何时,它被称为Motion-Path,然后被更名。我

'恢复”在CSS中有什么作用?'恢复”在CSS中有什么作用?Apr 12, 2025 am 10:59 AM

Miriam Suzanne在Mozilla开发人员的视频中解释了该主题。

现代恋人现代恋人Apr 12, 2025 am 10:58 AM

我喜欢这样的东西。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。