前端命名的一点建议

1.前言

之前由于都是独立开发所以对前端命名不是很看重，命名过于随意，导致后期同事维护满脸怨言，不是不想好好命名无奈英语实在很差，多数中英文混搭命名，现整理一些常见命名的字段贴桌面供参考。

（一）常见单词词汇

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：leftright center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

(二)css注释的写法:

/内容区/

Html注释的写法：<!--header头部-- >

(三)id的命名:

(1)页面结构

容器:container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：leftright center

(2)导航

导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsideba
菜单：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; }

常见class关键词：

布局类：header, footer, container, main, content, aside, page, section
包裹类：wrap, inner
区块类：region, block, box
结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表类：list, item, field
主次类：primary, secondary, sub, minor
大小类：s, m, l, xl, large, small
状态类：active, current, checked, hover, fail, success, warn, error, on, off
导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
星级类：rate, star
分割类：group, seperate, divider
等分类：full, half, third, quarter
表格类：table, tr, td, cell, row
图片类：img, thumbnail, original, album, gallery
语言类：cn, en
论坛类：forum, bbs, topic, post
方向类：up, down, left, right
其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

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

.barnews { }
.barproduct { }
主要的 master.css
模块module.css
基本共用base.css
布局，版面layout.css
主题themes.css
专栏columns.css
文字font.css
表单forms.css

目录结构和文件命名规则

scss文件最好根据不同页面分为common.scss和当前页面的scss文件，并将相同复用部分放入common.scss中

通用规范

命名以小写英文单词命名，多个单词命名时以下划线分隔，尽量不用缩写（除非是约定俗成或通用的缩写）

项目命名

全部采用小写方式，以下划线分隔。例：my_project_name

CSS, SCSS文件命名

参照项目命名规则。例：retina_sprites.scss

HTML文件命名

参照项目命名规则。例：error_report.html

二，js命名规范

变量命名

命名方法：小驼峰式命名

命名规范：前缀应当是名词。(函数的名字前缀为动词，以此区分变量和函数)

命名建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。

示例

// 好的命名方式 var minCount = 10;var tableTitle = 'tableTitle';
// 不好的命名方式 var setCount = 'setCount';var getTitle = 1111;

函数命名

命名方法：小驼峰式命名法

命名规范：前缀应当为动词

命名建议：可使用常见动词+函数所要表达含义的的名词组成（这个需要英语好，英语不好的同学用百度翻译吧）

js常量命名

命名方法：名称全部大写

命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词

示例

var MIN_COUNT = 10;var URL = 'http://www.baidu.com';

三，常见文件夹命名

src，source 源代码，用src居多
test，tests 测试文件，也经常用__test__，facebook的测试框架jest默认的测试文件目录就是__test__
docs 文档
lib 库文件，library的缩写
dist 用来放打包编译后的文件，应该是distribution的缩写
build 构建脚本
utils，tools，helpers 工具代码
controllers，views，middlewares，models MVC对应的models，views，controllers，还有中间件middlewares
router 路由
server 用来放服务端代码
adapters 适配器，适配器模式是一种很常用的设计模式
legacy 一般用来放兼容历史版本或兼容旧浏览器的代码
config 配置文件
benchmarks benchmarks 测试，又叫基准测试或性能测试。用来测试版本的性能变化
unit，spec 单元测试，一般在test目录下
e2e 端对端测试，一般在test目录下
assets，vendor 资源，一般用来放图片或css文件
static 静态资源
examples，demo 示例
component 组件
plugins插件
bin 命令脚本，命令行工具经常会用到
common 公用的文件
packages 很多项目会打包出多个npm包，用来减小体积，一般会用packages来放不同的包
misc 杂项，miscellaneous的缩写
core 核心文件

四， CODELF

最后推荐一个命名变量的神奇网站 CODELF 这个网站可以根据你输入的关键词，给出很多变量命名的推荐。并且支持中文。 CODELF