7 天 600 stars， Mobi.css 是如何诞生的
xcatliu · xcatliu · 2016-09-05 20:26:23 +08:00 · 13388 次点击这是一个创建于 2994 天前的主题，其中的信息可能已经有所发展或是发生改变。
受邀写一篇 Mobi.css 的诞生历程，请原谅我吸引眼球的标题，我会努力把这篇文章写得有一些干货的。
提要：
Mobi.css 是一个轻量、灵活的移动端 CSS 框架。发布一周以来，获得了 600+ stars ，登上了 GitHub Trending Top1 （ CSS ），在 Hacker News 上进入了前三。
这篇文章会先介绍一下创造 Mobi.css 的思路，再介绍一下我在推广 Mobi.css 中的心得。
为什么要创造 Mobi.css
当我在设计一个新的 Focus on 移动端用户的网站（比如面向微信用户的网站）的时候，调研了一些现有的 CSS 框架，应用比较广泛的有 Bootstrap, Foundation, Pure.css, Framework7, Skeleton 等。
他们都很优秀，但是都有一些缺点。
- Bootstrap: 太大太笨重了，对于桌面端用户我希望展示与手机端一样的页面，可能再加上一个二维码，将用户导向微信（类似于微信公众号的文章在网页中的样式）
- Foundation: 没有实践过，看上去也很大，大部分都是我不需要的功能
- Skeleton: 在移动端有一些 bug ，
overflow:auto;的滑动不平滑，<select>样式太丑，官网的<pre><code>在 iPhone 里根本不 work ，说明他们没有在手机上测试过 - Framework7: 适合做 WebApp ，而我不太喜欢那种仿原生 App 的设计
- Pure.css: 很优秀，足够小巧，没什么特别的缺点，如果定制一下应该也可以满足需求。不过我还希望框架层面能够有一些针对移动端的设计
于是我决定自己造一个轮子。
造新轮子之前一定要做好调研，否则可能白费了功夫。
开发过程中的心得
善用工具
CSS 框架相比于 JavaScript, React 等简单得多，但是也不能忽视了工具的使用。我选择了以下工具：
- Sass (scss)/Autoprefixer: CSS 预处理器都大同小异， Sass 功能比较全，所以选择了它。移动端也需要兼容不同设备， Autoprefixer 可以自动加上
-webkit-等前缀 - Ejs/Marked/Highlight.js: 构建 website 的工具，一开始是手写 HTML ，发现根本 hold 不住。这些工具后期可以用静态网站生成器替换
- Gulp: 构建工具，串起其他工具
- Travis CI/GitHub Pages/Coding Pages: 静态页面服务，一开始手动部署网站，后来发现太麻烦了，就用 Travis 自动部署了
磨刀不误砍柴工，善用工具可以大大提高开发效率。
站在巨人的肩膀上
开源社区上的代码都是别人的积累，如果离开了它们， Mobi.css 很难在短时间内完成开发，我借鉴了以下开源项目：
- Normalize.css: 大部分
_reset.scss部分是借鉴它的。没有直接引入它的原因是有少部分它的代码是不需要的 - Bootstrap v4: 使用最广泛的 CSS 框架，可借鉴的太多了
- Pure.css/Skeleton: 借鉴了手机上的样式
- 微信公众号的 desktop 版: 借鉴了在 desktop 上的样式，以及中文字体
- 以及很多其他框架
重视写文档
开源项目要受欢迎，文档是非常重要的。README.md 要让大家能在短时间内了解项目的特点。网站要能够尽可能输出自己的理念。
如果可以的话，最好用英文（或者双语）写。否则只能有中国人来关注你的项目了。要知道，外国开发者比中国开发者多很多倍的。
不要担心自己英语不好，只要表达的内容能让外国人看得懂即可。等项目成熟了，自然会有人帮你修改文档。
注意社区的一些规则
- 标明 License
- 遵守版本号规则，不要乱做 Breaking changes
如何推广
不要觉得不好意思推广，我们推广不是功利性的求赞求关注（逃。
而是因为没有人关注的项目，是不可能向好的方向发展的。而如果自己不做主动的推广，项目也很难被关注。
推广这部分其实我并不是很擅长，这里只写出一些我自己的心得吧。
在对的时间发对的帖
一般在下班的时间，大家都会拿出手机刷一刷。这时你的贴最容易被曝光。等到人气上去了，晚上睡觉之前大家再刷一波手机，就有更多人看到了。
发帖的时候只需要简要的说重点，引导用户到 GitHub 或你的网站。但是慎用「求 star 」等字眼，功利性太强。
推广渠道
我用了以下推广渠道（按推广效果排序）：
- Hacker News
- V2EX
- 开发者头条
- SegmentFault
- Hacpai
- Startup News
- 光谷社区
聆听意见，及时反馈
自己的想法总归是一个人的，吸取了别人的建议才能让项目更好的发展。 Mobi.css 就有一部分 API 是听取了别人的建议之后修改的。
当然，自己需要有自己的判断。 Mobi.css 的准则很简单：这个设计是不是 focus on mobile 的。
最重要的是，项目要有价值
没有价值的项目即使推广再多，也没有人会关注的，只会招来一顿猛喷。
总结
Mobi.css 在短时间内获得了很多关注，离不开大家的支持，离不开开源社区的帮助。
我知道这只是 Mobi.css 项目的开始，后面有更长的路要走，感兴趣的可以一起来建设。
 |
1
fundon 2016-09-05 20:44:57 +08:00  1
这一波玩的溜！👍
|
 |
2
726332269 2016-09-05 20:56:25 +08:00 via Android 2
中文文档赶紧来一波啊，国人写的没中文算什么鬼
|
 |
4
linkgod 2016-09-05 21:27:48 +08:00
很不错，聚焦移动端
|
 |
5
sox 2016-09-05 21:32:12 +08:00
建议把 dist 给 gitignore 了 😂
|
 |
8
xcatliu OP @sox dist ignore 的话对于直接 git clone 的人不是很友好，而且每次发布新版本就不能直接用 git 打包的压缩文件了而得自己上传，不是很方便。然后有的人想直接在 GitHub 上看看 build 之后的代码，所以还是保留 dist 比较好，其他框架基本都保留了。
|
 |
9
breeswish 2016-09-05 21:52:19 +08:00 1
感谢，框架有很多可以学习的地方，不过还是喜欢 foundation :P
foundation 不是拿来直接用的，而是给进一步定制打下了非常好的 foundation |
 |
10
igel 2016-09-05 21:55:37 +08:00
先 MARK
|
|
12
xcatliu OP 感觉 V 站的 `<blockquote>` 不是很好看，其他网站的基本都有 `border-left` 比较好看。是否可以改进一下呢 @Livid ？
|
 |
13
scarlex 2016-09-05 22:47:07 +08:00
😂😂😂 我老是看成 mabi.css
|
 |
14
herozzm 2016-09-05 22:50:34 +08:00 via Android 1
除了轻，没发现亮点，样式不美观
|
 |
16
designer 2016-09-06 08:21:33 +08:00 via iPhone
支持！
|
 |
18
zuotech 2016-09-06 10:00:18 +08:00 1
|
|
19
xcatliu OP @zuotech 之前了解过，不过没继续关注了。又看了下，感觉它拥有很丰富的控件，不是我想要的。
其实 Mobi.css 就是我自己在新项目中需要用的轮子，我感觉在做的过程中还挺有收获的，所以分享出来了。它不一定适合所有项目吧 |
|
22
xcatliu OP @herozzm
除了轻以外，亮点还有为移动端做了很多优化，我尝试了一下其他的框架，虽然他们都说是 mobile first ，但是感觉还是有一些小问题，所以我造了个轮子。另外一个是想输出一些设计理念。 至于样式我还是挺喜欢的，这个看个人喜好吧。要定制也很简单，我在 `_custom.scss` 里面写了个例子，把注释去掉就可以看到夜间主题的效果了。 |
 |
26
ChiangDi 2016-09-06 11:11:17 +08:00 via Android 1
安卓的 UC 浏览器有兼容性问题
|
|
28
ChiangDi 2016-09-06 11:14:28 +08:00 via Android
@xcatliu 小米 4c 安卓的 5.1 ，安卓上 UC 浏览器本来就对 flex 布局支持有限
|
|
30
xcatliu OP @ChiangDi 已加到 issue 里： https://github.com/xcatliu/mobi.css/issues/6
|
 |
31
Lime 2016-09-06 11:35:29 +08:00 via iPhone 1
楼主总结的不错！
|
|
32
herozzm 2016-09-06 11:46:50 +08:00 1
@xcatliu 很多用框架的看中美观这块，比如按钮的阴影细节，渐变，圆角什么的
自己可以定义但是就是去用框架节省时间的意义了，建议多用心做几套风格出来 |
 |
37
zangbob 2016-09-06 12:20:30 +08:00
同 2 楼，虽然英文能看懂，但是没有中文文档真心不够友好。
哪怕你写个 demo.html ，里面中文注释下呢。。 |
 |
38
jaywcjlove 2016-09-06 15:08:23 +08:00
这名字起得太污了。
|
 |
39
dphdjy 2016-09-06 15:18:42 +08:00 via Android 1
虽然很小，但是没什么亮点，即使是腾讯若干年前的那个小框架，在实用性也比这个高，如果说提供基本元素来开发，不如直接 boot 的自定义啊。
|
 |
40
aksoft 2016-09-06 17:01:43 +08:00
我想知道中国人的东西为啥不写中文。
|
|
41
xcatliu OP @jaywcjlove 我现在才意识到这名字有多么污！
|
 |
42
gamecreating 2016-09-06 17:02:25 +08:00 1
支持一下
|
|
43
xcatliu OP |
|
44
xcatliu OP |
|
46
xcatliu OP @gamecreating 感谢支持！
|
|
48
aksoft 2016-09-06 17:11:39 +08:00
对于某些说凭啥凭啥要出中文？我只能说去你女马了隔壁。
|
 |
50
openroc 2016-09-06 18:57:18 +08:00
gogo up ！
|
|
51
dphdjy 2016-09-06 21:37:45 +08:00 via Android
@xcatliu 忘了。。。
http://data.300hero.net 这个首页轮播就是那个里面的 bootstrap 只是觉得这个方向和大型框架没有可比性，和小组件又不具有表现力，所以单出体积小没有意义，开发者不可能直接导入，自然会对其修改，这样各种自定义组件一出现，体积可能远比其他框架大。 |
 |
55
scott15975 2016-09-07 11:22:57 +08:00
赞，支持一下
|
 |
56
bertonzh 2016-09-07 13:45:46 +08:00
学习了
|
 |
57
miao 2016-09-08 08:29:01 +08:00
楼主. 不支持自适应吧? 只针对移动浏览器的?
|
|
59
miao 2016-09-08 08:38:26 +08:00
@xcatliu 明白. 本来我想用 Mobi.css 做一个自适应网站.
发现一个问题, <div class="col-1-4"> 在电脑和手机上都显示 4 栏, 而不能自动在电脑显示 4 栏, 手机显示 1 栏, 别的 css 框架的办法是 <div class="col-1-4 col-mb-1-2 col-tb-1-3"> 这样就能自动在不同浏览器 自动识别 显示几栏 |
|
60
xcatliu OP @miao 以前也有人问这个问题 https://github.com/xcatliu/mobi.css/issues/18
简单来说，我认为使用 Mobi.css 的话，应该只设计手机上的样式，电脑上保持和手机一样就可以了，你应该关注手机用户，不要花时间去设计两套，测试两套。如果你想电脑是 1-4 手机是一整行，可能你需要重新设计了。 另外如果你真的需要，你可以给 row 加 style flex-wrap:wrap 可以在一行放不下的时候换行。但是要精确控制在手机上，则比较麻烦，需要手动加 media query |
|
61
miao 2016-09-08 08:51:52 +08:00
@xcatliu 谢谢你. 这样处理,确实麻烦了一些. 那么 Mobi.css 就是专为移动而生, 桌面显示的效果和手机一样. 谢谢你.
|
Select Language