bem思想
1. 什么是bem:
bem:(block人生港湾块,element元素,modifier修饰符)一种命名规范,
其核心思想是将页面拆分成一个个独立的富有语义的块(blocks),从而使得团队在开发复杂的项目变得高效,并且十分有利于代码复用,即便团队引入新成员,也容易维护。
基本命名模式
block{},
block__element{},
block–modifier{},
2. bem各元素:
* block :block是逻辑和功能独立的单元,类似于组件。每个block包含自身的行为(js)、结构(html模板)、表现(css)。block的独立性有利于代码的复用,有利于项目管理。
特点:
+ block名描述block功能,不包括状态,可以复用,嵌套
+ block不影响自身布局,所以就不能设置margin,position属性
+ 不在bem中使用元素选择器,和id选择器
+ 在同一页面中不依赖于其他block或element;
例子:
地垒 <button class=”button” />
<button class=”button button–success”/>
<button class=”button button–danger”/>
* element: element是block的组成部分,不脱离block使用,嵌套使用,可嵌套多个数量,相互嵌套
特点:
+ element表示弹弓制作目的(item,text…),而不是状态(red,disabled…)
+ element的命名方式:block-name__element-name,使用双下划线连接block名和element名
例子:
<form class=”arch-form”>
<input class=”arch-form__input”/>
</form>
与block的联系:
+ block确定命名空间,确保element不会被其他block影响
+ element只能作为block的一部分使用,不可独立使用
例子:
error:
<form class=”arch-form__input”/>
<button class=”arch-form__button”/>
+ block不一定含有element
* modifier :百组词修饰符,用以展示状态,表现(size,color,…),用它们来改变外观或行为。
使用双中划线和block或element相连,
例子:
<form class=”arch-form”>
<input class=”arch-form__input”>
<button class=”arch-form__button arch-form__button–disabled”>
</form>
*modifier不单独使用,使用时需要对应的block或element*
3. bem展示的思维方式:
bem将页面分为多个block组成,其下同时是有多个element构成,每个element,block之间是如何看人的面相相互独立的,页面是由组件组合而成,而组件与组件之间是相互组合,而不是依赖
本文发布于:2023-04-06 07:42:40,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/ec4a57ade8ce93bb7c2f01c383c2bc9f.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:Bem命名.doc
本文 PDF 下载地址:Bem命名.pdf
留言与评论(共有 0 条评论) |