BEM举例

时间: 2019-10-16阅读: 123标签: 组件

带单个修饰符的组件

一个组件可能有不同状态。状态应该使用修饰符类来实现。
<!-- 这样写 -->
<button class="btn btn--secondary"></button>

<style lang="scss">
  .btn {
    display: inline-block;
    color: blue;
    &--secondary {
      color: green;
    }  
  }
</style>  
不要单独使用修饰符。修饰符的作用是增加而不是替换基类。
<!-- 别 -->
<button class="btn--secondary"></button>

<style lang="scss">
  .btn--secondary {
    display: inline-block;
    color: green;
  }  
</style>  


带子元素的组件

更复杂的组件含有子元素。
原则上不要使用标签选择器,你不知道<li>里面是否还会出现嵌套的<ul><li>
<!-- 这样写 -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">Look at me!</figcaption>
</figure>

<style lang="scss">
  .photo { /* css权重 of 10 */
    &__img { } /* css权重 of 10 */
    &__caption { } /* css权重 of 10 */
  }
</style>

<!-- 别 -->
<figure class="photo">
  <img src="me.jpg">
  <figcaption>Look at me!</figcaption>
</figure>

<style lang="scss">
  .photo { /* css权重 of 10 */
    img { } /* css权重 of 11 */
    figcaption { } /* css权重 of 11 */
  }
</style>
如果您的组件的子元素有几个层次,请不要尝试在类名称中表示每个层次。
BEM并非旨在传达结构深度。
表示组件中子元素的BEM类名称应仅包括基本/块名称和一个元素名称。
在下面的示例中,请注意photo__caption__quote是BEM的不正确用法,而photo__quote更合适。
<!-- 这样写 -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">
    <blockquote class="photo__quote">
      Look at me!
    </blockquote>
  </figcaption>
</figure>

<style lang="scss">
  .photo {
    &__img { }
    &__caption { }
    &__quote { }
  }
</style>


<!-- 别 -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">
    <blockquote class="photo__caption__quote"> <!-- 在类名中永远不要包含多个子元素 -->
      Look at me!
    </blockquote>
  </figcaption>
</figure>

<style lang="scss">
  .photo {
    &__img { }
    &__caption {
      &__quote { } // 在类名中永远不要包含多个子元素
    }
  }
</style>

带修饰符的组件

在某些情况下,您可能希望更改组件中的单个元素。在这些情况下,请向元素而不是组件添加修饰符。
我发现,修改元素比修改整个组件要少见得多,也没什么用。
<figure class="photo">
  <img class="photo__img photo__img--framed" src="me.jpg">
  <figcaption class="photo__caption photo__caption--large">Look at me!</figcaption>
</figure>

<style lang="scss">
  .photo{
    &__img--framed {
      /* 新增样式修改 */
    }
    &__caption--large {
      /* 新增样式修改 */
    }
  }
</style>


基于组件修改器的样式元素

如果你发现正在以相同的方式修改同一组件的元素,则可以考虑将修改器添加到组件本身。
并基于该修改器为每个子元素调整样式。这将增加css层级,但使修改组件变得更加简单。
<!-- 这样写 -->
<figure class="photo photo--highlighted">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">Look at me!</figcaption>
</figure>

<style lang="scss">
  .photo{
    &--highlighted {
      .photo__img { }
      .photo__caption { }
    }
  }
</style>

<!-- 别 -->
<figure class="photo">
  <img class="photo__img photo__img--highlighted" src="me.jpg">
  <figcaption class="photo__caption photo__caption--highlighted">Look at me!</figcaption>
</figure>

<style lang="scss">
  .photo__img--highlighted { }
  .photo__caption--highlighted { }
</style>


多词名称

BEM名称有意使用双下划线和双连字符而不是单个来分隔块元素修饰符。原因是可以将单个连字符(-)用作单词分隔符。
class名称应易于阅读,慎用缩写
<!-- 这样写 -->
<div class="some-thesis some-thesis--fast-read">
  <div class="some-thesis__some-element"></div>
</div>

<style lang="scss">
  .some-thesis {
    &--fast-read { }
    &__some-element { }
  }
</style>

<!-- 别 -->
// These class names are harder to read
<div class="somethesis somethesis--fastread">
  <div class="somethesis__someelement"></div>
</div>

<style lang="scss">
  .somethesis {
    &--fastread { }
    &__someelement { }
  }
</style>
原文: BEM by Example   
翻译:https://segmentfault.com/a/1190000020723332  


吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

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

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

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

开发一个高质量的前端组件,这些姿势一定要知道

NPM 无论从知名度、模块数量、社区的话题数量来看,都算得上是一骑绝尘,将其他语言的模块仓库远远甩在了后面。NPM 的生态既已如此成熟,按说开发者对于 NPM 包的发布和维护应该非常熟悉才是

让你的组件千变万化,Vue slot 剖玄析微

Vue 代码中的 slot 是什么,简单来说就是插槽。 <slot> 元素作为组件模板之中的内容分发插槽,传入内容后 <slot> 元素自身将被替换。看了上面这句官方解释,可能一样不知道 slot 指的是什么

Vue组件库搭建实践与探索

在以前传统的前端页面开发方式时,存在协同困难,可复用性差的问题,导致开发和维护都不是一件简单的事。而组件化思想的提出,以及Vue、React等MV*框架的快速流行,让我们开始尝试用组件化的思想去开发

Vue动态加载组件

使用import导入组件,可以获取到组件;使用import导入组件,直接将组件赋值给componet;使用require 导入组件,可以获取到组件;使用require 导入组件,直接将组件赋值给componet

vue的provide / inject 有什么用?

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。provide/inject平时用的比较少,多数用于开发组件,但某些情况下还是很好用的。

Vue组件、自定义属性、自定义事件

一个vue文件就是一个组件。组件将html标签/css样式/对应JS打包成一个整体,也可以理解钻进一个具有样式和特效的自定义标签。自定义属性、使用自定义属性

30行代码实现一个进度条组件

30行js和30行css实现一个进度条组件,关键在于运用css变量;传入percent,生成进度条、进度条进度控制、进度条背景颜色

在 Vue.js 中使用无状态组件

在本文中,你将了解功能组件,并了解如何在 Vue 中使用工作流中的无状态组件。你的PC需要以下内容:安装 Node.js version 10.x 或以上版本。可以通过在终端中运行以下命令来验证你是否安装了此版本的Node.js:

Node.js之react.js组件-Props应用

render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码(个人理解:将组件进行函数化,通过调用组件名实现,组件的利用,以元素的形式调用,并渲染画面),具有 render prop 的组件接受一个函数

利用Js自定义事件完成组件间的数据通信

在JavaScript中,原生DOM事件在开发中是很有用的(与用户交互的重要方式),但是操作原生DOM事件其实有两大缺点:性能低、依赖于浏览器(NodeJs、小程序等不可用)。那么这个时候,就需要我们进行自定义事件去处理某些特定的业务

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

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

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