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="search-form">
        <input class="search-form__input"/>
      </form>
    与block的联系:
      + block确定命名空间,确保element不会被其他block影响
      + element只能作为block的一部分使用,不可独立使用
        例子:
          error:
          <form class="search-form__input"/>
          <button class="search-form__button"/>
      + block不一定含有element

  * Modifier :修饰符,用以展示状态,表现(size,color,...),用它们来改变外观或行为。
    使用双中划线和block或element相连,
    例子:
      <form class="search-form">
        <input class="search-form__input">
        <button class="search-form__button search-form__button--disabled">
      </form>
    *Modifier不单独使用,使用时需要对应的block或element*
3. Bem展示的思维方式:
    Bem将页面分为多个block组成,其下同时是有多个element构成,每个element,block之间是相互独立的,页面是由组件组合而成,而组件与组件之间是相互组合,而不是依赖

Bem命名的更多相关文章

  1. 更好用的css命名方式——BEM命名

    一.什么是BEM? BEM代表块(Block),元素(Element),修饰符(Modifier).无论是什么网站页面,都可以拆解成这三部分. 二.带你认识网页 我们来看一下qq的官网,它可以由三个块 ...

  2. CSS BEM 命名规范简介

    [前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料 ...

  3. 一篇关于BEM命名规范

    一直以来自己对命名都是比较混乱的,并没有一个比较好的格式来命名,最近自己碰巧学习到了BEM命名规范,我想谈谈自己的理解以供自己来学习,同时也可以和各位大佬一起学习. BEM是一个很有用的方法可以创建复 ...

  4. CSS — BEM 命名规范

    推荐阅读: https://juejin.im/post/5b925e616fb9a05cdd2ce70d 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(m ...

  5. BEM命名及其在sass中的实践

    Why use it 近几年web应用的发展可以用疯狂来形容,依靠浏览器的支持以及前端技术和框架的发展,很多应用已经把大量的逻辑从服务器端迁移到了浏览器端,使用前后端分离技术,浏览器端与用户进行交互来 ...

  6. 使用BEM命名规范来组织CSS代码

    BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字 ...

  7. CSS 中 BEM命名方式

    BEM的意思就是块(block).元素(element).修饰符(modifier),是一种CSS Class 命名方法. 类似于: .block{} .block__element{} .block ...

  8. CSS BEM 命名方式

    简介 简易 css 命名方式,减小命名冲突,使得 css 更有组织感和识别感.但如今写 react 项目大多可以忽略对 css 的命名约束了. 官网介绍:http://getbem.com/intro ...

  9. css命名规范: BEM 的命名法

    整理自:前端早读课[第1183期]这些 CSS 命名规范,将省下你大把调试时间 试图解决 3 类问题: 仅从名字就能知道一个 CSS 选择器具体做什么 从名字能大致清楚一个选择器可以在哪里使用 从 C ...

随机推荐

  1. [HDU3518]Boring counting(后缀数组)

    传送门 求出现超过1次的不重叠子串的个数 根据论文中的方法. 枚举子串的长度 k. 用 k 给 height 数组分组,每一组求解,看看当前组的位置最靠后的后缀和位置最靠前的后缀所差个数是否大于长度, ...

  2. DTrace Probes In MySQL 自定义探针

    Inserting user-defined DTrace probes into MySQL source code is very useful to help user identify the ...

  3. firedac的TFDStoredProc动态创建并调用存储过程

    1)中间件执行存储过程 sp.Close; sp.StoredProcName := procName; sp.Prepare;  // 生成存储过程的参数列表,无任何OUTPUT的存储过程,也会自动 ...

  4. VS2010: 远程访问IIS Express

    可以远程访问IIS Express的意义在于:1.    可以从其它设备上Debug项目,这点对于手持设备等不是很容易用虚拟机虚拟的设备尤为重要.2.    可以避免过早配置IIS 7(不一定是好事. ...

  5. HDOJ 2196 Computer 树的直径

    由树的直径定义可得,树上随意一点到树的直径上的两个端点之中的一个的距离是最长的... 三遍BFS求树的直径并预处理距离....... Computer Time Limit: 1000/1000 MS ...

  6. 为什么是kafka?

    MQ在分布式场景下的应用已经非常广泛了.可是在全部的MQ使用场景中,大多都要求不能丢消息.意味着必须有持久化的能力,传统行业经常使用的activemq.rabbitmq尽管有持久化能力,无奈的是性能太 ...

  7. 简化bigdecimal计算的小工具类

    简化bigdecimal计算的小工具类 如果我们要做一个加法运算,需要先将两个浮点数转为String,然后够造成BigDecimal,在其中一个上调用add方法,传入另一个作为参数,然后把运算的结果( ...

  8. Codeforces--630E--A rectangle(规律)

     E - A rectangle Crawling in process... Crawling failed Time Limit:500MS     Memory Limit:65536KB  ...

  9. 软件-版本控制:VCS(版本控制系统)

    ylbtech-软件-版本控制:VCS(版本控制系统) 版本控制系统(Version Control System),是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统.版本控制系统 ...

  10. PCB MongoDB数据库 备份与还原

    一. MongoDB数据库 备份与还原工具介绍: 数据备份工具  mongodump.exe 数据还原工具   mongorestore.exe 二. MongoDB数据库备份 mongodump - ...