发表于： 2018-05-16 22:14:44
2 518
今天完成的事情：
重构护工列表页面，上传代码，提交任务
明天计划的事情：
开始任务13
遇到的问题：
昨天为了体验less中mixin的判断，对于header、footer的fixed设置部分做成mixin复用没有成功。这两部分只有top、bottom的差别，把它俩做成变量选择，但是变量只能进行数值赋值。
今天反复看教程之后发现可以做到，只有把top、bottom当作关键字就可以。
less
编译后
收获：
重构页面过程中发现页面还可以有更好的方式实现，自己之前没有使用规范来要求自己，导致代码不规范，比如样式先后顺序，之前想到哪写到哪，非常凌乱，现在来看对于元素的样式不清晰。
less使用还没有太多的心得，但是可以参照bootstrap3的less 文件，同时学习bootstrap的功能实现。
任务12
开始时间：5.14
预计结束时间：5.17
http://task.jnshu.com/zentao/project-task-629.html
深度思考：
1.开发过程中应该遵守哪些编码规范和class命名规范？
基本准则
符合web标准，语义化html，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。
html规范
1、页面的第一行添加标准模式声明<!DOCTYPE html>
2、代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格大小）
3、html中除了开头的DOC或者head里特殊情况可以大写外，其他都为小写，css类都为小写
4、建议为html根元素指定lang属性，从而为文档设置正确的语言lang="zh-CN"
5、不同doctype在不同浏览器下会触发不同的渲染模式
< meta http-equiv="X-UA-Compatible" content="IE=Edge">
6、非特殊情况下样式文件必须外链至< head >...< /head>之间;非特殊情况下JavaScript文件必须外链至页面底部
7、尽可能减少div嵌套
8、在页面中尽量避免使用style属性,即style="…";写在相应的样式文件中
9、对于属性的定义，确保全部使用双引号，绝不要使用单引号
10、背景图片请尽可能使用sprite技术,减小http请求
11、给区块代码及重要功能(比如循环)加上注释,方便后台添加功能
12、不要使用@import,与<link>标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。
CSS规范
排版规范
1、如果是在html中写内联的css，则必须写成单行
2、每一条规则的大括号{前后加空格
3、属性名冒号之前不加空格，冒号之后加空格
4、每一个属性值后必须添加分号，并且分号后加空格
5、多个selector共用一个样式集，则多个selector必须写成多行形式
class命名
1、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_
2、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
3、不允许通过1、2、3等序号进行命名；避免class与id重名
4、class用于标识某一个类型的对象，命名必须言简意赅
5、尽可能提高代码模块的复用，样式尽量用组合的方式
6、规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。
相关的属性声明应该以下面的顺序分组处理：
1、Positioning位置属性（position, top, right, z-index, display, float等）
2、Box model盒模型 （width,height,padding,margin）
3、Typographic排版（font,line-height,letter-spacing,color,text-align等）
4、Visual外观（background,border等）
Positioning处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。 其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。
2.那种规范才是最好的规范？
规范的目的在于提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档。
前端有很多代码规范，国外和国内的一些公司都发布了自己的前端规范，对于代码风格、性能规范和实践都做出了相应的规定。一些代码风格也逐渐固定下来，比如带括号形成代码块分割，缩进提高代码的组织层次清晰度。
还有个人偏好。
返回列表
评论