从QQtabBar看BEM

首先BEM是什么意思？
BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论，是一种 CSS命名规范
- weui-primary_loading__dot：库名-组件_状态__元素名
  库名：一般是各公司约定俗成的。
  组件：一般用来创建单独的css来修饰特定的标签。
  状态：一般以标签处于的状态或者可以进行交互的效果命名
  元素名：一般以标签作用描述命名。

BEM的优点：

易用性如果想使用BEM，你只需要采用BEM命名规范即可

单元性独立的块和CSS选择器，可以使得你的代码可重用和单元化

灵活性使用BEM之后，方法和工具可以按照你喜欢的方式去组织和配置

详细介绍一下BEM

B（Block）:块

块（Block）：可重复使用的功能独立的页面组件
块名称描述了它的目的（“它是什么？” 功能库或者组件），而不是它的状态（红色或者大小）

块不应影响其环境，这意味着您不应为块设置外部几何（边缘）或定位。
使用 BEM 时，也不应使用 CSS 标签或ID选择器

E(element):元素

元素（ELement）：块的复合部分。元素是依赖上下文的：它们只有处于他们应该属于的块的上下文中时才是有意义的，所以不能单独使用。
元素名称描述它的用途（“这是什么？”items、text等），而不是它的状态（“它是什么类型，或者看起来像什么？”红色、大的等等）。

M(modifier):修饰符

定义方块或元素的外观、状态或行为的实体
描述了它的外观（“什么尺寸？” 或"哪个主题？等等）

了解了BEM后我们就需要思考一下，我们应该怎样使用

创建块：如果代码的一部分可能重复使用，并且它不依赖于正在实施的其他页面组件。
创建元素：在代码中起到作用描述下，在你所创建的块下使用。
创建修饰符：当你需要修饰元素的特性时。

分析一下qq应用栏结构

整体来看，他是一个大块包含4个小块，每个小块里包含三个元素。

块 appBar
小块 item
图标 icon
标签 desc
小圆点 pointer

<div class="qqui-appBar"><a href="#" class="qqui-appBar__item qqui-appBar__item_on"><span><i class="iconfont icon-icon-test1 icon_on"></i><span class="qqui__pointer qqui__pointer_on">1</span></span><p class="qqui__desc qqui__desc_on">消息</p></a><a href="#" class="qqui-appBar__item"><span><i class="iconfont icon-icon-test2"></i><span class="qqui__pointer"></span></span><p class="qqui__desc">联系人</p></a><a href="#" class="qqui-appBar__item"><span><i class="iconfont icon-icon-test"></i><span class="qqui__pointer"></span></span><p class="qqui__desc">看点</p></a><a href="#" class="qqui-appBar__item"><span><i class="iconfont icon-icon-test3"></i><span class="qqui__pointer qqui__pointer_oOn"></span></span><p class="qqui__desc">动态</p></a></div>

* {padding: 0;margin: 0;}a:link {color: #b0b3bf;}a:vistied {color: #b0b3bf;}a:hover {color: #2ec4fc;}a:active {color: #2ec4fc;}a i.iconfont {display: inline-block;width: 36px;height: 36px;overflow: hidden;margin-bottom: 3.5px;font-size: 36px;}a i.icon_on{color: #2ec4fc;}.qqui-appBar {display: flex;position: absolute;bottom: 0;width: 100%;z-index: 500;background-color: #f9f9f9;}.qqui-appBar .qqui-appBar__item {flex: 1;text-align: center;padding-top: 25px;font-size: 0;color: #b0b3bf;text-decoration: none;}.qqui-appBar__item>span{display: inline-block;position: relative;margin-bottom: 9px;}.qqui-appBar .qqui__desc {font-size: 18px;text-align: center;line-height: 18px;margin-bottom: 13px;}.qqui-appBar .qqui__desc_on{color: black;}.qqui-appBar .qqui__pointer{position: absolute;top: -2px;right: -2px;width: 20px;height:20px;display: inline-block;line-height: 18px;color: white;border-radius: 50%;font-size: 10px;}.qqui-appBar .qqui__pointer_on{background-color: #F43539;}.qqui-appBar .qqui__pointer_oOn{width: 12px;height: 12px; line-height: 12px; background-color: #F43539;}

最后的效果图

上图图标皆来自阿里图标库： https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16472
使用方式为下载方法，从上面网址下载。然后将其以css引入，使用类名进行添加。

从QQtabBar看css命名规范BEM相关推荐

css 命名规范 BEM
在项目的开发过程当中, 我们往往因为日益复杂的css代码而感到力不从心. 如何合理的组织css代码成为了我们前端开发过程中必须考虑到的环节. 在读element源代码的时候, 了解到了BEM的命名风格 ...
CSS命名规范-BEM
BEM 什么是BEM BEM命名的好处 BEM命名的问题什么是BEM BEM是一种命名规范.模块名+元素名+修饰器名比如Instagram团队使用的驼峰式 .blockName-elementNa ...
CSS命名规范 BEM
在我们开发的时候,写了一个模块,在现有页面中测试都没问题.一段时间后,新需求新页面,该页面一打开,突然发现页面中样式都变样了,一查问题,原来是其他组件的样式和该页面的样式相互覆盖了.我相信大家在工作的 ...
CSS样式的格式命名,CSS命名规范：BEM
什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(modifier)的简写块: 组件元素:块的子节点修饰符:改变某个块的外观的标志,不同状态或不同版本 Yan ...
css命名规范和书写规范
1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(f ...
我认为最节省时间的CSS命名规范
CSS命名规范一 js中对变量的命名最好使用camel case驼峰式命名法,但CSS中更适用于red-box命名规范. CSS命名规范二 BEM命名规范 B=>block E=>elem ...
css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发来源 | web前端开发我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
关于css命名规范一些小技巧或经验
前言通过前边自己进行了一周自适应招聘官方网站PC端和移动端的开发,自己在开发过程中也遇到了一些css命名规范的令人头疼的事情,自己回过头来看自身的代码认真思考并总结了一些不成熟的经验,下文将向大家介 ...
css之命名规范 BEM
这篇文章主要是记录下我从讨厌,习惯,喜欢,热爱BEM方式的心路历程刚入职水滴, 第一个需求是做5个落地页,开了需求,过了设计图,so easy 一切都在计划中,提测,准备上线最后阶段coderev ...
html css 命名规范,浅谈css命名规则(新手必看)
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...

从QQtabBar看css命名规范BEM

从QQtabBar看BEM

详细介绍一下BEM

分析一下qq应用栏结构

从QQtabBar看css命名规范BEM相关推荐

最新文章

热门文章