更愉快的书写CSS

我在写CSS的时候经常会碰到些麻烦事儿:

1)看上去蛮简单的排版却写了很久

2)代码写的越来越散,总是这里补一句,那里补一句,没有条理性

3)margin、padding、font-size等属性在不停的重写

效率提不上去,工期又赶,最后只能加班加点做。

后面仔细想想,其实自己可以做的更有计划性,更有条不紊的推进。

一、全局观

我们这边开发是按流程来进行的,UI设计没给出,是坚决不开工的。

在UI设计给出后,最多只是做些无伤大雅的微调,这样的话,其实在给出所有UI设计稿后,可以做个大概的评估。

将通用的组件、样式难点、各个动画、布局细节,了然于心,这样在开发的时候,胸有成竹。

先来看看这次设计稿的总览:

更愉快的书写CSS更愉快的书写CSS更愉快的书写CSS更愉快的书写CSS

更愉快的书写CSS更愉快的书写CSS更愉快的书写CSS

在看完所有页面后,可以开始打草稿,做抽象了。

接下来的CSS开发我都会使用Sass来编写,用Sass能更好的做模块化开发。

二、通用组件

1)loading效果

更愉快的书写CSS

基本上每次做页面,都会有这么一个效果,所以预先准备几个这样的效果,会很有用处,将所有的相关代码写到一个文件中封装起来。

而且设计很多时候不会考虑loading这种细节效果,最终都是自己来添加的,设计也会很欢迎你帮他分担些工作。

我在很早以前自己写了一套简易的UI库,在工作中发挥了巨大的作用。

2)弹出框

更愉快的书写CSS

这个也基本可以说每次都会用到,所以封装一个自己的弹出框很有必要。

产品、设计也经常会忽略这个效果,经常会撂下一句话“通用的就可以”,事先准备好的话,对你对我都有帮助。

这个功能不仅仅是CSS,还得需要JavaScript的支持。

我用最简单的200行代码封装了弹出框,遵循开放封闭原则,并可自行扩展。

更愉快的书写CSS

用法也特别简单:

Alert('请选择三张优惠券');

3)按钮

更愉快的书写CSS

UI都喜欢花式的按钮,但我遵循的原则是,能用CSS3画的就用CSS3画出来,少用或不用图片。

这样按钮能更通用性,各种款式的都能继承基本款式,在基本款式上修改某些参数就能实现效果。

更愉快的书写CSS

上面的按钮有的大、有的小、有的方、有的园、有的下面是阴影、有的无边框,可以用上面的代码来概括。

按钮特别的地方在做细调。

4)输入框

更愉快的书写CSS

输入框,基本也是标配,同样的,UI也喜欢花式的输入框,我还是遵循能画出来的就自己画。

这次的输入框,还是比较朴素的,没有用夸张的表现手法展示。

更愉快的书写CSS

5)字体大小与颜色

UI设计稿上都会有好多种字体,但如果要求不严格的话,其实可以事先设置些字体大小,直接套用。

h1~h6这6个标签,我预先定义好了字体大小,这样也能减少使用“p”或“span”标签,让网页标签更丰富。

更愉快的书写CSS

更愉快的书写CSS

颜色可以向下面这样预先定义一下,但可能很多时候都会把颜色写在特定样式中,那就做个变量,放在代码中,随时引用。

更愉快的书写CSS

6)工具样式

工具样式就是预先写好对齐方法,margin的距离,padding的距离,display的展现方式等。

可以在分析了页面后,大致的写一些,不用写太多,够用即可。

更愉快的书写CSS

三、页面特性

1)CSS3动画

为了让页面更生动,免不了加些动画,产品很多时候也是需要你边调试边做效果。

虽然不用事先准备动画代码,但可以事先了解一些动画效果,参考一些现有的开源动画库,例如“animate.css”。

将动画代码放在一块儿,不然东一个西一个的,乱糟糟,自己也会忘记有哪些动画效果,搞不好还会重复写,改的时候也得到处找。

更愉快的书写CSS

2)可复用部分

这次在做页面的时候,低估了这些可复用部分,分析的太少,导致在写的时候很多部分没有抽象出来,代码写的很僵硬。

更愉快的书写CSS 更愉快的书写CSS更愉快的书写CSS更愉快的书写CSS

 

部分1

部分2 部分3 部分4

边框修饰

有边框

有底脚与阴影,上下有小眼睛

还有两条弯曲的线

有边框

底部有阴影

有边框

有底脚与阴影

有边框

底部有阴影

背景色

标题图

宽高各不同

内部展示

两列一行 三列一行 一列一行 三列一行

单元内容排列

 上下  上下 左右  上中下

单元内容

上部:背景图+图标+名字

下部:按钮

上部:背景图+图标+名字

下部:按钮

大背景图

左边:图标+名字+描述+有效期

右边:价格

上部:图标

中部:名字

下部:价格

选中效果

 有(与部分2相同)  有  无  无

大致就是上表中的情况,接下来就是细调,比较麻烦的是位置摆放,各种对齐,宽高设置,margin、padding距离计算、字体大小颜色等。

做这些非常耗时,好在最麻烦的对齐、位置摆放可以使用弹性布局,不但抛弃了浮动,宽还能自适应,同一行内的子元素的高能自动计算为相同。

在自己的UI库中也同样封装了弹性布局的,现在每个项目我都会引用进来。

源码下载:

https://github.com/pwstrick/chezhu

上一篇:浅谈JS的变量提升


下一篇:OpenJudge2728:摘花生 解题报告