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