Css 命名规范

页面布局（结构）

页头：header

容器（内容）：content/container

导航：nav

页面主体：main

页尾：footer

页面外围控制整体布局宽度并居中内容左对齐：wrapper

左右中：left right center

栏目：column

栏目标题：title

侧栏：sidebar

 

导航类

导航：nav

主导航：mainnav

子导航：subnav

顶导航-边导航-左导航-右导航：topnav-sidebar-leftnav-rightnav

菜单：menu

子菜单：submenu

摘要：summary

 

功能类

标志：logo

广告：banner

登录：login

登录条：loginbar

注册：register

搜索：search

商品区：shop

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

新闻：news

热点：hot

指南：guild

服务：service

下载：download

投票：vote

合作伙伴：partner

当前的：current

标题：title

提示信息：msg

小技巧：tips

注释：note

图标：icon

友情链接：friendlink

版权：copyright

 

注释的写法

/* 区名 */

内容区

/* End 区名 */

 

class的命名

(1)颜色:使用颜色的名称或者16进制代码,如:

.red{color:red;}

.f60{color:#f60;}

.ff8600{ color:#ff8600;}

(2)字体大小,直接使用”font+字体大小”作为名称,如

.f12px{ font-size:12px;}

.f9pt{ font-size:9pt;}

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如

.barnews { }

.barproduct { }

 

注意事项

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

 

一般css文件

重置（初始化） reset.css

布局，版面 layout.css

基本共用 base.css/global.css

主要的 master.css

模块 module.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css