|
|
从QQtabBar看BEM0 m" y W: G, o/ t5 n
7 E. V3 }0 g4 @# P* w3 M0 \# h
首先BEM是什么意思?
! l" K) [3 L2 z! KBEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论,是一种 CSS命名规范
' ^6 \ Y+ Z& l, Z! Zweui-primary_loading__dot:库名-组件_状态__元素名1 g$ Y5 k5 U1 w5 I' r- Z& i u
库名:一般是各公司约定俗成的。9 h# e7 `& }5 L% U/ k$ T J( E: N; @
组件:一般用来创建单独的css来修饰特定的标签。/ `; F' d9 b6 @: {
状态:一般以标签处于的状态或者可以进行交互的效果命名3 d, t y) E1 }3 o$ x
元素名:一般以标签作用描述命名。6 M ]7 J4 S& A( `
BEM的优点:
# D; z5 h/ j5 @1 z( E5 U易用性 如果想使用BEM,你只需要采用BEM命名规范即可单元性 独立的块和CSS选择器,可以使得你的代码可重用和单元化灵活性 使用BEM之后,方法和工具可以按照你喜欢的方式去组织和配置 详细介绍一下BEM
" ~2 \; w, n' [8 g) H7 b2 I
- l. P- m6 n! c; Q, I* @B(Block):块
' s1 S$ r, ]7 Y' p5 F块(Block):可重复使用的功能独立的页面组件
) Z$ r' T9 L0 @块名称描述了它的目的(“它是什么?” 功能库或者组件),而不是它的状态(红色或者大小)$ M! Z1 q& I4 l1 h
' d4 o4 I ?4 U
3 b6 x) D; w/ O' m% Z6 ^. G- 块不应影响其环境,这意味着您不应为块设置外部几何(边缘)或定位。
1 T) K/ c4 x% l- X+ i9 \ - 使用 BEM 时,也不应使用 CSS 标签或ID选择器
& A# b8 M' o. r4 F6 Y& O* C E(element):元素
$ v# K/ T4 q! E4 L元素(ELement):块的复合部分。元素是依赖上下文的:它们只有处于他们应该属于的块的上下文中时才是有意义的,所以不能单独使用。
) ], D9 f3 {7 O1 q6 K& C元素名称描述它的用途(“这是什么?”items、text等),而不是它的状态(“它是什么类型,或者看起来像什么?”红色、大的等等)。; Q7 U% p( z+ n% h; P
M(modifier):修饰符
7 h1 S+ d- P7 j定义方块或元素的外观、状态或行为的实体9 O* i2 I- e. t3 K" O. `
描述了它的外观(“什么尺寸?” 或"哪个主题?等等) q/ ?3 D) q: X; a1 v$ Y
了解了BEM后我们就需要思考一下,我们应该怎样使用0 p- S) Q" i, \. \
: m3 K# v! B6 C O( N! ]
- 创建块:如果代码的一部分可能重复使用,并且它不依赖于正在实施的其他页面组件。 4 c6 o2 B; q7 O1 Y7 Z4 c, H
- 创建元素:在代码中起到作用描述下,在你所创建的块下使用。 9 O2 Z% `9 i' W
- 创建修饰符:当你需要修饰元素的特性时。 分析一下qq应用栏结构
' [* c" z( c' ?) p
0 Q& c/ O1 p' \4 J整体来看,他是一个大块包含4个小块,每个小块里包含三个元素。- a: D7 N. Z: b6 `/ g- X) K% ]
块 appBar2 J6 J1 m" J6 ?& |0 ~
小块 item$ p: r4 U& y) `$ F1 F! i+ d
图标 icon
, }) d7 e; J- V标签 desc
: C7 J. J1 ?3 k; ]/ W小圆点 pointer) X: z8 \' [+ ~/ U; c
- [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; }
复制代码 最后的效果图2 \2 [$ D% J1 r X5 }+ u8 ~
, Q' `% { u, v |) @% a& d' O& T
$ H6 X4 u: P- m5 g) h5 S上图图标皆来自阿里图标库: https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16472$ T& { T" e* I/ h( S2 ~
使用方式为下载方法,从上面网址下载。然后将其以css引入,使用类名进行添加。) _! r0 N! H6 X. q; S* G0 |7 z
到此这篇关于从QQtabBar看css命名规范BEM的详细介绍的文章就介绍到这了,更多相关css命名规范BEM内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
2 B( u* G9 N( m" c) t- u' h' f5 n, o8 c! d6 g
来源:http://www.jb51.net/css/784594.html0 S4 ^' ~+ g2 D3 {# I3 E" E
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
×
|