发表于： 2019-08-09 19:22:02
1 890
今天完成的事情：
于今天开始了CSS任务的重构，在完成任务十一中遇到最大的问题就是代码规范。
不管是类名还是代码写法，必须严格按照要求了，既然要规范那就要熟悉基础代码所代表的所有含义，这样就能更加合适的为你的DIV添加一个不会让人混淆的类名。
可以用英文来代表这个DIV的内容来进行命名，我暂时就是这么做的。
明天计划的事情：
完成任务十二的重构。争取早日完成CSS任务开启JS任务。
遇到的困难：
在任务重构中，除了代码规范外，就是完全按照UI图来进行操作了。
在代码规范中，有着一套原子类命名规则，他的意思就讲复用性高的单条属性直接命名成类。
而要求代码规范的意义有如下：
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.
html书写规范：
. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset="gbk" />, 书写时利用IDE实现层次分明的缩进;
. 非特殊情况下样式文件必须外链至<head>...</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;
所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括 br (<br />), hr(<hr />)等; 属性值必须用双引号包括;
充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以"data-"为前缀来添加自定义属性，避免使用"data:"等其他命名方式;
语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;
. 尽可能减少div嵌套, 如<div class="box"><div class="welcome">欢迎访问XXX, 您的用户名是<div class="name">用户名</div></div></div>完全可以用以下代码替代: <div class="box"><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;
书写链接地址时, 必须避免重定向，例如：href="http://itaolun.com/", 即须在URL地址后面加上“/”；
在页面中尽量避免使用style属性,即style="…";. 必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input type="text" id="name" name="name" /></p>须写成:<p><label for="name">姓名: </label><input type="text" id="name" /></p>.
能以背景形式呈现的图片, 尽量写入css样式中; 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性
减少使用影响性能的属性, 比如position:absolute || float ;
必须为大区块样式添加注释, 小区块适量注释;
代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;
其中对我们有着比较大帮助的就是尽可能的减少DIV嵌套，和大区添加注释，这样不仅可以帮助我们更好的去修改和优化自己的代码，到时候也能让别人可以更好的读懂你的代码。
而按照UI图来进行前端代码开发是一个比较严谨的事情，也许有可能就是一个PX的关系在页面缩放中也有着出现BUG的可能，所以这是一个比较严谨的东西，在PS里面打开UI图是可以用小尺子来进行衡量，按照手机端砍一半的原则，来开发代码，在页面端的时候，直接打开F12之后可以用到截图之类的东西来量尺寸，保证不出现任何一个PX的差距，这样完全按照UI图来进行前端页面开发。
收获;
在重构任务中，对基础代码有了更深的了解，在代码规范的要求下，明白了代码规范的重要性。
返回列表
评论