一 书写顺序
- 位置属性(position , top . right , z-index , display , float等)
- 大小(width , height , padding , margin)
- 文字系列(font , line-height , letter-spacing , color-text-align等)
- 背景(background , border 等)
-
其他(animation , transition等)
书写顺序
二 使用缩写属性
- 比如: padding margin background 等
-
去掉小数点前的"0"
去掉小数点前的"0" -
简写命名 一定要让别人看明白
名称不规范
三 css选择器命名规范
- 长名称或者词组可是使用中横线来为选择器命名
- 不建议使用"_" 下划线来命名css选择器,为什么呢?
- 输入的时候少按一个shift 键;
- 浏览器兼容问题(比如是用哪个_tips的选择器命名,在IE6是无效的,但是现在大部分都不兼容IE6了)
- 能良好的区分js变量命名(js变量命名是用"_")
- 不要随意使用id id在js是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外,id的优先级大于class.所以id应该按需使用,不能滥用.
-
为选择器添加状态前缀(可不用)
有时候可给选择器添加一个表示状态的前缀,让语义更明了,比如:
添加了is前缀
四 常用的css命名规则
| 名称 | 命名 |
|---|---|
| 头 | header |
| 内容 | content/container |
| 尾 | footer |
| 导航 | nav |
| 侧栏 | slidebar |
| 栏目 | column |
| 页面外围控制整体布局宽度 | wrapper |
| 左中右 | left center right |
| 登录条 | 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 |
五 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 |
注意事项
- 一律小写
- 尽量用英文
- 不加中杠和下划线
- 尽量不缩写,除非一看就明白的单词
六 css样式表文件名
| 文件作用 | 起名规则 |
|---|---|
| 主要的 | master.css |
| 模块 | module.css |
| 基本共用 | base.css |
| 布局、版面 | layout.css |
| 主题 | themes.css |
| 专栏 | columns.css |
| 文字 | font.css |
| 表单 | forms.css |
| 补丁 | mend.css |
| 打印 | print.css |
面向属性命名-张鑫旭
这个面向属性命名,也是容纳了很多的属性,大部分都存在其中,样式的复用性很高,将很多的样式都分离出去了.
