CSS命名

（更新于20151204）

常用的CSS命名规则

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体佈局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签：tags

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guide

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

注释的写法:

/* Header */
内容区
/* End Header */

Id的命名:

1)页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center

(2)导航

导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

(3)功能

标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status

按钮： btn

滚动：scroll

标籤页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

注意事项::

1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写，除非一看就明白的单词。

 

CSS样式表文件命名

主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

常见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...

制定简单规则：

1）以中划线连接，如.item-img

2）使用两个中划线表示特殊化，如.item-img.item-img--small表示在.item-img的基础上特殊化

3）状态类直接使用单词，参考上面的关键词，如.active, .checked

4）图标以icon-为前缀（字体图标采用.icon-font.i-name方式命名）。

5）模块采用关键词命名，如.slide, .modal, .tips,.tabs，特殊化采用上面两个中划线表示，如.imgslide--full, .modal--pay,.tips--up, .tabs--simple

6）js操作的类统一加上js-前缀

7）不要超过四个class组合使用，如.a.b.c.d

 

【样式书写顺序】

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)