BEM是CSS模块化的实现。这是一个非常有用，有力和简单的命名协议。它使您的前端代码易于阅读和更严格地理解。
个人理解块是组件的根元素，该元素是块的一部分。
块名称和元素元素名称：
例如：
（1）为什么不使用组合选择器bem来修改这样的块。为什么不使用简单版本？因为我们现在已经将选择器组合在一起了。block.mod，很容易定义所有CSS属性。
首先，由于可以在同一DOM节点上混合多个块和元素，因此我们需要确保修改器仅影响其属于块的块。支持我们将菜单项元素与button混合在一起。在html中，此结构是由以下标签指示：
在这种情况下，。敏捷，向其添加修饰符会影响两者。
这三个都位于同一DOM节点，因此我们无法区分我们的含义。在前缀的情况下，命名清楚地表明这只是必须受到影响的按钮。
另一个是CS的特殊性。组合选择器比单个类选择器更具体（意义更重要）。这意味着在用父块代码重新定义它们时，您可能会遇到麻烦。
如果您的代码中已经有一个选择器，则重新定义的特异性将与修饰符组合选择器的特异性完全相同，这使您依赖声明的CSS规则的顺序。，您始终可以确保类选择器将覆盖修饰符。
这使生活更轻松，尤其是用于维护项目。
第三点是您可以清楚地看到块结构。很容易识别我们有一件及其装饰，这里没有不同的解释。不幸的是，掌握代码没有提供此类信息。CSS类，有时我们无法认识到我们是否有一个或两个块的块和混合物。如果实体的名称复杂或缩写/缩写/缩写（有时会发生在大型项目中），那么这可能会更令人困惑。在文件系统上寻找相应的代码时，对块结构的清晰了解特别有用。
（2）不应嵌套块。如果我的块具有复杂的结构并且其元素是嵌套的，我该怎么办？CSS课程看起来很恐怖。
块结构应平坦；您无需反映嵌套的DOM结构。因此，在这种情况下，类别是：
块的DOM可以嵌套：
除了类外，它看起来更好，它仅取决于块。因此，当更改接口时，您可以轻松地将它们移入整个块中。DOM结构的更改无需相应地更改CSS代码。
当声明变量时，在变量名称（ - ）的前面添加两条连接行
var（）函数用于读取变量。
var（）函数还可以使用第二个参数来指示变量的默认值。如果不存在变量，则将使用此默认值。
第二个参数不处理内部逗号或空间，该空间被视为参数的一部分。
VAR（）函数也可以在变量的说明中使用。
请注意，变量值只能用作属性值，不能用作属性名称。
在上面的代码中，变量大小用作属性名称，这是无效的
如果变量值是字符串，则可以用其他字符串缝制。
如果变量值是值，则不能直接与值单位一起使用。
在上面的代码中，该值直接使用该单元编写，必须使用Invalid.calc（）函数来连接它们。
如果变量值具有一个单元，则不能将其写成字符串。
可以在多个选择器中声明相同的CSS变量。在阅读时，最高优先级语句生效。这与CSS“级联”规则一致。
以下是
在上面的代码中，三个选择器都声明 - 色变量。当以不同的元素读取此变量时，将采用最高优先级规则，因此这三段的颜色是不同的。
也就是说，变量的范围是其选择器的有效范围。
在上面的代码中，变量-FOO的作用是车身选择器的有效范围，而条的范围是.CONTENT选择器的有效范围。
因此，全局变量通常放在根部元素中：根以确保任何选择设备都可以读取它们。
使用此功能，可以在响应式布局的媒体命令中声明变量，以便不同的屏幕宽度具有不同的变量值。
对于不支持CSS变量的浏览器，可以使用以下方式。
{颜色：＃7f583f;颜色：var（-primary）;}也可以使用@support命令检测到。
以下是Vant中的CSS学习笔记。
VANT默认为一些常用样式，可以直接通过className使用。
当文本的文本内容超过容器的最大宽度时，它会自动省略额外的文本。
实现的方法：
在视网膜屏幕下添加1PX边框（即Hailline），该屏幕是基于伪型变换实现的。
实现的方法：
Vant内部1PX边框使用：
Van -Collapse -Item：
Van-Cell：
Van-Button设置Hailline后将增加类别。
将底部安全区域添加到元素中。
实现的方法：
注意：
iOS 11
iOS 11.2+
兼容性写作：
可以通过组件使用构建的动画类别。
实现的方法：
涉及一些变量：
原始：https：//juejin.cn/post/7102980936232337445