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