|
|
从QQtabBar看BEM
3 v4 a: h% {; M7 m6 z8 X4 G" t$ f: N+ Z
首先BEM是什么意思?
2 T! A3 a' r$ ~BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论,是一种 CSS命名规范8 w6 \2 z# B4 |; P( J
weui-primary_loading__dot:库名-组件_状态__元素名
* ]; v4 Q3 B' b+ |7 w' q( ~8 m库名:一般是各公司约定俗成的。5 C# J) h6 O: e" P
组件:一般用来创建单独的css来修饰特定的标签。
1 U o4 f' x9 X8 E' R- C& q状态:一般以标签处于的状态或者可以进行交互的效果命名# [' c0 K6 b7 }/ \3 b
元素名:一般以标签作用描述命名。, ?1 l' z6 h! {8 m& @( j. C: p
BEM的优点:
' ^% d0 j2 N5 {9 Y易用性 如果想使用BEM,你只需要采用BEM命名规范即可单元性 独立的块和CSS选择器,可以使得你的代码可重用和单元化灵活性 使用BEM之后,方法和工具可以按照你喜欢的方式去组织和配置 详细介绍一下BEM& ]4 b. o7 C& d5 |; H: I: \" A
4 ?8 |& m7 e: [- t4 L1 h7 O/ U
B(Block):块
8 C- D% l; m# e6 f/ @% |- P块(Block):可重复使用的功能独立的页面组件
) s$ l9 F! {" Q z$ q块名称描述了它的目的(“它是什么?” 功能库或者组件),而不是它的状态(红色或者大小)
; Q9 R, }- e, x" X% u9 \3 a( N ; a6 A* t& e0 h$ W( N6 L
/ W2 V! H. w. ^9 V) V
- 块不应影响其环境,这意味着您不应为块设置外部几何(边缘)或定位。
k0 ]* _: T9 H s - 使用 BEM 时,也不应使用 CSS 标签或ID选择器
! R( ^) Q7 k, u, a& D E(element):元素# p; r n% d8 F- l0 J- x
元素(ELement):块的复合部分。元素是依赖上下文的:它们只有处于他们应该属于的块的上下文中时才是有意义的,所以不能单独使用。) O2 t# y, W. O
元素名称描述它的用途(“这是什么?”items、text等),而不是它的状态(“它是什么类型,或者看起来像什么?”红色、大的等等)。
2 {+ L* B, c; A! ] M(modifier):修饰符3 t$ n+ K, Y: N0 t' q- ^( r: b- {* Y
定义方块或元素的外观、状态或行为的实体 V0 r$ s) t4 d* u. z$ v
描述了它的外观(“什么尺寸?” 或"哪个主题?等等)
& ^2 i" _1 F& }# g, a 了解了BEM后我们就需要思考一下,我们应该怎样使用
" ^7 s5 q; `3 E2 Q
0 Y- |4 i6 z$ n. C# i* N- 创建块:如果代码的一部分可能重复使用,并且它不依赖于正在实施的其他页面组件。
% |3 W `6 g9 d5 b - 创建元素:在代码中起到作用描述下,在你所创建的块下使用。
. r& n9 Q: N+ ?/ b - 创建修饰符:当你需要修饰元素的特性时。 分析一下qq应用栏结构
6 C( v$ C5 N" ? 8 m6 k8 u* P" ]5 C
整体来看,他是一个大块包含4个小块,每个小块里包含三个元素。
/ t' u2 _" D* I块 appBar4 g' z) J T( V2 j6 x
小块 item) [. C& N9 e w9 B$ |
图标 icon
& Z! M! M5 I; c标签 desc
3 L+ s/ t; y! B& N, E小圆点 pointer, l6 E3 Q# v% _' T) [! N9 x) m
- [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; }
复制代码 最后的效果图
0 _8 S# `& L% L K8 W; O0 v* r) s2 z . N# ^( ^4 d2 l W! R' Y/ w
1 G6 j9 }7 |+ m
上图图标皆来自阿里图标库: https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16472
1 e. \3 O3 l8 v' r; {7 T5 j5 F使用方式为下载方法,从上面网址下载。然后将其以css引入,使用类名进行添加。7 \1 p8 q9 i( ]! b6 j" |5 l# s3 D
到此这篇关于从QQtabBar看css命名规范BEM的详细介绍的文章就介绍到这了,更多相关css命名规范BEM内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!0 \$ u) u0 _8 q* [0 ?- g
* K) o. W* ], D2 N9 n1 Y来源:http://www.jb51.net/css/784594.html
! t1 w+ w2 g1 T! @9 `免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
×
|