发表于: 2017-04-15 21:34:03
1 550
今天完成的事情:
1.在不用框架的情况下自适应有2种方法,flex布局和栅格系统般的媒体查询。但根据任务要求,我选择写一个响应式栅格系统的Layout.css。
2.拆出头部,脚部模块,导航栏模块,职业推荐页面的Module模块,轮播图只能用css做了。可扩展和模块化的CSS构架是必经之路。
3.学习了小课堂如何改变radio和selet的样式。
4.看了各种关于css模块化开发的文章。
明天计划的事情:
完成任务15.
问题:
要解决sass安装问题,cmd老是报错。。。
收获:
模块化的CSS构架基本分为5种类型:Base,Layout,Module,State,Theme。
- Base: 基础样式表,定义了基本的样式,我们平时写CSS比如reset.css就是属于基础样式表,另外我认为清除浮动,一些动画也可以归类为基础样式。
- Layout: 布局样式,用于实现网页的基本布局,搭起整个网页的基本骨架。
- Module: 网页中不同的区域有这个不同的功能,这些功能是相对独立的,我们可以称其为模块。模块是独立的,可重用的组件,它们不依赖于布局组件,可以安全的删除修改而不影响其他模块。
- State: 状态样式,通常和js一起配合使用,表示某个组件或功能不同的状态,比如菜单选中状态,按钮不可用状态等。
- Theme: 主题皮肤,对于可更换皮肤的站点来说,这个是很有必要的,分离了结构和皮肤,根据不同的皮肤应用不同的样式文件。
命名的重要性:
- 使用独一无二的规则
- 使用简短的命名
- 嵌套层级不宜过深,建议控制在3层以内
关于HTML的排版规范:现在基本上已经养成习惯了。文档流,盒子模型,排版,装饰,生成内容。
网页重构,处理好基础的框架/库、页面响应式布局、模块组件、标签语义、属性命名,页面结构必能合理,性能必能得到提升,各种优点和好处,都是前期统筹和规范操作带来的,让优良之处成为一种习惯,而不是刻意为之。
评论