当前位置: 首页 > 前端笔记 > CSS > CSS命名中英文对照表
2014年18六月

CSS命名中英文对照表

当多人做前端开发的时候,肯定要做一些规则上的限制,方便阅读代码。这里整理了一下常用的一些使用规则,做一下中英文对照表,应该用点用的。

页面结构类
中文 英文 中文 英文 中文 英文
容器 container 页头 header 内容 content/container
页面主体 main 页尾 footer 导航 nav
侧栏 sidebar 栏目 column 整体布局宽度 wrapper
导航类
中文 英文 中文 英文 中文 英文
导航 nav 主导航 mainnav 子导航 subnav
顶导航 topnav 边导航 sidebar 左导航 leftsidebar
右导航 rightsidebar 位置导航 crumb 菜单 menu
子菜单 submenu 面包屑 breadcrumb    
网页内容类
中文 英文 中文 英文 中文 英文
标题 title 摘要 summary 箭头 arrow
商标 label 网站标志 logo 转角/圆角 corner
横幅广告 banner 栏目 column 子菜单 submenu
搜索 search 搜索框 searchbox 登录 login
工具条 toolbar 下拉 drop 标签页 tab
当前的 current 列表 list 滚动 scroll
服务 service 提示信息 msg 新闻 news
小技巧 tips 下载 download 栏目标题 title
服务 service 提示信息 msg 新闻 news
热点 hot 加入 joinus 注册 regsiter
指南 guide 友情链接 friendlink 状态 status
版权 copyright 按钮 btn 合作伙伴 partner
投票 vote 加入 joinus 注册 regsiter
登录条 loginbar 更多 more    
CSS文件命名
中文 英文 中文 英文 中文 英文
主要的 master.css 模块 module.css 基本共用 base.css
布局,版面 layout.css 主题 theme.css 表单 form.css
文字 font.css 补丁 mend.css 打印 print.css

1.一律小写;
2.尽量用英文;
3.分割要用中杠,尽量不要用下划线;
4.尽量不缩写,除非一看就明白的单词;
5.颜色要使用颜色的名称或者是16进制代码,如:.red{color:red;},.f60{color:#f60;},.ff8600{color:#ff8600;};
6.字体大小用font+字体大小的方式命名,如:.font12px{font-size:12px;},.font9pt{font-size:9pt;};
7.尽量写注释,如:/*header start*/ 头部代码 /*header end*/。

文章信息

  • 发布日期:2014年06月18日 11:52:42
  • 固定地址:http://www.estorm.cn/notes/css/2014-06-18/css-naming-rule.html