我在写CSS的时候经常会碰到些麻烦事儿:
1)看上去蛮简单的排版却写了很久
2)代码写的越来越散,总是这里补一句,那里补一句,没有条理性
3)margin、padding、font-size等属性在不停的重写
效率提不上去,工期又赶,最后只能加班加点做。
后面仔细想想,其实自己可以做的更有计划性,更有条不紊的推进。
一、全局观
我们这边开发是按流程来进行的,UI设计没给出,是坚决不开工的。
在UI设计给出后,最多只是做些无伤大雅的微调,这样的话,其实在给出所有UI设计稿后,可以做个大概的评估。
将通用的组件、样式难点、各个动画、布局细节,了然于心,这样在开发的时候,胸有成竹。
先来看看这次设计稿的总览:
在看完所有页面后,可以开始打草稿,做抽象了。
接下来的CSS开发我都会使用Sass来编写,用Sass能更好的做模块化开发。
二、通用组件
1)loading效果
基本上每次做页面,都会有这么一个效果,所以预先准备几个这样的效果,会很有用处,将所有的相关代码写到一个文件中封装起来。
而且设计很多时候不会考虑loading这种细节效果,最终都是自己来添加的,设计也会很欢迎你帮他分担些工作。
我在很早以前自己写了一套简易的UI库,在工作中发挥了巨大的作用。
2)弹出框
这个也基本可以说每次都会用到,所以封装一个自己的弹出框很有必要。
产品、设计也经常会忽略这个效果,经常会撂下一句话“通用的就可以”,事先准备好的话,对你对我都有帮助。
这个功能不仅仅是CSS,还得需要JavaScript的支持。
我用最简单的200行代码封装了弹出框,遵循开放封闭原则,并可自行扩展。
用法也特别简单:
Alert('请选择三张优惠券');
3)按钮
UI都喜欢花式的按钮,但我遵循的原则是,能用CSS3画的就用CSS3画出来,少用或不用图片。
这样按钮能更通用性,各种款式的都能继承基本款式,在基本款式上修改某些参数就能实现效果。
上面的按钮有的大、有的小、有的方、有的园、有的下面是阴影、有的无边框,可以用上面的代码来概括。
按钮特别的地方在做细调。
4)输入框
输入框,基本也是标配,同样的,UI也喜欢花式的输入框,我还是遵循能画出来的就自己画。
这次的输入框,还是比较朴素的,没有用夸张的表现手法展示。
5)字体大小与颜色
UI设计稿上都会有好多种字体,但如果要求不严格的话,其实可以事先设置些字体大小,直接套用。
h1~h6这6个标签,我预先定义好了字体大小,这样也能减少使用“p”或“span”标签,让网页标签更丰富。
颜色可以向下面这样预先定义一下,但可能很多时候都会把颜色写在特定样式中,那就做个变量,放在代码中,随时引用。
6)工具样式
工具样式就是预先写好对齐方法,margin的距离,padding的距离,display的展现方式等。
可以在分析了页面后,大致的写一些,不用写太多,够用即可。
三、页面特性
1)CSS3动画
为了让页面更生动,免不了加些动画,产品很多时候也是需要你边调试边做效果。
虽然不用事先准备动画代码,但可以事先了解一些动画效果,参考一些现有的开源动画库,例如“animate.css”。
将动画代码放在一块儿,不然东一个西一个的,乱糟糟,自己也会忘记有哪些动画效果,搞不好还会重复写,改的时候也得到处找。
2)可复用部分
这次在做页面的时候,低估了这些可复用部分,分析的太少,导致在写的时候很多部分没有抽象出来,代码写的很僵硬。
部分1 |
部分2 | 部分3 | 部分4 | |
边框修饰 |
有边框 有底脚与阴影,上下有小眼睛 还有两条弯曲的线 |
有边框 底部有阴影 |
有边框 有底脚与阴影 |
有边框 底部有阴影 |
背景色 |
红 | 红 | 红 | 红 |
标题图 宽高各不同 |
有 | 无 | 有 | 有 |
内部展示 |
两列一行 | 三列一行 | 一列一行 | 三列一行 |
单元内容排列 |
上下 | 上下 | 左右 | 上中下 |
单元内容 |
上部:背景图+图标+名字 下部:按钮 |
上部:背景图+图标+名字 下部:按钮 |
大背景图 左边:图标+名字+描述+有效期 右边:价格 |
上部:图标 中部:名字 下部:价格 |
选中效果 |
有(与部分2相同) | 有 | 无 | 无 |
大致就是上表中的情况,接下来就是细调,比较麻烦的是位置摆放,各种对齐,宽高设置,margin、padding距离计算、字体大小颜色等。
做这些非常耗时,好在最麻烦的对齐、位置摆放可以使用弹性布局,不但抛弃了浮动,宽还能自适应,同一行内的子元素的高能自动计算为相同。
在自己的UI库中也同样封装了弹性布局的,现在每个项目我都会引用进来。
源码下载: