class命名
来源:互联网 发布:音乐播放 知乎 编辑:程序博客网 时间:2024/06/03 21:31
常见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>.inner-center
section.section-feature>.inner-center // if
section.section-main>.inner-center
section.section-postscript>.inner-center // if
footer.footer>.inner-center
具体可参考HTML整站结构设计,这里我们可以看出都是些简单的关键词,比较好理解,一看就知道是什么。
现在问题来了,如果其他地方也要用到这些关键词怎么办?
- class命名
- 网页class命名规范
- class命名规则
- class命名规范
- class,id的命名
- class类命名
- id和class命名规范
- css样式 class命名规范
- class类名命名规则
- css 样式class命名规范
- Symbian OS 中的Class命名约定
- Symbian OS 中的Class命名约定
- JS批量获取class命名节点 getElementsByClassName()
- 前端小知识点--class命名规范
- 关于Html class id 命名规范
- Symbian OS 中的Class命名约定(M类)
- CSS的class、id、css文件名的常用命名
- 元素的class与ID命名常用关键字
- tjut 3792
- linux下用户使用sql*plus的环境配置
- delphi程序向另一个可执行程序发消息
- 源码库网站
- Yii中引入js和css文件
- class命名
- 音视频封装格式、编码格式知识
- “找不到或无法加载主类”错误的原因
- oracle中scott不可登录的解决办法
- spring boot(7) 配置外部tomcat(1)
- 关于m3u8知识点
- Google CSE帮你多站点同时站内搜索
- 面试题
- Cef介绍及下载地址和官方网站