详解css BEM撰写标准

日期:2021-03-01 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

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的1一部分,沒有单独存在的实际意义。任何1个Element词义上是和Block关联的。

特性:

  • 与块应用'__'联接。 如: block__item
  • 用于叙述它的目地。如:item、text
  • 元素能够相互嵌套循环,能够嵌套循环随意多层
  • 元素一直属于块的1一部分。因此相近于block__item1__item2的取名是不符合法的

Modifier(装饰符)

Modifier是Block或Element上的标识。应用它们来更改款式,个人行为或情况。与块或元素联接符为'--'。

运用

相对性此外的Blocks精准定位Block

最好是的方法是混和应用block和element。处理block上不可以设定margin、position。

例:

<body class="page">
    <!-- header and navigation-->
    <header class="header page__header">...</header>

    <!-- footer -->
    <footer class="footer page__footer">...</footer>
</body>
.page__header {
    padding: 20px;
}

.page__footer {
    padding: 50px;
}

Block内精准定位Elements

根据附加建立Block的子Element来精准定位嵌套循环。

例:

<body class="page">
    <div class="page__inner">
      <!-- header and navigation-->
      <header class="header">...</header>

      <!-- footer -->
      <footer class="footer">...</footer>
    </div>
</body>
.page__inner {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
}

有关取名

挑选器的取名务必详细且精准地叙述它意味着的BEM实体线。

例:

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

大家可立即具体指导大家在解决1个块元素。在html应用如:

<button class="button button_theme_islands">
    <span class="button__icon"></span>

    <span class="button__text">...</span>
</button>

而下面的css就很难让大家做出同样的分辨:

.button {}
.icon {}
.text {}
.theme_islands {}

在我的git新项目miniui中选用了BEM标准,应用sass完成了BEM。有兴趣爱好能够查询:https://github.com/banyaner/miniui

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:webpack载入css文档及其配备方式 返回下一篇:没有了