CSS：CSS Modules

一、背景

在编写代码的时候，经常会出现同名而被覆盖样式的可能，特别是大量使用组件的项目，添加css Modules可以减少这样的冲突。

二、什么是CSS Modules
根据CSS Modules的repo上的话来说是这样的：

CSS files in which all class names and animation names are scoped locally by default.

所以CSS Modules并不是一个正式的声明或者是浏览器的一个实现，而是通过构建工具（webpack or Browserify）来使所有的class达到scope的一个过程。

三、使用css modules会带来：

2.1、解决全局样式冲突带来的问题
2.2、解决嵌套层次过深的选择器带来的问题
2.3、会带来代码的冗余
四、与scoped比较

4.1、scoped可以隔离本页面的样式，但是如何引入的子组件依然会收到覆盖样式的影响。

4.2、css modules即使引入组件也不会相互影响。

4.3、scoped可以嵌套的写样式，逻辑层次更加清晰。

4.4、css modules通常是没有嵌套的，写在了最外层。

五、定制哈希类名

webpack.config.js里面可以定制哈希字符串的格式。

css:{
modules:{
localIdentName: '[path][name]__[local]_[hash:base64:16]'
},
}

六、其他

6.1、一个选择器可以继承另一个选择器的规则，这称为"组合"（"composition"）。

6.2、选择器也可以继承其他CSS文件里面的规则。

6.3、CSS Modules 支持使用变量，不过需要安装 PostCSS 和 postcss-modules-values。

七、实例

// id class 都有使用
<div :class="$style.nav"><router-link :class="$style.item" to="/">首页</router-link><a :class="$style.item" href="https://www.toutiao.com/">头条</a><a :class="$style.item" href="https://www.bilibili.com/">哔哩</a><a :class="$style.item" href="https://weibo.com/">微博</a><a :class="$style.item" href="https://ip138.com/">查询</a><router-link :class="$style.item" to="/about/index">我的</router-link></div>

<style lang="scss" module>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
.nav {position: fixed;bottom: 0;left: 0;width: 100%;display: flex;justify-content: space-around;background: #e6e6e6;z-index: 1;
}
.item {padding: 20px 10px;
}
</style>

八、局部作用域:local、全局作用域:global

局部作用域:local

:global()修饰的样式是不会被重命名的，使用全局样式时直接赋值给class就行了，不需要进行类绑定。

九、webpack配置，配合scss得心应手应用在生产环境

配置是重点，有问题请留言。

css: {// 是否使用css分离插件 ExtractTextPluginextract: true,// 开启 CSS source maps?sourceMap: false,requireModuleExtension: true,// css预设器配置项// 启用 CSS modules for all css / pre-processor files.loaderOptions: {sass: {prependData: `@import "@/assets/scss/reset.scss";@import "@/assets/scss/variable.scss";`,sassOptions: {modules: true,exclude: [path.resolve(__dirname, "node_modules")],}},css:{modules:{localIdentName: '[path][name]__[local]_[hash:base64:16]'},}},},

十、注意：

CSS Modules 与 scoped只能用一个

十一、欢迎留言指正，有问必回。

参考文献：

CSS Modules 用法教程 - 阮一峰的网络日志

https://segmentfault.com/a/1190000014722978

js,ts配置css Modules_Dilomen的博客-CSDN博客

CSS Modules | Vue Loader

http://139.217.113.113:8090/pages/viewpage.action?pageId=11982531

在vue中使用css modules替代scroped - 小火柴的蓝色理想 - 博客园

关于CSS Modules全局污染解决_让优秀成为一种习惯-CSDN博客

webpack4配置之——26：postcss-loader遇到的坑_kevin的博客-CSDN博客

vue cli 3.0 + vant 过滤node_modules文件夹 · 日常内容小结 · 看云

CSS：CSS Modules相关推荐

html右侧浮动菜单,HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单
原标题:HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单今天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象 ...
html类选择器和id选择器,HTML+CSS：css选择器介绍之标签选择器、类选择器以及ID选择器...
原标题:HTML+CSS:css选择器介绍之标签选择器.类选择器以及ID选择器上篇文章给大家说了css的三种不同的引入方式,今天给大家说一下css的三种选择器:标签选择器.类选择器和ID选择器. 那 ...
CSS：CSS+DIV布局网页
现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...
CSS：CSS定位和浮动
CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...
css：css样式背景图片设置透明度,css如何设置背景图片的透明度
1. 了解css如何设置背景图片的透明度注意: css中无法直接给背景图片加 opacity 属性,可以使用下面的方法来给background-image加上我们想要的透明度opacity. 2. ...
CSS：CSS概述与引用
CSS概述 CSS,全称"Cascading Style Sheets",用于设置HTML标签的样式,它的基本结构如下: CSS引用方式 CSS引用方式主要有四种:行内样式.内嵌样 ...
CSS：CSS层叠样式表的概述
CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...
CSS：CSS 在工程中改变——面向对象的CSS （OO CSS）
一.OO CSS 的概念解读 (一)众多开发者忽视了CSS的表现,认为其太过简单,是一种机械的工作,而把更多关注在JS的性能或者其他方面. (二)OO CSS 将页面可重用元素抽象成一个类,用cla ...
html css圆角按钮,CSS：CSS使用滑动门技术实现圆角按钮
使用滑动门技术实现圆角按钮,如图所示,背景图和效果图. 所谓滑动门,就是当按钮的状态改变时,移动背景图,显示不同的状态.此法简单有效,但缺点是不能纵向扩展.要处理纵向扩展,就要使用复杂的圆解技术,如4 ...

CSS：CSS Modules

CSS：CSS Modules相关推荐

最新文章

热门文章