常用前端CSS命名规范随手记整理
导读：我们一般在做前端设计网站框架的时候，DIV或者CSS标签名称有没有一个固定的标准？有些朋友是想到哪里写到哪里，有些朋友有自己的规范命名特征，也有些朋友是遵循标准的。因为在团队协作的时候，有规范的标准是很重要的，便于协作和阅读。今天老蒋突然想...
我们一般在做前端设计网站框架的时候，DIV或者CSS标签名称有没有一个固定的标准？有些朋友是想到哪里写到哪里，有些朋友有自己的规范命名特征，也有些朋友是遵循标准的。因为在团队协作的时候，有规范的标准是很重要的，便于协作和阅读。今天老蒋突然想到这个问题，主要在于在修改页面的时候，看到有客户的CSS标签名称太过于随意。
所以，包括自己和其他同事朋友协作的时候一定要规范，好歹看着也像专业一些的。这里收集和整理一些规范的CSS命名规范标准，记录下来。
第一、常用的命名
page、wrap、layout、header、footer、content、menu、nav、main、submain、sidebar、logo、banner、title、tips、main-left、main-right。
第二、公共部位命名
| #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 | 广告条(顶部广告条) |
第三、CSS名称命名
| CSS文件命名 | 说明 |
|---|---|
| master.css,style.css | 主要的 |
| module.css | 模块 |
| base.css | 基本共用 |
| layout.css | 布局，版面 |
| themes.css | 主题 |
| columns.css | 专栏 |
| font.css | 文字、字体 |
| forms.css | 表单 |
| mend.css | 补丁 |
| print.css | 打印 |
部分内容参考来自：http://www.divcss5.com/jiqiao/j4.shtml
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 常用前端CSS命名规范随手记整理
本文地址： https://pptw.com/jishu/666652.html