一种比css_scoped和css_module更优雅的避免css命名冲突小妙招
css_scoped 与 css_module
我们知道,简单的class名称容易造成css命名重复,比如你定义一个class:
<style>
.main { float: left; }
</style>
如果别人刚好也定义了一个className:.main
,你的float:left
就会影响到它。
所以Vue中发明了css_scoped
,其原理就是在class名称后加上一个data属性选择器:
<style scoped>
.main { float: left; }
</style>
//转义后变成
<style>
.main[data-v-49729759] { float: left }
</style>
css_scoped
是Vue的专用方案,如果你使用React等其它UI框架,那么你可以使用更通用的css_module
,其原理是为样式名加hash
字符串后缀,从而保证class名全局唯一:
<style module>
.main { float: left; }
</style>
//转义后变成
<style>
.main_3FI3s6uz { float: left; }
</style>
相比于css_scoped
,css_module
方案更通用,不改变其本身的权重,而且渲染性能要比前者好很多,所以更推荐大家使用css_module
。
不足之处
然而不管是css_scoped
还是css_module
,都绕不开2大缺点:
- 由于加上了随机字符,所以如果想在父组件中覆盖子组件中的样式变得麻烦,虽然
css_scoped
可以使用穿透,但这样容易引发别的问题。 - 加上随机字符让class名称变得不优雅,也影响编译速度。
css命名空间
我们来回忆一下,在css_scoped
和css_module
出现之前,人们是如何避免css命名冲突的?
对,就是人为的定义一些css命名空间
。
那个时候,对每个Component组件都会在其根节点上定义一个不重复的ID或者class作为其命名空间,然后其内部的其它class都会以此命名空间作为前置限定,比如:
<div class="table-list">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
<style>
.table-list {
> .hd {
color: red
}
> .bd {
color: blue
}
}
</style>
这样一来,只要保证根节点的class不重复,其子节点的class就不会重复。
而对于一些全局样式,人们习惯加上一个g-
作为命名空间,比如:
<style>
.g-hd {
color: red
}
</style>
这种依靠人为约定的css命名空间,虽然比较原始,但有其优点:
- 简单有效,按
模块-组件名称
的命名约定,基本上很容易保证其不重复。 - 样式名更具语义,从任何一个dom出发,向上一定能找到其组件根节点class名,基本上就能猜到其组件所在的业务模块、组件位置等。
- 父组件很容易利用权重覆盖子组件的任何样式。
css_namespace + css_module
如果我们把css_module
和css_命名空间
结合起来,组件的命名空间由css_module
自动生成,那岂不是一种更优雅的解决css冲突的方案么?
css_module
中有2个特别的作用域限定符:
- :global 该限定符下的class名称将保持原样,不会被css moudle转换,比如:
:global {
.test1 { color: blue; }
.test2 { color: red; }
}
//编译后
.test1 { color: blue; }
.test2 { color: red; }
- :local 该限定符下的class名称,将会被css moudle转换,比如:
:local {
.test1 { color: blue; }
.test2 { color: red; }
}
//编译后
.test1_3zyde4l1y { color: blue; }
.test2_2DHwuiHWM { color: red; }
如果我们使用css_namespace + css_module
:
<div :class="styles.root">
<div class="hd"></div>
<div class="bd"></div>
<div class="ft"></div>
</div>
<style module>
:global {
:local(.root) {
> .hd {
color: red;
.title {
font-size: 18px;
}
}
> .bd { color: blue; }
}
}
</style>
//css编译后
<style>
.root_3zyde4l1y > .hd{ color: red; }
.root_3zyde4l1y > .hd .title{ font-size: 18px; }
.root_3zyde4l1y > .bd{ color: blue; }
</style>
这样的意思是:
- 每个组件原则上仅根节点使用
css_module
自动生成不重复的class名称,其余内部元素保持原始命名,不做任何转换。(当然某些情况下,也可以使用多个转换) - 为了保证孙子辈样式不影响别人,可以适当加入dom层级限定,比如
> .hd
这样就只会影响子级的.hd
。
去除css_moudle随机字符
<style>
.root_3zyde4l1y > .hd{ color: red; }
.root_3zyde4l1y > .hd .title{ font-size: 18px; }
.root_3zyde4l1y > .bd{ color: blue; }
</style>
根节点上的class命名带个hash小尾巴
,仍然很不优雅。其实hash字符只是为了保证这个名称全局唯一而已,你也可以使用另外的方法来保证。如果你为工程设计一个有意义的目录结构,那么完全可以使用目录路径来替代hash字符串,比如你的工程目录如下:
src
├── components
│ ├── moduleA
│ │ ├── componentX
│ │ ├── componentY
│ ├── moduleB
│ │ ├── componentZ
那么:components-moduleA-componentX
这个目录路径一定是全局唯一的,所以你可以使用这个路径来替代hash字符,css_module提供了自定义转换className的方法:
type getLocalIdent = (
context: LoaderContext,
localIdentName: string,
localName: string
) : string;
你可以通过该方法来将目录路径映射为class名称,并替换掉一些固定的目录,比如工程目录如下:
src
├── assets
│ ├── css
│ ├── global.module.scss //全局样式
│ ├── :local(.loading) {} //全局样式只需要加个g-前缀,编译成.g-loading
├── components
│ ├── NavBar
│ ├── index.module.scss
│ ├── :local(.root) {} //根据目录路径可编译成即可.comp-NavBar
│
├── modules
│ ├── user
│ ├── components
│ ├── LoginForm
│ ├── index.module.scss
│ ├── :local(.root) {} //根据目录路径可编译成.user-LoginForm,
│
注意的是src/modules/user/components/LoginForm/index.module.scss
,根据目录路径可以生成:modules-user-components-LoginForm,但因为user是一个module,其名称是唯一的,且内部结构遵循约定,所以可以简化为:user-LoginForm
根据class名称推测文件位置
.g-loading
- 带g-
前缀,说明它是一个全局class,对应的文件一定是src/assets/css/global.module.scss
.comp-NavBar
- 带comp-
前缀,说明它是一个公共组件,对应的组件一定是src/components/NavBar
.user-LoginForm
- 根据约定,对应的组件一定是src/modules/user/components/LoginForm
示例及源码
如果你也使用类似的工程目录,那么可以直接使用我封装好了的路径映射函数getCssScopedName
:
const {getCssScopedName} = require('@elux/cli-utils');
const srcPath = path.resolve(__dirname, '../src');
// webpack css-loader
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules: {
getLocalIdent: (context, localIdentName, localName) => {
return getCssScopedName(srcPath, localName, context.resourcePath);
},
localIdentContext: srcPath,
},
},
};
当然你也可自己实现个性化的getLocalIdent
,无非就是一些正则匹配与替换罢了...
采用css_namespace + css_module
的实际案例:
或者使用任意一个elux工程模版:
npm create elux@latest 或 yarn create elux
如图所示,通过class名称基本上就能推测出组件位置...
一种比css_scoped和css_module更优雅的避免css命名冲突小妙招的更多相关文章
- 更好用的css命名方式——BEM命名
一.什么是BEM? BEM代表块(Block),元素(Element),修饰符(Modifier).无论是什么网站页面,都可以拆解成这三部分. 二.带你认识网页 我们来看一下qq的官网,它可以由三个块 ...
- PostCSS一种更优雅、更简单的书写CSS方式
Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include displ ...
- 少年,是时候换种更优雅的方式部署你的php代码了
让我们来回忆下上次你是怎么发布你的代码的: 1. 先把线上的代码用ftp备份下来 2. 上传修改了的文件 3. 测试一下功能是否正常 4. 网站500了,赶紧用备份替换回去 5. 替换错了/替换漏了 ...
- C#中一种替换switch语句更优雅的写法
今天在项目中遇到了使用switch语句判断条件,但问题是条件比较多,大概有几十个条件,满屏幕的case判断,是否有更优雅的写法替代switch语句呢? 假设有这样的一个场景:商场经常会根据情况采取不同 ...
- 使用 Promises 编写更优雅的 JavaScript 代码
你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它 ...
- 使用Castle扩展Ibatis.Net,面向接口编程-更优雅的代码
使用Ibatis.Net做项目半年了,甚是喜欢,感觉确实是个简单.轻巧的O/R Mapping框架,特别是将Sql配置在Xml文件中,相当于直接将Dao层抽离了出来. 本文假定读者对Ibatis.Ne ...
- java~lambda表达式让查询更优雅
在java之前的版本里,如果希望从集合时查找符合条件的数据,如果先遍历他,这种写法是我们不能接受的,所以现在java有了lambda就很好的解决了这个问题,让代码更优雅一些! /** * lambda ...
- MySQL root密码忘记,原来还有更优雅的解法!
一直以来,对于MySQL root密码的忘记,以为只有一种解法-skip-grant-tables. 问了下群里的大咖,第一反应也是skip-grant-tables.通过搜索引擎简单搜索了下,无论是 ...
- JavaScript 复杂判断的更优雅写法
我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃 ...
随机推荐
- Kubebuilder简介与架构
什么是Kubebuilder Kubebuilder是一个用Go原因构建Kubernetes APIs的框架,通过使用KubeBuilder,用户可以遵循一套简单的编程框架,使用CRD构建API.Co ...
- 好用到爆!GitHub 星标 32.5k+的命令行软件管理神器,功能真心强大!
前言(废话) 本来打算在公司偷偷摸摸给星球的用户写一篇编程喵整合 MongoDB 的文章,结果在通过 brew 安装 MongoDB 的时候竟然报错了.原因很简单,公司这台 Mac 上的 homebr ...
- python小题目练习(四)
题目:JAVA和Python实现冒泡排序 实现代码: # Java实现对数组中的数字进行冒泡排序scoreList = [98, 87, 89, 90, 69, 50]temp = 0for i in ...
- linux配置svn
1.安装 yum install subversion 2.测试安装是否成功: svnserve --version 3.创建目录并配置 建立版本库目录 mkdir -pv /data/svn/svn ...
- ASP.NET Core 根据环境变量支持多个 appsettings.json配置文件 (开发和生产)
新建一个项目,web根目录会出现一个 appsettings.json 配置文件, 此时添加--新建项,输入 appsettings.Development.json 再新增一个,appsetti ...
- NC24325 [USACO 2012 Mar S]Flowerpot
NC24325 [USACO 2012 Mar S]Flowerpot 题目 题目描述 Farmer John has been having trouble making his plants gr ...
- 实战模拟│单点登录 SSO 的实现
目录 什么是单点登录 单点登录的凭证 父域 Cookie 方式 用户认证中心方式 localstorage方式 什么是单点登录 单点登录: SSO(Single Sign On) 用户只需登录一次,就 ...
- 挑战30天写操作系统-day1-从计算机结构到汇编程序入门
先动手操作 软盘映像文件制作:先采用二进制编辑器编辑我们所需要的映像文件helloos.img 二进制编辑器下载链接:Bz - c.mos (vcraft.jp) 制作好之后,可以选择写入软盘,通过软 ...
- C++实现ETW进行进程变动监控
C++实现ETW进行进程变动监控 文章地址:https://www.cnblogs.com/Icys/p/EtwProcess.html 何为Etw ETW(Event Tracing for Win ...
- 如何用天气预警API接口进行快速开发
天气预警能够指导人们出行.同一种类的气象灾害预警信号级别不同,对应的防御措施也不尽相同,人们通过气象灾害预警信号,合理安排出行.公众要提高防范意识,养成接收和关注预警信息的习惯,了解预警信息背后的意义 ...