京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 8308|回复: 0

从QQtabBar看css命名规范BEM的详细介绍

[复制链接]

18

主题

0

回帖

10

积分

新手上路

积分
10
发表于 2021-11-21 02:19:50 | 显示全部楼层 |阅读模式 来自 中国
从QQtabBar看BEM' q8 I) ^' R( L$ e) q3 H( ?

7 F7 u% G, u$ X! [/ G首先BEM是什么意思?
+ O8 Z& E8 ?5 t6 OBEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论,是一种 CSS命名规范  [/ l5 T4 S' y9 X7 `
weui-primary_loading__dot:库名-组件_状态__元素名
" u, J" \3 d; L2 Z库名:一般是各公司约定俗成的。
; w7 B! B- Y1 w7 R组件:一般用来创建单独的css来修饰特定的标签。) g1 w2 {( V" |3 E! `
状态:一般以标签处于的状态或者可以进行交互的效果命名
+ B( [& E5 R! `/ i元素名:一般以标签作用描述命名。
1 m* q  m* O* [5 p  N5 p" j) I0 s
BEM的优点:3 o3 D2 Z: L& w
易用性 如果想使用BEM,你只需要采用BEM命名规范即可单元性 独立的块和CSS选择器,可以使得你的代码可重用和单元化灵活性 使用BEM之后,方法和工具可以按照你喜欢的方式去组织和配置
详细介绍一下BEM/ T' K8 S7 H+ `/ X- a

! s7 l& _4 {! {" v  E4 @0 _B(Block):块
$ a" I9 h2 |2 p: |
块(Block):可重复使用的功能独立的页面组件6 H+ h1 t; z$ i4 V" B+ f! f, N5 D
块名称描述了它的目的(“它是什么?” 功能库或者组件),而不是它的状态(红色或者大小)
- V3 Z# Z% L  @' b1 s3 U4 Z
" Y% M# T8 f8 B6 v( m7 L6 e
       
    ) ~( u+ m% ~% c9 Q" E( L
  • 块不应影响其环境,这意味着您不应为块设置外部几何(边缘)或定位。    5 S* k! J7 }, m- V8 ~% y
  • 使用 BEM 时,也不应使用 CSS 标签或ID选择器' i' w  f  j; v/ {) J% z1 S
E(element):元素& K; O6 p  f4 F" \: \. I: ^
元素(ELement):块的复合部分。元素是依赖上下文的:它们只有处于他们应该属于的块的上下文中时才是有意义的,所以不能单独使用。
5 |, F! s4 b/ V7 P! ?9 Q) u( Z7 X: J元素名称描述它的用途(“这是什么?”items、text等),而不是它的状态(“它是什么类型,或者看起来像什么?”红色、大的等等)。, R" ]0 i/ ^7 i3 {# O" A7 F6 e
M(modifier):修饰符1 N: f+ u0 J: O& c9 p
定义方块或元素的外观、状态或行为的实体6 ]& n& |) a3 F' [
描述了它的外观(“什么尺寸?” 或"哪个主题?等等): i- }7 h* ]9 R) e8 m2 a
了解了BEM后我们就需要思考一下,我们应该怎样使用# z, l# T( n8 C
       
    % ?3 C' M' {4 g) S$ r
  • 创建块:如果代码的一部分可能重复使用,并且它不依赖于正在实施的其他页面组件。   
    - w% N' q% V% |/ {' Y2 p4 l
  • 创建元素:在代码中起到作用描述下,在你所创建的块下使用。    ; \5 T7 P, K; ^8 N; u
  • 创建修饰符:当你需要修饰元素的特性时。 分析一下qq应用栏结构
    , ~& O7 a7 m, I+ h3 p

( G# w1 G1 h2 ]; j' g整体来看,他是一个大块包含4个小块,每个小块里包含三个元素。$ T, ?: U  {# U- {) U! x
块 appBar0 ]$ U1 K& o4 I( N/ y5 Y
小块 item( |0 r' F1 Y3 C+ k3 e
图标 icon* n2 u( o9 }+ b) b8 Q" t0 z' {
标签 desc+ z6 K! t# D, D/ @
小圆点 pointer
' _. \. P/ C7 z6 [  M- {' X
  1.         [url=https://mxzdjyxk.cn/#]                                1                        消息
  2. [/url]        [url=https://mxzdjyxk.cn/#]                                                        联系人
  3. [/url]        [url=https://mxzdjyxk.cn/#]                                                                    看点
  4. [/url]        [url=https://mxzdjyxk.cn/#]                                                                    动态
  5. [/url]   
复制代码
  1. * {            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;                 }
复制代码
最后的效果图% a1 u! u6 z* q8 S  F1 O) |
 
/ Y# D3 D( d, A3 h( z& x
$ T9 G7 Q/ N! c
上图图标皆来自阿里图标库: https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=16472! r5 S( A5 u9 ^. E( _! O5 N
使用方式为下载方法,从上面网址下载。然后将其以css引入,使用类名进行添加。
, Z+ K% L: v# F5 \* k$ g到此这篇关于从QQtabBar看css命名规范BEM的详细介绍的文章就介绍到这了,更多相关css命名规范BEM内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!7 w: P; `+ x/ v/ ^, z6 @

/ \  w) B5 h0 V6 p6 E来源:http://www.jb51.net/css/784594.html2 a4 h( {7 a  }8 ?
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

帖子地址: 

梦想之都-俊月星空 优酷自频道欢迎您 http://i.youku.com/zhaojun917
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2026-6-23 01:41 , Processed in 0.038405 second(s), 23 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表