千锋扣丁学堂小白学习web前端开发代码命名规范大全​

2019-05-22 13:35:08 1871浏览

今天千锋扣丁学堂HTML5培训老师给大家分享一篇关于小白学习web前端开发应如何进行代码命名呢？首先在编程中起名字其实也是一门学问，特别是在我们的代码命名方面，有些同学经常问我，到底该如何给我的方法命名啊，我建一个新的代码该叫什么啊？这都是小白的一大难题，那么我们今天就说一下如果来给代码命名，命名规则到底是什么？

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

左右中：leftrightcenter

(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;}

.bottom{float:bottom;}

(4)标题栏样式,使用’类别+功能’的方式命名,如

.barnews{}

.barproduct{}

注意事项:

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

主要的master.css模块module.css基本共用base.css

布局，版面layout.css主题themes.css专栏columns.css

文字font.css表单forms.css补丁mend.css打印print.css

统计count.css

以上结构就可以组合使用，例如：左列标题lefttitle；底部导航footernav规范不是说要所有人照一个样子来命名css，我们可以根据自己的需要定制命名规则，只要记住命名的规则，就可以根据网站本身的特点来创造具有自己风格的命名方式。

一、目前网页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于一组用于定义字体样式的class，我们可以使用f即foot的头字母为前缀进行命名，如：

f-blue:表示蓝色字体样式

f-blod:表示粗体字体样式

对于网页中如新闻频道的一些新闻的现实样式，可以用n作为前缀进行样式设计，如：

n-title:新闻标题

n-list:新闻列表

CSS文件及样式命名

1、CSS文件命名规范

全局样式：global.css；

框架布局：layout.css；

字体样式：font.css；

链接样式：link.css；

打印样式：print.css；

2、CSS样式命名规范

本人建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：

头部样式用header，头部左边，可以用header_left或header_l,还有如果是列结构的可以这样——box_1of3(三列中的第一列)，box_2of3(三列中的第二列)、box_3of3(三列中的第三列)，其它的我就不一一举例了，大家按以上规律去命名就好。

以上就是关于千锋扣丁学堂小白学习web前端开发代码命名规范大全的全部内容，想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。

                            

     【关注微信公众号获取更多学习资料】        【扫码进入HTML5前端开发VIP免费公开课】  

查看更多关于“HTML5开发技术资讯”的相关文章>>