08 vue3之认识bem架构及less sass 和scoped

bem架构

他是一种css架构 oocss 实现的一种 （面向对象css） ，BEM实际上是block、element、modifier的缩写，分别为块层、元素层、修饰符层，element UI 也使用的是这种架构

1. BEM架构

      1. 介绍

        1. BEM是Block Element Modifier的缩写

        2. Block：块，代表一个独立的模块，如：header、container、menu

        3. Element：元素，代表块中的组成部分，如：header__logo、menu__item

        4. Modifier：修饰符，代表块或元素的不同状态，如：menu__item_active、menu__item_disabled

 

BEM 命名约定的模式是：

.block {}  // el-input 代表码一个块