规范
1、对于非通用样式,在样式比较简单的前提下,尽量使用面向属性的命名方式,如多使用pb20、ml20这种写法。
2、对于通用样式,尽量不要使用分离方式。因为不便修改。
3、三无原则:
- 无ID,如#test,ID一般与业务有关
- 无层级,如.test span,这种写法一是重用性低,二是会影响渲染效率
- 无标签,ul.test同上。
CSS样式命名
网页公共命名
-
wrapper 页面外围控制整体布局宽度
-
container或#content 容器,用于最外层
-
layout 布局
-
head, #header 页头部分
-
foot, #footer 页脚部分
-
nav 主导航
-
subnav 二级导航
-
menu 菜单
-
submenu 子菜单
-
sideBar 侧栏
-
sidebar_a, #sidebar_b 左边栏或右边栏
-
main 页面主体
-
tag 标签
-
msg #message 提示信息
-
tips 小技巧
-
vote 投票
-
friendlink 友情连接
-
title 标题
-
summary 摘要
-
loginbar 登录条
-
searchInput 搜索输入框
-
hot 热门热点
-
search 搜索
-
search_output 搜索输出和搜索结果相似
-
searchBar 搜索条
-
search_results 搜索结果
-
copyright 版权信息
-
branding 商标
-
logo 网站LOGO标志
-
siteinfo 网站信息
-
siteinfoLegal 法律声明
-
siteinfoCredits 信誉
-
joinus 加入我们
-
partner 合作伙伴
-
service 服务
-
regsiter 注册
- arr/arrow 箭头
-
guild 指南
-
sitemap 网站地图
-
list 列表
-
homepage 首页
-
subpage 二级页面子页面
-
tool, #toolbar 工具条
-
drop 下拉
-
dorpmenu 下拉菜单
-
status 状态
-
scroll 滚动
- .tab 标签页
- .left .right .center 居左、中、右
- .news 新闻
- .download 下载
- .banner 广告条(顶部广告条)
电子贸易相关
- .products 产品
- .products_prices 产品价格
- .products_description 产品描述
- .products_review 产品评论
- .editor_review 编辑评论
- .news_release 最新产品
- .publisher 生产商
- .screenshot 缩略图
- .faqs 常见问题
- .keyword 关键词
- .blog 博客
- .forum 论坛
CSS文件命名 说明
- master.css,style.css 主要的
- module.css 模块
- base.css 基本共用
- layout.css 布局,版面
- themes.css 主题
- columns.css 专栏
- font.css 文字、字体
- forms.css 表单
- mend.css 补丁
- print.css 打印