选择器冲突解决方案、命名空间 BEM、模块化、scss、

2021-11-28 22:05:26 阅读：203 来源： 互联网

一、命名空间 BEM

BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范。其核心思
想是将页面拆分成一个个独立的富有语义的块（blocks）,从而使得团队在开发复
杂的项目变得高效，并且十分有利于代码复用，即便团队引入新成员，也容易维护。在某种程度上，BEM和OOP是相似的。
Block：代表块（Block）：也是模块的意思
Element：元素（Element）：
Modifier：修饰符（Modifier）
无论是什么网站页面，都可以拆解成这三部分

BEM——前端命名规范介绍

二、模块化

import 变量  from './css/xx.module.css' 

<jsx className={变量.类名|id}

//配置1 (脚手架默认配置上了)
//webpack配置 "style-loader!css-loader?modules" | module:true
//问题：所有css都需要模块化使用

//配置2 
//改名xx.css -> xx.module.css 
//需要模块化的才修改,不影响其他非模块化css写法

三、scss

安装: node-sass

/*定义scss*/
$bg-color: #399;

.box{
  background: $bg-color;
}

引入sass

//1）、普通引入
import 'xx/xx.scss'

   <jsx className="box" />



//2）、模块化
import style from xx.module.scss

   <jsx className={style.box}

引入全局的（公共的）scss

局部scss文件内部： @import ‘./全局.scss’
webpack配置一次，局部scss内部直接使用

//1. 安装插件 : sass-resources-loader
//2. 配置修改webpack.config.js

{
  test:sassRegex,
  ...
  use: [
    {loader:'style-loader'},
    {loader:'css-loader'}, 
    {loader:'sass-loader'},
    {
      loader: 'sass-resources-loader',
      options:{
        resources:'./src/xx/全局主题.scss'
      }
    }
  ]
}

注意:
loader:‘css-loader?modules’ ?modules 模块化时需要添加
resources 指向作用域在项目环境下

标签：scss,sass,BEM,loader,xx,选择器,css
来源： https://blog.csdn.net/weixin_51525398/article/details/121598737

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

选择器冲突解决方案、命名空间 BEM、模块化、scss、

一、命名空间 BEM

二、模块化

三、scss