代码规范整理

ゝ一纸荒年。 2022-05-29 01:39 132阅读 0赞

> 58到家、快狗打车（58速运）、58家政收简历啦~  
> 最近想换工作的同学~ 欢迎拿简历砸我~ 加我微信：15501423004 （记得备注 内推 哈~）

# 代码规范 #

希望自己的代码是清晰、可读的。因此给自己指定一定的规范，根据自己实践结果不断改进。  
内容中有摘自网络的部分，在文章附录中附有链接，如果侵权联系删除。

--------------------

# 命名规则 #

## 项目、js、css、HTML文件命名 ##

全部采用小写方式， 以下划线分隔。  
例：my\_project\_name、data\_models、account\_model.js、retina\_sprites.scss、error\_report.html

## Class命名 ##

**常见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…

--------------------

# Css书写顺序 #

*  位置属性(position, top, right, z-index,display, float等)
 *  大小(width, height, padding, margin)
 *  文字系列(font, line-height, letter-spacing,color- text-align等)
 *  背景(background, border等)
 *  其他(animation, transition等)

--------------------

# HTML标签属性顺序 #

属性应该按照特定的顺序出现以保证易读性；

*  class
 *  id
 *  name
 *  data-\*
 *  src, for, type, href, value , max-length, max, min, pattern
 *  placeholder, title, alt
 *  aria-\*, role
 *  required, readonly, disabled

class是为高可复用组件设计的，所以应处在第一位；  
id更加具体且应该尽量少使用，所以将它放在第二位。

--------------------

# 附录 #

1.  [https://www.zhihu.com/question/19586885][https_www.zhihu.com_question_19586885]
2.  [http://alloyteam.github.io/CodeGuide/][http_alloyteam.github.io_CodeGuide]
3.  [https://www.cnblogs.com/allenc/p/5178119.html][https_www.cnblogs.com_allenc_p_5178119.html]

[https_www.zhihu.com_question_19586885]: https://www.zhihu.com/question/19586885
[http_alloyteam.github.io_CodeGuide]: http://alloyteam.github.io/CodeGuide/
[https_www.cnblogs.com_allenc_p_5178119.html]: https://www.cnblogs.com/allenc/p/5178119.html