首页 > 作文

Bem命名

更新时间:2023-04-06 07:42:41 阅读: 评论:0

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 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图