组件化的css-module
css 算是前端发展的一个痛点吧. 以前是裸写css, 接着到后来的 inline css, 然后是, scss/sass. 从单一 file 到可以模块化书写css. 不过, 随着前端发展, 现在的要求是组件化, 那么, 以前那种直接 < link> 脚本也逐渐变为痛点. so, 2015/6 左右, 出来了 css-module 这个概念. 可以说, 这是一个专门为 component 编程而生的. 因为,他是和 js 紧密结合在一起的.
css-module 更具官方的说法就是: css-module 其实就是原来的 css 文件。只是他的 className 和 animation 最后都会被编译为 object 形式的映射对象.
举个简单的例子就是:
// 未编译前的 style.css
.title {background-color: red;
}// 通过js 脚本调用
import styles from "./styles.css";element.innerHTML = `<h1 class="${styles.title}">demo</h1>`;// 最后实际输出为:
# css 格式
._styles__title_309571057 {background-color: red;
}
# HTML 格式
<h1 class="_styles__title_309571057">demo
</h1>
上面简单的介绍了, css-module 到底是啥?
Ps: 上面漏了一点, 怎么将css 编译嘞? 这里,方法很多,有webpack, gulp等等. 看同学们自己的选择了
命名方式
首先,在 css-module 里面. 以前在 css 中的命名方式,都变得 nonsense. 在 css-module 推荐一切命名方式使用 camelCase 的形式. 因为, 在写组件的时候我们并不是来写全局的样式, 我们仅仅只是来完成我们当前组件的渲染. 所以, 这就要求, 这些组件所需和隐藏的 css 属性, 我们必须一个不拉的全部写上去, 比如: display, font, text-align 等等.
// 写一个 btn 的样式
# 原始的css
.btn-normal{...}# 使用 css-module
# 实际该文件的保存名就是 btn-style.css
.normal{...}
.clickStyle{...}
组合 composition
既然, 上文已经说了 css-module 里面每个 style 都必须全部写出所需的样式, 那么, 这样重复的工作实在太多的... 谁 TM 还和你来什么 module 不 module 的. 所以, 为了解决这样的痛点, css-module 提供了 composes 这个概念. 相当于, 就是我们以前 css 中的嵌套.
// 原始 css
# 直接嵌套
.button{...}
.button .normal{...}// 在 css-module 中
# 使用 composes 进行嵌套
.button{...}
.normal{composes:button;...
}
这个 composes 概念,就有点和 sass 中的 @extends 类似. 但,他俩编译的结果点都不像. composes 是直接在 DOM 渲染时, 添加不同的 class. 而 @extends 只是将 class 变为嵌套而已.
// @extends 语法
.Button--common { ... }
.Button--normal {@extends .Button--common;...
}// 编译结果
.Button--common, .Button--normal {...}
.Button--normal {...}
但,这样并不符合 css-module 实际编译后改变 className 的 feature, 并且, @extends 的结果, 会造成很大的 className 冗余.
具体说一下 css-module composes 的过程.
// 正常书写 css-module
.common { ...}
.normal { composes: common; ... }// 经过编译得出
# 注意,这里并没有存在嵌套的情况,每个className 都是分离的.
.components_submit_button__common__abc5436 { ... }
.components_submit_button__normal__def6547 { ... }// 通过 import 的 css 暴露的接口为:
styles: {common: "components_submit_button__common__abc5436",normal: "components_submit_button__common__abc5436 components_submit_button__normal__def6547",
}// 渲染出来的HTML DOM 节点内容
# 添加 style.normal 样式
<button class="components_submit_button__common__abc5436 components_submit_button__normal__def6547">Submit
</button>
当然, composes 也可以引入其他 css 文件中的某个 class.
// colors.css
.primary {color: #720;
}// button.css
.normal {composes: primary from "../shared/colors.css";
}
另外, 写好一个 css-module 有很多原则可以遵循的. 最出名的应该就是 单一职责原则.
单一职责
因为 composes 的限制, 我们一般只能引入单一的 className 去包裹我们想要的 style 样式. 但这样,感觉有点浪费. 这点,感觉 sass 做的还是挺棒的.
@mixin subtle-shadow {box-shadow: 0 0 4px -2px;
}
// 直接通过 mixin 引进
.some_element {@include subtle-shadow;
}
所以, 为了在 css-module 达到同样的目的. 我们一般只能使用单一的文件去包裹,所需的样式内容. 像下面的 demo:
// 直接从其他文件中引进
.element {composes: large from "./typography.css";
}
具体实例
css-module 主要是和 react 一起使用. 因为, react 存在, 才使前端组件化得到蓬勃的发展. so, 我们这里,就需要借助 webpack 对 import 的 css 文件进行编译.
这里就不多说了, 直接把配置放出来吧.
// 引入所需的插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');# 下面就是具体的 module.exports 里面的内容module: {// 关键语句. 处理 css-module的内容.loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') }]},postcss: [require('autoprefixer-core'),require('postcss-color-rebeccapurple')],resolve: {modulesDirectories: ['node_modules', 'components']},plugins: [new ExtractTextPlugin('style.css', { allChunks: true })]
如果,想更快的了解的话, 那就直接去线上 demo 看吧.
组件化的css-module相关推荐
- 书写高效的、可维护的、组件化的CSS(zz)
1.使用外联样式代替行间样式或内嵌样式. 不推荐使用行间样式. 不推荐使用内嵌样式. 推荐使用外联样式. 不推荐@import导入方式. 2.使用继承 3.使用多重选择器 4.使用多重声明 5.使用简 ...
- 12 组合与继承、CSS Module
组合与继承 若Container内部有内容,React会在props内部增加children属性 若Container内部有非元素内容,children:非元素内容 若Container内部有单个元素 ...
- 模块化 组件化 工程化_软件工程中的模块和软件组件
模块化 组件化 工程化 The module in software is a small part of the software that is responsible for performin ...
- Architecture(5)电商APP组件化探索
概述 组件化缘由 记得刚开始接触Android开发的时候,只知道MVC分层架构,而且感觉Model,View以及Controller太简单了,也能称之为分层架构,随便写就是MVC.就像在接触设计模式之 ...
- (4.6.30)组件化:Android项目构架演变之路
文章目录 一.简单开发模型 二.单工程开发模型(业务逻辑分层模型) 2.1 简单开发模型的宏观分层 2.2 MOA原架构模型 2.3 业务层的分层理念与设计模式 2.3.1 分层理念 2.3.2 MV ...
- Vue(组件化编程:非单文件组件、单文件组件)
一.组件化编程 1. 对比传统编写与组件化编程(下面两个解释图对比可以直观了解) 传统组件编写:不同的HTML引入不同的样式和行为文件 组件方式编写:组件单独,复用率高(前提组件拆分十分细致) 理解为 ...
- 【Android 组件化】使用 Gradle 实现组件化 ( 组件 / 集成模式下的 Library Module 开发 )
文章目录 一.组件模式下为组件 Module 指定 Java 源码路径 二.主应用的角色 三.BuildConfig 中生成当前 组件 / 集成 模式字段 四.Library Module 中的代码示 ...
- android module中获取 app_Android组件化架构 - 4. 动态创建
Android 组件化中使用动态创建的作用是解耦: 1. 反射机制 反射有两个作用:1.反编译:.class->.java;2.通过反射机制访问java对象中的属性,方法,构造器等: 实现反射, ...
- 利用webpack和vue实现组件化
原文链接:http://mrzhang123.github.io/2016/06/02/webpack-vue-3/ 本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vu ...
- 模块化和组件化的定义以及两者的区别
模块化中的模块一般指的是 Javascript 模块 组件则包含了 template.style 和 script,而它的 Script 可以由各种模块组成. 组件化就是做一个知乎,把导航栏拆成一个组 ...
最新文章
- 有重叠与无重叠序列之序列检测与序列产生
- tomcat启动慢_Hack下mongodb jdbc driver启动慢
- TensorFlow 教程 --教程--2.5TensorFlow运作方式入门
- linux python3 装pip,linux 安装pip 和python3(示例代码)
- C语言函数调用常见问题(1)
- 基于matlab实现的BP神经网络预测美国死亡人数
- Java数组排序(选择排序)
- Android:JNI 与 NDK到底是什么?(含实例教学)
- 计算机组成结构 cpu、主存储器、主存、辅存、缓存与内存、硬盘的关系与速度比较
- 解决使用shutil.rmtree无法删除文件夹的方案
- LMV324MTX单通道,双通道和四通道通用低电压轨至轨输出运算放大器TI
- 使用android新特性:Material Design
- 12星座绝情榜,你的绝情指数是多少呢?
- C++ VS项目属性的一些配置项的总结
- Apollo代码学习(二)—车辆运动学模型
- ueditor 编辑器增加css样式_百度编辑器(uedtior)怎么更换样式文件
- ChatGPT 最好的替代品
- 区块链未来三年将成为数字中国建设的重要支撑
- matlab simca,SIMCA-P+软件
- 星火传递之Fuji M268dw打印机共享使用教程
热门文章
- MySQL 空间数据库支持入门学习
- ArcGIS License Manager 相关总结
- 一个直接运行Windows命令行的软件
- CLR 中 线程的 ThreadState 解释
- 微信小程序(六) 文章详情静态页面detail
- 2017-2018-2 20155303『网络对抗技术』Final:Web渗透获取WebShell权限
- Netty实战六之ChannelHandler和ChannelPipeline
- Excel中VLOOKUP函数的用法和注意点
- JS中的!= 、== 、!==、===的用法和区别
- 扩展gcd codevs 1200 同余方程