发表于： 2018-06-09 19:41:57
2 507
今天完成的事情：
1、完成了任务12.
2、参与小课堂，复习了长度、大小单位，网页的响应式布局和自适应布局。
3、总结任务12的深度思考问题。
明天计划的事情：
1、完成任务13 的禅道拆解。
2、开始任务13
3、学习css样式分离，如何对网站css进行架构，css重置样式
遇到的问题：
对于自适应和响应式两个概念一直有混淆，今日小课堂和课后看了些资料总算是进一步清楚一些
收获：
一、自适应布局和响应式布局
自适应布局：同一网页在不同设备上自动适应不同大小的屏幕，自动调节网页内容大小，但是不同浏览器上显示的内容和样式差别不大。
响应式布局：同一网页为不同设备浏览器配置不同版本样式，显示内容和布局可能差别很大。响应式的概念是覆盖了自适应，但是包括的东西更多.
推荐：响应式布局，尤其是是在有了bootstrap之后响应式布局变得更加方便和美观。
二、开发过程中应该遵守哪些编码规范和class命名规范？
html规范
1、页面的第一行添加标准模式声明<!DOCTYPE html>
2、代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格大小）
3、html中除了开头的DOC和'UTF-8'或者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必须写成多行形式
6、能使用符合属性的地方尽量使用复合属性
7、小数点，16进制颜色代码，长名称或词组等尽量用到缩写简写方法，但是命名类，方法，变量慎用简写。
8、不要随意使用Id——id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
9、“CSS的渲染方式是“从右往左”渲染的，就拿#test ul{}举例，先渲染页面上所有的ul标签，再去寻找id为test的元素。只要出现了层级，出现了标签，就是一次额外的渲染，层级越多，渲染的开销也就越大，这就是为什么一些前辈的文章会建议要尽量避免过深的层级。
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等）
三、哪种规范才是最好的规范？
好的规范基本准则：
1、符合web标准，语义化html，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。
2、同一项目的团队最好使用同一套规范
3、表现，内容和行为分离
4、标记应该结构良好，语义正确，普遍合法
5、Javascript应该起到渐进式增强用户体验的作用
返回列表
评论