扣丁学堂HTML5培训带你了解小白如何进行代码命名

起名字其实也是一门学问，特别是在我们的代码命名方面，有些同学经常问我，到底该如何给我的方法命名啊，我建一个新的代码该叫什么啊？这都是小白的一大难题，那么扣丁学堂HTML5培训小编今天就说一下如果来给代码命名，命名规则到底是什么？

1. Container

“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为:“wrapper“, “wrap“, “page“.

2. Header

“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).

3. Navbar

“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.

4. Menu

“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.

5. Main

“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。

6. Sidebar

“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.

7. Footer

“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.

需要注意的几点

1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.

如:red/left/big等。

2.组合命名规则:

[元素类型]-[元素作用/内容]

如:搜索按钮: btn-search

登录表单:form-login

新闻列表:list-news

3.涉及到交互行为的元素命名:

凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:

鼠标悬停:：hover 点击：click 已浏览：visited

如:搜索按钮: btn-search、btn-search-hover、btn-search-visited

Photoshop图层结构规范

Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。

常用命名汇总

站头部: head/header(头部) top（顶部）

导航：nav 导航具体区分：topnav(顶部导航)、mainnav(主导航)、mininav(迷你导航)、textnav(导航文本)、subnav(子导航/二级导航)

旗帜、广告和商标：logo（旗帜）、brand(商标)、banner(标语)

搜索：sreach(搜索)、sreachbox(搜索框)、sreachbtn(搜索按钮)、sreachinput（搜索输入框）

注册和登录：login(登录)、regsiter(注册)、userbox(用户名/通行证的文本框)、password(密码)

布局、分栏和框：layout(布局)、bigdiv(大div)、leftdiv(左分栏)、rightdiv(右分栏)、leftfloat(左浮动)、rightfloat(右浮动)、mainbox()、subpage(子页面/二级页面)

页脚/底部：foot/footer(页脚/底部)、copyright(版权信息)、sitemap(网站地图)

其他：content(内容)、skin(皮肤)、title(标题)、from(表单)、pic(图片)、news(新闻)、shop(购物区)、list(列表/清单)、newslist(新闻列表)、 downloadlist(下载列表)、piclist(图片列表)、dropmenv(下拉菜单)、cor/corner(圆角)、homepage(首页)、crumb(当前位置导航)

分类命名

id的命名:

(1)页面结构

容器: container 页头：header 内容：content/container

页面主体：main 页尾：footer 导航：nav

侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper

左右中：left right center

(2)导航

导航：nav 主导航：mainbav 子导航：subnav

顶导航：topnav 边导航：sidebar 左导航：leftsidebar

右导航：rightsidebar 菜单：menu 子菜单：submenu

标题: title 摘要: summary

(3)功能

标志：logo 广告：banner 登陆：login 登录条：loginbar

注册：regsiter 搜索：search 功能区：shop

标题：title 加入：joinus 状态：status 按钮：btn

滚动：scroll 标签页：tab 文章列表：list 提示信息：msg

当前的: current 小技巧：tips 图标: icon 注释：note

指南：guild　服务：service 热点：hot 新闻：news

下载：download 投票：vote 合作伙伴：partner

友情链接：link 版权：copyright

class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字体大小,直接使用’font+字体大小’作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。

H5基础课程：https://ke.qq.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】

注：点击(了解更多)进入课程直播间