class命名

发布时间:2017-3-23 12:13:15 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"class命名 ",主要涉及到class命名 方面的内容,对于class命名 感兴趣的同学可以参考一下。

常见class关键词:

  • 布局类:header, footer, container, main, content, aside, page, section
  • 包裹类:wrap, inner
  • 区块类:region, block, box
  • 结构类:hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
  • 列表类:list, item, field
  • 主次类:primary, secondary, sub, minor
  • 大小类:s, m, l, xl, large, small
  • 状态类:active, current, checked, hover, fail, success, warn, error, on, off
  • 导航类:nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
  • 交互类:tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
  • 星级类:rate, star
  • 分割类:group, seperate, divider
  • 等分类:full, half, third, quarter
  • 表格类:table, tr, td, cell, row
  • 图片类:img, thumbnail, original, album, gallery
  • 语言类:cn, en
  • 论坛类:forum, bbs, topic, post
  • 方向类:up, down, left, right
  • 其他语义类:btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

制定简单规则:

  • 以中划线连接,如.item-img
  • 使用两个中划线表示特殊化,如.item-img.item-img--small表示在.item-img的基础上特殊化
  • 状态类直接使用单词,参考上面的关键词,如.active, .checked
  • 图标以icon-为前缀(字体图标采用.icon-font.i-name方式命名)。
  • 模块采用关键词命名,如.slide, .modal, .tips, .tabs,特殊化采用上面两个中划线表示,如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
  • js操作的类统一加上js-前缀
  • 不要超过四个class组合使用,如.a.b.c.d                                                  

修饰关键词

  • 以header为例,我们可以添加前缀表示不同的header,如区块头部.block-hd(hd为header简写),modal头部.modal-hd,文章头部.article-hd
  • 同样标题也可以分为,页面标题.page-tt(title的简写),区块标题.block-tt

特殊化class

以上面的tt为例,大概有三种办法:

  • 第一种办法: 追加class特殊化,根据我们上面定义的规则,在.page-tt上追加一个class成为.page-tt.page-tt--user,注意.page-tt--user不是一个独立的class,它使基于.page-tt这个基础上的。
  • 第二种办法: 使用父类,给一个范围,于是形成.page-user .page-tt

一般我们使用的是第二种和第三种办法,因为这两种都有共同的.page-tt,可以比较方便控制一些基础共有的样式。

由第三个通过父类控制的办法,我们进入第三个要讨论的问题,层级结构

层级

最适合层级的例子莫过于ul>li结构了,如下面的结构:

<ul>    <li>        <a href="#"><img src="" alt=""></a>        <h3><a href="#"></a></h3>        <p></p>    </li></ul>

一般来说我们也有两种办法定义层级,第一种为继承式,第二种为关键词式。

// 继承式ul.card-list    li.list-item        a.item-img-link>img.item-img        h3.item-tt>a.item-tt-link        p.item-text// 关键词式ul.card-list    li.item        a.field-img-link>img.field-img        h3.field-tt>a.field-tt-link        p.field-text

由上可以看出继承式一般子元素接着父元素的最后一个单词如li接着ul的list,而li的子元素接着li的item;至于关键词式则完全由关键词来表示层级,list>item>filed正好构成三层等级。

上一篇:Oracle分区
下一篇:mysql 范式和反范式

相关文章

关键词: class命名

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款