css模块的解决办法 演进

时间: 2019-12-07阅读: 137标签: 模块

1. 手动分模块

(早期办法 ,这样容易相互覆盖,冗余代码,嵌套过深) 刀耕火种的时代了


2. css预处理(sass/less等)  
CSS预处理器最大的好处就是可以支持模块引入,用js的方式来编写CSS,编译之后,终究还是一个文件,因此不可避免的会出现冲突样式

插个题外话:sass vs scss Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似  


3. BEM :BEM就是为了解决命名冲突以及更好的语义化而生的

BEM名词解释:
- Block:逻辑和页面功能都独立的页面组件,是一个可复用单元,特点如下:
 可以随意嵌套组合
 可以放在任意页面的任何位置,不影响功能和外观
 可复用,界面可以有任意多个相同Block的实例
- Element:Block的组成部分,依赖Block存在(出了Block就不能用)
- Modifier [可选] 是一个元素的状态显示,例如active、current、selected,只能定义Block和Element的外观及行为,

【说明】
- Block完全独立,可以嵌套,一个header是一个Block,header下的搜索框也可以是一个Block
    不可能出现Block__Element-father__Element-son_Modifer这种类名的写法,BEM只有三级
- Modifier可以加在Block和Element上面
- Modifier作为一个额外的类名加载Block和Element上面,只是为了改变状态,需要保留原本的class

示例:

<form>
  <input type="text" />
  <input
    type="submit" />
</form>

解释:  
form是一个Block, form--theme-xmas, form--simple是Modifier 依附在form这个Block上,用来改变不同样式
form__input 是Element,在Block下的元素
form__submit也是Element, form__submit--disabled 是Modifier 依附在form__submit这个Element上,用来表示不可提交状态


4. CSS Modules

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

css modules是如何解决痛点的。

- 编译后独一无二的样式名,避免了命名冲突

/* 编译之后可能是这样的 */
.App__text___3lRY_ {
    color: red;
}

 - 模块化   (不表,具体上github查看)

 - 解决嵌套层次过深的问题 块化   (CSS Modules只关注与组件本身,组件本身基本都可以使用扁平的类名来写

如何使用:

CSS Modules不局限于你使用哪个前端库,无论是React、Vue还是Angular,只要你能使用构建工具进行编译打包就可以使用。

以webpack为例


开启css modules功能

默认在css-loader中是不开启css modules功能的,要开启可以设置modules: true即可,更多可以参看官方css-loader使用方法修改webpack.config.js

{
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: './build/styles'
        }
      },
      { 
        loader: "css-loader",
        options: {
            modules: true   //开启
        }
      }
    ]
}        

这样经过编译合成一个文件之后,所有的类名都经过了哈希转换,因此确保了类名的唯一性

事实上,有些样式比如布局的样式container是不需要转换成一长串的样式名的,想把它固定写死在了容器上,怎么来写?

全局作用域 要想一个类名不需要被装换,那么可以使用:global(className)来进行包装,这样的类不会被转换 

/* global.css */
* {
    margin: 0;
    padding: 0;
}

:global(.container) {
    padding: 20px;
}

自定义样式名哈希规则:CSS Modules默认是以[hash:base64]来进行类名转换的

{ 
  loader: "css-loader",
  options: {
    modules: true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]'
  }
}

类名组合继承:CSS Modules提供了composes关键字

.red {
    color: red;
}

.header {
    font-size: 32px;
}

.title {
    composes: red header;  //composes关键字 表示继承.red和.header
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    composes: ff from './other.css';  //表示从other.css里继承ff这个样式
}
吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/6928

Nodejs数据加密与crypto模块

nodejs 中的 crypto 模块提供了各种各样加密算法的 API。这篇文章记录了常用加密算法的种类、特点、用途和代码实现。其中涉及算法较多,应用面较广,每类算法都有自己适用的场景。为了使行文流畅,列出了本文记录的几类常用算法

利用Proxy,如何优雅实现JSBridge模块化封装

最近公司在做一个项目,通过把我们自己的Webview植入第三方APP,然后我们的业务全部通过H5实现。至于为什么不直接用第三方APP WebView,主要是身处金融行业,需要做一些风控相关功能

NodeJS模块os

nodejs 提供了os.platform()和os.type(),可以用来识别操作系统平台。推荐使用: os.platform();平均负载是指:单位时间内,系统处于可运行状态和不可中断状态的平均进程数。

NodeJS模块Buffer

Buffer 作为 nodejs 中重要的概念和功能,为开发者提供了操作二进制的能力。本文记录了几个问题,来加深对 Buffer 的理解和使用:

Nodejs模块之events

读了 events 模块的文档,研究了几个有意思的问题:事件驱动模型,优雅的错误处理,监听器器队列顺序处理,内存管理与防止泄漏

无编译/无服务器,实现浏览器的 CommonJS 模块化

平时经常会逛 Github,除了一些 star 极高的大项目外,还会在 Github 上发现很多有意思的小项目。项目或是想法很有趣,或是有不错的技术点,读起来都让人有所收获

Node.js 模块系统源码探微

Node.js 的出现使得前端工程师可以跨端工作在服务器上,当然,一个新的运行环境的诞生亦会带来新的模块、功能、抑或是思想上的革新,本文将带领读者领略 Node.js (以下简称 Node) 的模块设计思想以及剖析部分核心源码实现。

NodeJS模块os - 与操作系统“打交道”

nodejs 提供了os.platform()和os.type(),可以用来识别操作系统平台。推荐使用: os.platform(),平均负载是指:单位时间内,系统处于可运行状态和不可中断状态的平均进程数。它和 cpu 使用率没有直接关系。

何为 CommonJS?为何封装模块?

CommonJS 是一个有志于构建 JavaScript 生态圈的组织。它有一个 邮件列表,有很多开发者参与其中。 整个社区致力于提高 JavaScript 程序的可移植性和可交换性,无论是在服务端还是浏览器端。

http模块和fs模块

response.write()发送一块相应主体,用来给客户端发送相应数据。write可以使用多次,但是最后一定要使用end来结束响应,否则客户端会一直等待。response.end()此方法向服务器发出信号

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全