我在写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

原文链接 https://www.cnblogs.com/strick/p/6218508.html

【转】【好文章】更愉快的写css的更多相关文章

  1. 更愉快的书写CSS

    我在写CSS的时候经常会碰到些麻烦事儿: 1)看上去蛮简单的排版却写了很久 2)代码写的越来越散,总是这里补一句,那里补一句,没有条理性 3)margin.padding.font-size等属性在不 ...

  2. 如何更愉快地使用em —— 别说你懂CSS相对单位

    前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...

  3. 如何更愉快地使用rem —— 别说你懂CSS相对单位

    前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...

  4. 10 个 GitHub 上超火的 CSS 奇技淫巧项目,找到写 CSS 的灵感!

    大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧

  5. 辛星和您一起手写CSS气泡

    上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢 ...

  6. 既然写CSS很容易,那为什么大家还是把CSS写的那么烂呢?

    在众成翻译上看到一篇不错的css文章,所以就给转过来. 在你开始阅读这篇文章之前,一定要做好心理准备.因为我写的 90% 都是在发牢骚,只有最后大概 10% 介绍 CSS 技巧之最佳实践.提前给你们打 ...

  7. Android--在Android应用中愉快地写C/C++代码(转)

    1 前言 一直想在android层面写c进程,然后java可以与c进程交互,以前在android源码中想玩就可以直接在init.rc中加上交叉编译好的c进程就可以了,而在ide中,也就是ndk编译后各 ...

  8. MarkDown语法——更好地写博客

    MarkDown语法--更好地写博客 我们在学习过程中要尽量养成编写博客的 好习惯:一方面方便自己在学习之后进行一次汇总,其次自己书写的文章可以在以后的时间里反复查看以便于巩固,在找工作时博客也是被招 ...

  9. Less:优雅的写CSS代码

    css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或 ...

随机推荐

  1. 从零开始ant-design-vue-pro开发笔记(一)

    开始 从这里开始是用ant-design-vue组件写ant-design-vue-pro这个后台项目实现步骤的从零开始搭建的过程,视频地址,它采用了ant-desgin-vue的组件库作为素材开发, ...

  2. 48-创建 overlay 网络

    上一节我们搭建好实验环境,配置并运行了consul,今天开始创建 overlay 网络. 在 host1 中创建 overlay 网络 ov_net1: -d overlay 指定 driver 为 ...

  3. windows命令行pip报错解决的方法

    今天在新电脑安装python,发现pip无效了,于是乎百度了很多方法,发现原因是pip升级导致的 解决办法,卸载pip重新安装 可以首先执行  python -m ensurepip  然后执行 py ...

  4. 【bzoj5339】[TJOI2018]教科书般的亵渎(拉格朗日插值/第二类斯特林数)

    传送门 题意: 一开始有很多怪兽,每个怪兽的血量在\(1\)到\(n\)之间且各不相同,\(n\leq 10^{13}\). 然后有\(m\)种没有出现的血量,\(m\leq 50\). 现在有个人可 ...

  5. Tkinter使frame填充整个区域

    在未设置默认情况下效果为 设置之后出现效果 使用方法: 增加 fill=X/Y/BOTH 以我为例: leftFrame.pack(side='left',fill=Y)

  6. nginx学习(六):日志切割

    现有的日志都会存在 access.log 文件中,但是随着时间的推移,这个文件的内容会越来越多,体积会越来越大,不便于运维人员查看,所以我们可以通过把这个大的日志文件切割为多份不同的小文件作为日志,切 ...

  7. 【Springboot】spring-boot-starter-redis包报错 :unknown

    springboot集成redis时,引入spring-boot-starter-redis包报错,maven找不到这个资源.如下图: 我的项目中,spring boot是 用的2.0.4版本.spr ...

  8. 每日一题LeetCode 8. 字符串转换整数 (atoi)

    问题描述 请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负号时,则将 ...

  9. (六十一)c#Winform自定义控件-信号灯(工业)-HZHControls

    官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...

  10. C# OpenCVSharp使用SetMouseCallback设置回调方法,报错"向非托管代码传递委托时,托管应用程序必须让这些委托保持活动状态,直到确信不会再次调用它们。"

    一.描述问题 当非托管代码调用托管应用程序的委托的时候,经常会报错“托管调试助手 "CallbackOnCollectedDelegate"   Message=托管调试助手 &q ...