命名规范
- 以字母开头
- 必须以字母开头命名选择器,这样可以保证所有浏览器都兼容;
- 不允许单个字母的类选择器出现;
- 不允许带有广告等英文的单词,如ad、adv、adver、advertising等,防止该模块被浏览器当成垃圾广告过滤掉;
- 全小写,并用“-”连字符
- 下划线”_”禁止出现在class命名中,统一使用“-”连字符;
- 禁止驼峰式命名;
- 不要出现-数字连接;
常见命名
网页外层重要命名
- 外套 wrap ——————用于最外层
- 头部 header —————用于头部
- 主要内容 main ————用于主体内容(中部)
- 左侧 main-left ————-左侧布局
- 右侧 main-right ———–右侧布局
- 导航条 nav —————–网页菜单导航条
- 内容 content ————–用于网页中部主体
- 底部 footer —————–用于底部
div+css明明参考
- CSS样式命名说明网页公共命名
wrapper页面外围控制整体布局宽度
container / content容器 - 用于最外层
layout布局
head,header页头部分
foot, footer页脚部分
nav主导航
subnav二级导航
menu菜单
submenu子菜单
sideBar侧栏
sidebar-left, sidebar-right左边栏或右边栏
main页面主体
tag标签
msg / message提示信息
tips小技巧
vote投票
friendlink友情连接
title标题; - 内容
summary摘要
loginbar登录条
search-input搜索输入框
hot热门热点
search搜索
search-output搜索输出和搜索结果相似
searchBar搜索条
search-results搜索结果
copyright版权信息 - 元素
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打印
- CSS样式命名说明网页公共命名