web标准与前端开发 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第5天

web标准与前端开发

一、什么是web前端开发标准

Web前端作为开发团队中不可或缺的一部分，需要按照相关规定进行合理编写（一部分不良习惯可能给自己和他人造成不必要的麻烦）。不同公司不同团队具有不同的规范和文档。

　　其实web前端是一个新词汇，刚开始的时候只有美工和程序，后来随着web的发展，对用户交互的需求越来越高，就衍生出了ui（用户交互页面）这除了视觉效果还要有交互体验，就需要js去实现，毕竟一个人的精力是有限的，这么多的工作不可能由一个人去实现，于是出图就成了前端美工，切图出html css就成了前端切图，js就成了前端交互。一般情况下出图和html页面是一个人完成，而js效果由程序员去写，因为毕竟都是程序脚本，程序员学起来相对容易一些。

　　前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

二、HTML规范：

文档类型声明统一为html5的文档声明;编码方式统一为utf-8。书写时根据页面结构，利用IDE实现层次分明的缩进;所有代码需要遵循HTML标准，建议书写标签名、属性名时使用小写字母;属性值必须用双引号包围;并考虑向后扩展性。 使用语义化标签，便于开发者阅读和写出更优雅的代码，便于浏览器、搜索引擎解析，便于团队开发和维护，有利于SEO.如：标题用h1-h6,段落用p标签。特殊符号尽可能使用代码来替代。 

　　HTML中图片的使用：

1 ）img标签中添加alt=”替换文本”，以便图片丢失时，用户可以根据替换文本了解页面内容

2）运用css sprites技术，集中小的背景图或图标， 减小页面http请求，sprite按模块制作，方便后期修改或多人协作开发

三、CSS规范

　　统一编码规则为utf-8.

　　书写代码前需要做如下考虑：

　　1）确定版心，如果超过1200需要与设计师沟通确认;

　　2）规划样式，提高样式的重复使用率;

　　3）样式重置;

　　4）提前沟通页面中模棱两可的需求和交互，方便后续布局;

　　5）布局时考虑后续交互效果处理的便利性，必要时预留出后续交互中会用到的样式。

　　书写代码时，添加注释，保持代码缩进格式;当属性值为0时，可以省略后面的单位;建议每个语句结束后添加分号;注意兼容问题。 

　　选择器命名要遵循命名规范：

　　1） 由字母开头，小写英文、数字和 _ 来组合命名 或者 首字母大写，驼峰式命名

　　2） 命名要语义化，简明化。尽量做到见名知意

　　css属性书写顺序。建议遵循： 布局定位属性–>自身属性–>文本属性–>其他属性。 也可根据自身习惯书写， 但尽量保证同类属性写在一起

　　1） 布局定位属性：display 、float、position以及相应的 top、right、bottom、left属性等

　　2） 自身属性：width、height、background、padding、border、margin等

　　3） 文本属性：color、font、text-decoration、text-align、vertical-align等

四、JavaScript规范：

　　文件编码统一为UTF-8.

　　书写过程中每行代码结束需要添加分号;变量名命名，需要符合命名规范，建议使用驼峰式命名方式;书写时需要在文件中添加适当注释。

　　所有功能均根据项目实际需求原生开发，避免冗余;如果需要引入第三方库，需要与团队其他开发人员沟通，讨论决定。后期优化过程中，非注释类中文字符必须转换成Unicode编码使用，避免出现乱码。

五、注意事项：

　　页面中的文本内容。一般能用文字的都用文字保证静态页面的可编辑性，专题中的特殊字体一般要切图，但具体情况与需求沟通。

　　PC端页面需要兼容到IE8以下时，布局中如果用到HTML5标签，注意处理兼容或避免使用。

　　页面布局时能用正常文档流布局的不使用定位布局;尽可能不使用表格布局，但页面设计中以表格形式展示的内容模块也要尽量使用表格布局。