资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端进阶（1） - CSS 模块化

前端进阶（1） - CSS 模块化

lauren_liuling / 1709人阅读

摘要：比如以为例，一个组件，包括一个文件一个文件图片组件在中便可如下加载使用导出为对象的模块化其实，还有另外一种思路，就是将内置中，成为的一部分。

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;
}

# DOM

Hello!

在这个转换过程中，根据文件的位置、内容生成一个全局唯一的 base64 字符串，替换原来的名称，避免了全局命名冲突的问题，这样便达到了模块化的目的。所以，开发的过程中便无全局样式冲突的问题。

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

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

对 css 模块化的定义参见 css-modules，其中对 css 书写需求主要是：

应当用 .class，而非#id [attr]（因为只有 .class 才能导出为对象的属性）；

推荐用 .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!

        
    

)
3.1.4 转码 
babel path/to/hello.js -d target/dir

转码后的文件

import _JSXStyle from "styled-jsx/style";

export default () => (
    

        
Hello! Hello!

        
Hi!

        <_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;}"} />
    

);
3.1.5 运行

实际渲染效果







  
Hello! Hello!

  
Hi!
4. 后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）

GPU云服务器 云服务器 前端模块化 前端css css前端 前端css框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95718.html

相关文章

  • 前端进阶（14） - 如何提升前端性能和响应速度

    摘要：一般建议文件最大不超过。按需加载可以减小首屏加载文件的体积，达到提高响应速度的目的。如果你的项目不需要处理静态资源如图片，也不需要按需加载，并追求前端高性能的话，可以尝试。 如何提升前端性能和响应速度 下面大多是从前端工程化的角度给出的优化建议，如果需要了解语法上的优化，可以参考： 如何提高页面加载速度 编写高效的JavaScript Web前端性能优化进阶 - 完结篇 1. 原生...

    lylwyy2016 评论0 收藏0

  • 前端进阶（14） - 如何提升前端性能和响应速度

    摘要：一般建议文件最大不超过。按需加载可以减小首屏加载文件的体积，达到提高响应速度的目的。如果你的项目不需要处理静态资源如图片，也不需要按需加载，并追求前端高性能的话，可以尝试。 如何提升前端性能和响应速度 下面大多是从前端工程化的角度给出的优化建议，如果需要了解语法上的优化，可以参考： 如何提高页面加载速度 编写高效的JavaScript Web前端性能优化进阶 - 完结篇 1. 原生...

    Airy 评论0 收藏0

  • 前端资源系列（4）-前端学习资源分享&前端面试资源汇总

    摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

    princekin 评论0 收藏0

  • 前端进阶（1） - CSS 模块化

    摘要：比如以为例，一个组件，包括一个文件一个文件图片组件在中便可如下加载使用导出为对象的模块化其实，还有另外一种思路，就是将内置中，成为的一部分。 CSS 模块化 CSS(Cascading Style Sheets)，从诞生之初就决定了它无法编程，甚至连解释性语言都算不上，只能作为一种简单的层叠样式表，对 HTML 元素进行格式化。 但随着前端的发展，前端项目已经变得越来越庞大和复杂，社区...

    VishKozus 评论0 收藏0

  • web前端工程师进阶指南

    摘要：进阶的知识的话就是响应式这一块了，一套代码能适配手机是初级前端工程师的进阶，在北京工资一般在左右。进阶的知识应该是这一块了，当然并不难，了解怎么与后台交互是学习的关键点，在北京的工资一般在左右。 web前端？如果你是一名web前端工程师，那么你将感到幸运，从之前的默默无闻，到后来的给后台工程师打下手，再到巅峰一时。web前端可谓是当下最火的职位之一。 showImg(https://s...

    fnngj 评论0 收藏0

发表评论

登陆后可评论

0条评论

lauren_liuling

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<