Css中bem书写规范

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

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.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

js模块化编程思想、实现与规范

随着BS架构的发展,网站逐渐变成了互联网应用程序,嵌入网络的JavaScript代码越来越庞大,越来越复杂(业务逻辑处理或用户交互很多写在前端)。网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等

js中箭头函数的编码规范,如何更好的使用箭头函数

当您必须使用匿名函数,请使用箭头函数表示法,它创建了一个在 this 上下文中执行的函数的版本,这通常是你想要的,而且这样的写法更为简洁。如果你有一个相当复杂的函数,你或许可以把逻辑部分转移到一个声明函数上。

CSS规范

CSS 指层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,但由于 CSS 天生全局性,随着项目复杂度增加,极易出现样式覆盖以及其它的问题。

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

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

Flutter 代码开发规范

Flutter 代码开发规范文档 仅做参考;标识符三种类型;大驼峰;使用小写加下划线来命名库和源文件;使用小写加下划线来命名导入前缀;使用小驼峰法命名其他标识符

Web前端开发规范手册

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

什么是驼峰命名?骆驼式命名法规范

骆驼式命名法(Camel-Case)又称驼峰式命名法,是电脑程式编写时的一套命名规则(惯例)。正如它的名称CamelCase所表示的那样,是指混合使用大小写字母来构成变量和函数的名字

常用的JavaScript编程风格

工作中好的编程风格会更友好,不好的编程风格会让队友难受,变量的声明:使用let和const代替var(var存在变量提升等副作用),声明常量使用const

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

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

W3C 代码标准规范

W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组、社区组、商务组等)。W3C会根据产业界的标准需求调整Domains和Activity的设置及相关的工作组设置。

点击更多...

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

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

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