欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+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><div 
data-tab-container="1"></div><div 
data-tab-container="2"></div>

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 = '<div class="' + styles.className +
 '">Hello!</div>';

实际效果

# style.css 文件._23_aKvs-b8bW2Vg3fwHozO { color: green;}# DOM<div class="_23_aKvs-b8bW2Vg3fwHozO">Hello!</div>

在这个转换过程中,根据文件的位置、内容生成一个全局唯一的 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。

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={'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>)

3.1.4 转码

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

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>

 

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/template/m50571.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-06-28 15:50 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。