Css中bem书写规范

时间: 2019-07-23阅读: 288标签: 规范

bem是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier组成。选择器里用以下连接符扩展他们的关系:

  • `__:双下划线用来连接块和块的子元素
  • ` :仅作为连字符使用,连接块或元素或修饰符的多个单词(也可以直接写成驼峰式)
  • --:双中划线用来连接块或元素的状态(也可使用‘_’单下划线表示)

示例:

block-name_modifier-name
block-name__element-name--modifier-name
block-name_modifier-name--modifier-value
block-name__element-name--modifier-name--modifier-value


基本概念

Block(块)

代码片段可能被复用且这段代码不依赖其他组件即可用Block。块可以互相嵌套,可以嵌套任意多层。
特点:

  • 块的名称用于描述它的目的。如 menu、button
  • 块不能影响所在环境。这意味着不能为块设置margin或position
  • 只能使用class命名选择器,而不能使用标签或id选择器
  • 不依赖于页面内其他块或元素


Element(元素)

Element是Block的一部分,没有独立存在的意义。任何一个Element语义上是和Block绑定的。

特点:

  • 与块使用'__'连接。 如: block__item
  • 用于描述它的目的。如:item、text
  • 元素可以彼此嵌套,可以嵌套任意多层
  • 元素总是属于块的一部分。所以类似于block__item1__item2的命名是不合法的


Modifier(修饰符)

Modifier是Block或Element上的标记。使用它们来改变样式,行为或状态。与块或元素连接符为'--'。


应用

相对另外的Blocks定位Block

最好的方式是混合使用block和element。解决block上不能设置margin、position。

例:

<body>
    <!-- header and navigation-->
    <header>...</header>
    <!-- footer -->
    <footer>...</footer>
</body>
.page__header {
    padding: 20px;
}

.page__footer {
    padding: 50px;
}


Block内定位Elements

通过额外创建Block的子Element来定位嵌套。

例:

<body>
    <div>
      <!-- header and navigation-->
      <header>...</header>
      <!-- footer -->
      <footer>...</footer>
    </div>
</body>

.page__inner {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
}

  

关于命名

选择器的命名必须完整且精确地描述它代表的BEM实体。

例:

.button {}
.button__icon {}
.button__text {}
.button_theme_islands {}

我们可直接指导我们在处理一个块元素。在html使用如:
<button>
    <span></span>
    <span>...</span>
</button>

而下面的css就很难让我们做出相同的判断:
.button {}
.icon {}
.text {}
.theme_islands {}
吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/article/detial/4330

Js ES6编码规范

本章节讨论使用ES6编码风格到代码中需要注意的点。通过记住这些关键点,可以让我们写出更优美的、可读性更强的JavaScript E6风格的代码。ES6 提出了两个新的声明变量的命令: let 和 const。

分享一份大佬的MySQL数据库设计规范,值得收藏

MySQL数据库与 Oracle、 SQL Server 等数据库相比,有其内核上的优势与劣势。我们在使用MySQL数据库的时候需要遵循一定规范,扬长避短。无意中从github上看到一个大佬的MySQL数据库设计规范

CSS的BEM规范学习

块中的子元素是块的子元素,并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。如上面的例子,li.item 是列表的一个子元素

Web前端开发规范手册

文件命名规则:文件名称统一用小写的英文字母、数字和下划线的组合。引文件统一使用index.htm index.html index.asp文件名(小写),图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质

为什么有的编程规范要求用 void 0 代替 undefined?

Undefined 类型表示未定义,它的类型只有一个值,就是 undefined。任何变量在被赋值前它的值都是 undefined,但是在 JavaScript 引擎中,undefined 是一个变量而非关键字。

CSS的书写规范和顺序

关于CSS的书写规范和顺序,是大部分前端er都必须要攻克的一门关卡,如果没有按照良好的CSS书写规范来写CSS代码,会影响代码的阅读体验。这里总结了一个CSS书写规范、CSS书写顺序供大家参考

实际项目中用Redis要注意哪些规范?

Redis功能强大,数据类型丰富,再快的系统,也经不住疯狂的滥用。通过禁用部分高风险功能,并挂上开发的枷锁,业务更能够以简洁、通用的思想去考虑问题,而不是绑定在某种实现上。

前端标准规范

总体原则:极简、极快、解耦,主要适用范围:vue 单页项目+;关于图片:少量直接放到本页面文件下(资源集中,互不影响),有两个页面以上公用则抽离放到 img 文件夹下(降低层级),assets 下的 img 主要放 favicon.png、pwa等全局图片

HTML 规范未来还需要哪些新内容?

HTML5 规范在 2014 年正式发布。时至今日,虽然这一规范已经引入了许多新的 API、功能和改进,但许多开发人员已经在展望下一代 HTML 规范了。有些人还是不知道 HTML 标准是怎样制定出来的。具体来说,一些组织提出自己的模式和协议

一份完整的MySQL开发规范,进大厂必看!

所有数据库对象名称必须使用小写字母并用下划线分割;所有数据库对象名称禁止使用mysql保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来);数据库对象的命名要能做到见名识意

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全