发表于: 2017-03-19 21:53:17
1 630
今天完成的事情:今天的进度没有原计划的顺利,上午对任务13和任务14的任务要求进行了反复的阅读,接着昨天日记所疑惑的点继续思考和在网上查找诸如“全局依赖样式”“模板样式”“基础样式重置”“组件库”等比较陌生的名词概念。虽然做任务已经到14了,却对这些概念没有一个清晰或者说很熟稔于胸的认知。根据这几个关键词,找了一些博客,后来又在慕课网上看到了一个关于这个的视频,虽然人家讲的不错,期间还了解到css reset.css和normalize.css这两个样式文件。下午则是关注于组件库这个概念,对比了bootstrap框架文档中所写的“全局css样式”和“组件”,虽然自己一直在用他们做任务,但是却没有一个很好的归类和区分,还是一个比较模糊的认识。
明天计划的事情:开始任务14的代码编写。边根据布局的划分拆分相对应的模块,边思考代码的可重复使用性和可维护性,以及如何减少对其他地方的影响。
遇到的问题:
第一点是对任务要求的概念的不清楚认知。查找了一天相关的概念,了解到了基础样式重置是怎么回事,比如body会有一个默认为8px的margin值,使得网页有横向滚动条的出现,无序列表ul的list前始终有一个黑点等,在设计的效果中往往要去掉。一般在html文件中可以引用cssreset.css或者normalize.css,这两个文件在网上比较好找。当然,他们两个是有区别的,cssreset.css把所有标签在浏览器中的渲染样式都去掉了,h1标签的字体会和p标签的字体一样大小,并且没有加粗,原有的margin值也没有了。做的比较绝对,基本上就是将标签在浏览器的所有默认的属性都去掉了,虽然很直接,但是有时候我们并不想都把默认样式去掉呀!比如前边提到的h1标签。normalize.css则相对温和一些,只是把一些影响较大的标签属性重置了,对于一些样式还是做了保留,并且优化了浏览器的渲染,使得同样的样式在不同浏览器下显示的效果是一致的。所以就把normalize.css下载下来准备引用了。
第二点是关于模块的拆分和可重复性的,感觉所谓的模块对比bootstrap框架文档中所写的组件的分类,感觉也都是一个个专有类或者叫特定类的集合。对于html文件而言,只是布局的不同,一般也就是上中下,或者上左中右下等布局,大多也是div来布置,加入不同的类组成一个网页。提到特定类的集合,就想到在html文件中引用的问题,在网上看到有博客说引用太多的css文件对于网页的加载速度会产生影响,但是如果把模块细化的化,分类编写不同的css,为了维护,就要生成多个相应的css文件,引用的自然也就多了,对于此,表示疑惑。还有就是类的命名问题,为了可维护,有要降低同样的类名对不同部位的影响,类名可能就会比较夯长,还要考虑优先级的问题等,感觉是个很复杂的积累经验然后不断调整自己的模板样式的过程,并不是一两个任务就能搞定的事情!
收获:认识了cssreset.css和normalize.css这两个重置css样式的共享文件。对于组件和模板有一点了解,但不清晰,不深刻,尤其是可重复性上来讲,没有直观的感觉。倒是自己做任务11、12时自建的less文件好像类似,里头有左右浮动的类,顶部和底部导航栏固定的类和清除浮动等的类,可以引用到相关的less中,提高写代码的效率。
评论