更愉快的书写CSS
我在写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库中也同样封装了弹性布局的，现在每个项目我都会引用进来。
源码下载：
https://github.com/pwstrick/chezhu
更愉快的书写CSS的更多相关文章
- PostCSS一种更优雅、更简单的书写CSS方式
Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include displ ...
- 【转】【好文章】更愉快的写css
我在写CSS的时候经常会碰到些麻烦事儿: 1)看上去蛮简单的排版却写了很久 2)代码写的越来越散,总是这里补一句,那里补一句,没有条理性 3)margin.padding.font-size等属性在不 ...
- 如何更愉快地使用em —— 别说你懂CSS相对单位
前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...
- 如何更愉快地使用rem —— 别说你懂CSS相对单位
前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...
- [java] 更好的书写equals方法-汇率换算器的实现(4)
[java] 更好的书写equals方法-汇率换算器的实现(4) // */ // ]]> [java] 更好的书写equals方法-汇率换算器的实现(4) Table of Content ...
- create-react-app 构建的项目使用 css module 方式来书写 css
先 yarn eject 释放出来配置文件具体参见我之前写过相关的文章(这里不再重复), 找到 config 文件夹下的文件如下图所示: 找到如图所示的配置: 书写 css 的文件名例如(App.mo ...
- 一种比css_scoped和css_module更优雅的避免css命名冲突小妙招
css_scoped 与 css_module 我们知道,简单的class名称容易造成css命名重复,比如你定义一个class: <style> .main { float: left; ...
- 展望未来：使用 PostCSS 和 cssnext 书写 CSS
原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一 ...
- 框架基础：ajax设计方案（五）--- 集成promise规范，更优雅的书写代码
距离上一篇博客书写,又过去了大概几个月了,这段时间暂时离开了这个行业,让大脑休息一下.一个人旅行,一个人休息,正好也去完成一个目标 --- 拥有自己的驾照.当然,也把自己晒的黑漆马虎的.不过这一段时间 ...
随机推荐
- Scrapy框架爬虫初探——中关村在线手机参数数据爬取
关于Scrapy如何安装部署的文章已经相当多了,但是网上实战的例子还不是很多,近来正好在学习该爬虫框架,就简单写了个Spider Demo来实践.作为硬件数码控,我选择了经常光顾的中关村在线的手机页面 ...
- 移动硬盘不能识别的常见7种解决方案 ~ By 逆天经验
服务器汇总:http://www.cnblogs.com/dunitian/p/4822808.html#iis 服务器异常: http://www.cnblogs.com/dunitian/p/45 ...
- 【翻译】MongoDB指南/CRUD操作（三）
[原文地址]https://docs.mongodb.com/manual/ CRUD操作(三) 主要内容: 原子性和事务(Atomicity and Transactions),读隔离.一致性和新近 ...
- document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)
document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题.这两个应该不是一个东西. 页面中 ...
- Word/Excel 在线预览
前言 近日项目中做到一个功能,需要上传附件后能够在线预览.之前也没做过这类似的,于是乎就查找了相关资料,.net实现Office文件预览大概有这几种方式: ① 使用Microsoft的Office组件 ...
- Emoji选项列表
一.需要的前提文件 从网上下载Emoji的表情包,当然是png的图片,因为WPF不支持彩色的Emoji,所以,做列表的时候,需要用图片. 随着压缩包一起的还有一个Emoji.xml文件,文件的层级结构 ...
- Hive on Spark安装配置详解（都是坑啊）
个人主页:http://www.linbingdong.com 简书地址:http://www.jianshu.com/p/a7f75b868568 简介 本文主要记录如何安装配置Hive on Sp ...
- CGI与FastCGI nginx+PHP-FPM
本文转载自CGI与FastCGI 1.当我们在谈到cgi的时候,我们在讨论什么 最早的Web服务器简单地响应浏览器发来的HTTP请求,并将存储在服务器上的HTML文件返回给浏览器,也就是静态html. ...
- java单向加密算法小结(1)--Base64算法
从这一篇起整理一下常见的加密算法以及在java中使用的demo,首先从最简单的开始. 简单了解 Base64严格来说并不是一种加密算法,而是一种编码/解码的实现方式. 我们都知道,数据在计算机网络之间 ...
- Chrome V8引擎系列随笔 (1)：Math.Random()函数概览
先让大家来看一幅图,这幅图是V8引擎4.7版本和4.9版本Math.Random()函数的值的分布图,我可以这么理解 .从下图中,也许你会认为这是个二维码?其实这幅图告诉我们一个道理,第二张图的点的分 ...