|
|
从QQtabBar看BEM; Z. v& j2 u7 s0 K( k, v9 s
0 L9 t+ x1 w- J" _. y' h% g首先BEM是什么意思?
* u% b) _) A' t1 t$ }BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论,是一种 CSS命名规范 d' R4 `5 D. b
weui-primary_loading__dot:库名-组件_状态__元素名
2 ~" i! _3 H4 u) n库名:一般是各公司约定俗成的。# x- W4 E$ ? }2 F; F0 E
组件:一般用来创建单独的css来修饰特定的标签。
0 N( `: }* J. z/ S状态:一般以标签处于的状态或者可以进行交互的效果命名
2 s6 _, v, O4 o% P) I3 v4 m元素名:一般以标签作用描述命名。
2 ?8 l# h6 a9 U6 v8 T eBEM的优点:
" a0 D/ q+ K7 v& i8 N7 A( l易用性 如果想使用BEM,你只需要采用BEM命名规范即可单元性 独立的块和CSS选择器,可以使得你的代码可重用和单元化灵活性 使用BEM之后,方法和工具可以按照你喜欢的方式去组织和配置 详细介绍一下BEM' d/ E/ U# w, E6 M, j, r
& [) v' {7 U$ ?6 W
B(Block):块* U E$ y$ {- P5 H" Y% j) L; w7 K* W
块(Block):可重复使用的功能独立的页面组件0 ]. w: A' e- J$ l7 l9 L; _3 ]
块名称描述了它的目的(“它是什么?” 功能库或者组件),而不是它的状态(红色或者大小)
- V0 D$ n3 e$ R
+ C$ o# }& l* V; v
9 @! G* [5 W0 r# t; H7 A* ?5 {- 块不应影响其环境,这意味着您不应为块设置外部几何(边缘)或定位。 - A" t0 z& @2 F- @
- 使用 BEM 时,也不应使用 CSS 标签或ID选择器$ H6 ~- L& V! s
E(element):元素
& q) j7 i8 E: ?, \% d; W元素(ELement):块的复合部分。元素是依赖上下文的:它们只有处于他们应该属于的块的上下文中时才是有意义的,所以不能单独使用。
- [; \. q- H8 V; S元素名称描述它的用途(“这是什么?”items、text等),而不是它的状态(“它是什么类型,或者看起来像什么?”红色、大的等等)。
: X( \# ?" q% d- M7 I3 ^! D M(modifier):修饰符
( j; Z, H9 T# z. w: s6 ?! J0 f定义方块或元素的外观、状态或行为的实体& x& F3 C2 d% `& X; _5 F5 b4 N5 X: S
描述了它的外观(“什么尺寸?” 或"哪个主题?等等)3 a" P' Y+ ^# B! X
了解了BEM后我们就需要思考一下,我们应该怎样使用8 i2 J: @; F7 V' G- t: ]
3 u% S/ l9 U5 _% k1 ?. g' C1 J
- 创建块:如果代码的一部分可能重复使用,并且它不依赖于正在实施的其他页面组件。
) O* [8 J6 A# l1 f3 j - 创建元素:在代码中起到作用描述下,在你所创建的块下使用。 % q; n+ \- q. l' Q1 {! I4 n, f# V9 ?( x
- 创建修饰符:当你需要修饰元素的特性时。 分析一下qq应用栏结构
/ W+ x) J Y& k+ n; B
: p6 S2 A$ q: G整体来看,他是一个大块包含4个小块,每个小块里包含三个元素。
) I) O3 |4 V J# C* {3 T8 V块 appBar6 l! [! U0 |' l
小块 item9 R9 N! n% v" U# A
图标 icon$ P0 F) Q1 S* L
标签 desc$ w6 T8 b( n+ B0 s
小圆点 pointer" u8 H) Y; F: H5 A
- [url=https://mxzdjyxk.cn/#] 1 消息
- [/url] [url=https://mxzdjyxk.cn/#] 联系人
- [/url] [url=https://mxzdjyxk.cn/#] 看点
- [/url] [url=https://mxzdjyxk.cn/#] 动态
- [/url]
复制代码- * { 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; }
复制代码 最后的效果图8 @: v' G, U4 {8 q p& Z6 ~
# {. C' F! F& W1 [, U9 w# z- O0 h2 k) a, j
上图图标皆来自阿里图标库: https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16472
7 u8 J$ n& X7 N$ w使用方式为下载方法,从上面网址下载。然后将其以css引入,使用类名进行添加。- e1 ^, P c. r9 D1 u
到此这篇关于从QQtabBar看css命名规范BEM的详细介绍的文章就介绍到这了,更多相关css命名规范BEM内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!2 Y! i. ?1 N! r6 d& K w
' C3 V3 W$ C% ~4 B
来源:http://www.jb51.net/css/784594.html
$ {* M: w$ a; e( x5 M) \# w/ y% Y5 N免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
×
|