CSS规范
1. CSS书写顺序
-
位置属性(position, top, right, z-index, display, float等)
-
大小(width, height, padding, margin)
-
文字系列(font, line-height, letter-spacing, color- text-align等)
-
背景(background, border等)
-
其他(animation, transition等)
2. 使用CSS缩写属性
-
CSS有些属性是可以缩写的，比如padding,margin,font等等。
-
去掉小数点前的“0”
-
有些颜色代码是可以缩写的，就尽量缩写
3. 连字符CSS选择器命名规范
-
1）.长名称或词组可以使用中横线来为选择器命名。
-
2）.不建议使用“_”下划线来命名CSS选择器
4. 不要随意使用id
- id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
5. 为选择器添加状态前缀
- 有时候可以给选择器添加一个表示状态的前缀，让语义更明了
6. 注释书写规范
-
6.1 提示和标签信息注释
-
这是注释最常用的途径，可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最为重要。
.search{ border: Ipx solid #fff; /*Border Color*/ } -
注意：注释内容和前面样式语句间有3个空格，后面1个空格
-
6.2 修改样式注释（时间和相关人员）
/*_Styles updated: Thu 4.8.08 @ 5:15 p.m. Author: hour ------------------------------------------------------- ----------*/ -
6.3 文档结构
/*_Header ------------------------------------------------------- ----------*/ .search{ border: Ipx solid #fff; /*Border Color*/ /*_Menu ------------------------------------------------------- ----------*/ .menul ul{ border: Ipx solid #fff; /*Border Color*/} -
注意：相对独立的2段内容之间空1行。
7. CSS布局编码标准和建议
-
7.1 建立样式表索引
-
样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的CSS注释文本写在 main.css中。给出该CSS文件作者的相关信息；定义站点的布局，记录文件版本号（利于多作者协作及将来更新）
/*------------------------------------------------------- ---------- *Filename: main.css *Description: Global CSS *version: *Website: http://www.testsoft.com *Page width: 980px *Number of columns: 2 ------------------------------------------------------- ----------*/ -
7.2 命名锚点 的使用
-
命名锚点是用来规划整个CSS文件结构的（就好像书签一样），从而使整个CSS文件获得良好的组织。命名锚点一般也是书写在样式表头部的索引注释中。 CSS本身没有内部的锚点系统，所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点，并在整个文档中查找，从而获取该CSS节。
$_header Header Definitions $_menu Global Site $_content Everything within the content ------------------------------------------------------- ----------*/ /*_header ------------------------------------------------------- ----------*/ { ...Header CSS Definitions...} /*_menu ------------------------------------------------------- ----------*/ { ...Header CSS Definitions...} -
7.3 CSS组合
-
不必重复有相同属性的多个选择符，只要用英文逗号（,）隔开选择符就可以。
h2 { color: red; } .w3cbbs { color: red; } .w3cbbs 52css { color: red; } h2,.w3cbbs,.w3cbbs 52css { color: red; }
8. DIV+CSS页面的布局
-
Table布局由于代码冗余已经过时，所以HTML页面普遍采用代码简洁Div+CSS的布局，HTML页面大体可分为top、main和bottom，在main中又可以为left和right，这些CSS的名必须是有意义的名字。目前table主要是用来展现数据表，反正在布局中尽量少用table。
-
常用的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
