缩进
对于所有编程语言,我们要求缩进必须是软tab(用空格字符)。在你的文本编辑器里敲 Tab 应该等于 4个空格 。
可读性 vs 压缩
对于维护现有文件,我们认为可读性比节省文件大小更重要。大量空白和适当的ASCII艺术都是受鼓励的。任何开发者都不必故意去压缩HTML或CSS,也不必把Javascript代码最小化得面目全非。
我们会在服务器端或build过程中自动最小化并gzip压缩所有的静态客户端文件,例如CSS和JS
HTML,CSS,JS代码分离
html代码尽量保持整洁,采用最简单的代码层级完成复杂的布局要求,方便以后的维护和扩展
css代码本身都是全局的,所有应当采用css模块化思想,约束css的规则,尽量减少对全局的污染
JS代码分为功能代码和业务代码,功能代码尽量抽取成功能组件,方便团队内其他同事的使用
命名规范
文件及文件夹: 全部英文小写字母+数字或连接符"- , _ ",不可出现其他字符 如:jquery.1.x.x.js
文件:调用 /libs 文件需包含版本号,压缩文件需包含min关键词,其他插件则可不包含 如:/libs/modernizr-1.7.min.js
ID: 小駝峰式命名法 如:firstName topBoxList footerCopyright
Class: [减号连接符] 如:top-item main-box box-list-item-1
尽量使用语义明确的单词命名,避免 left bottom 等方位性的单独的词语命名样式
在属性上,使用双引号,不要使用单引号。
不要在自动闭合标签结尾处使用斜线 - HTML5 规范 指出他们是可选的。
不要忽略可选的关闭标签(例如, 和 )。
尽量用class来渲染样式,避免用id来写样式
1 2 |
|
1 |
|
1 2 |
|
1 2 3 |
|
1 2 |
|
1 |
|
1 2 |
|
1 2 |
|
在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问,避免404,必须遵循以下两种方法之一:
1 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
1 2 3 |
|
1 2 3 4 5 6 |
|
1 2 3 |
|
1 2 3 4 5 6 7 |
|
1 2 |
|
1 2 |
|
1 2 3 4 5 6 7 8 9 |
|
1 2 3 |
|
1 2 3 4 5 6 7 8 9 |
|
PS: 1. 现在纯手写css比较少了,一般 都是用sass 和 less 来管理样式。<br> 2 书写sass 和 less 一行简直就是灾难 3 css 多行书写,还有个好处,可以要求团队,css 输出按照盒子模型的顺序去书写,更好维护,不强制但是倡导输出是一致的。
PS:前端团队很少有科班出身的,位运算符效率不见得会有太高的性能,优势非常不明显,出发是高强度的算法需要,否则还是不要有位运算;它会造成代码的苦涩难懂,不利于后续的维护
1 2 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
1 2 3 4 5 6 7 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
1 2 3 4 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
1 2 3 4 5 6 7 8 9 10 |
|
1 2 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
1 2 |
|
PS:手机端不适用GIF图的原因是:1.可以用css3动画来代替,css3动画只出发页面复合,性能更好,2 gif动画都在手机端显示不流畅,不能使用GPU加速,会造成页面重排,严重影响页面性能