7 天 600 stars， Mobi.css 是如何誕生的

受邀寫一篇 Mobi.css 的誕生歷程，請原諒我吸引眼球的標題，我會努力把這篇文章寫得有一些乾貨的。

GitHub Repo | Homepage

提要：

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

• 光谷社區

• Reddit

聆聽意見，及時反饋

本身的想法總歸是一我的的，吸收了別人的建議才能讓項目更好的發展。Mobi.css 就有一部分 API 是聽取了別人的建議以後修改的。

固然，本身須要有本身的判斷。Mobi.css 的準則很簡單：這個設計是否是 focus on mobile 的。

最重要的是，項目要有價值

沒有價值的項目即便推廣再多，也沒有人會關注的，只會招來一頓猛噴。

總結

Mobi.css 在短期內得到了不少關注，離不開你們的支持，離不開開源社區的幫助。

我知道這只是 Mobi.css 項目的開始，後面有更長的路要走，感興趣的能夠一塊兒來建設。

GitHub Repo | Homepage

Hacker News 上的討論