側面還原第四屆中國CSS開發者大會

側面還原的意思是，我既不是組織者，也不是分享嘉賓，只是一棵無人知曉的小草，所以，發揮空間比較大，嗯~

得知本屆大會啟動，是裕波在朋友圈發的動態，因為職業原因，每年我最期待的行業會議就兩個——「CSS開發者大會」和「前端體驗大會（前身是Webrebuild）」，一個跟我的工作緊密相關，另一個是由我的老部門同事主辦的，那是一群很低調，但有追求、有創意、有格調的人，出自他們之手的東西，幾乎從不讓人失望。除二者之外，當然也有質量比較高的會議，我參加的不多，不做評論。

說回本屆大會，去年底的時候我就在奇怪，怎麼沒有第四屆了呢？正如欲波自己說的那樣，人的精力有限，他去年忙於別的事物無法抽身出來，只好推到今年初。

會議地址在廈門文化藝術中心的一家影院，不是很起眼，有人吐槽說不好找，會場上欲波也說，只要開了導航或者路上隨便問一個人，就沒那麼難找。他向來是這樣的風格，比較直接，但說的在理，不過作為參會者，也想說，如果在主要路口立個宣傳海報、指示箭頭之類的，體驗就會好很多了～之前在廣州的第三屆做得就挺好。

這是我第一次參加在影院的會議，感覺蠻特別的，每次聚在一起的人都差不多，認識的都是明星臉，勾三股四、大漠、賀師俊之類，這次多了一絲、顧軼靈和張鑫旭，不認識的還是不認識～張老師還在現場辦起了簽售會，各種簽名合影，儼然一幅綜藝明星范。

很難得這種場合，大家都不認識，不是為了應付和利益，卻彼此很懂對方。

鋪墊完畢，開始正題。

一、Building Scalable Components PPT鏈接

第一位分享嘉賓是個中文不太好的新加坡人，Zell Liew。

講CSS怎樣寫更乾淨、可擴展，怎樣做組件化。

以自己學習和工作過程中遇到的問題為主線一路往前，比如：適配方法、相對字體大小、窗口縮放、窗體單位，還有媒體查詢打斷點。

我其實挺想聽他講打斷點的方法和技巧，大家都知道這個痛點，無論是用比例還是具體數字，都可能碰到某些機型出問題的情況，不過，他就舉了個簡單的例子，沒有細說…

他還有講到使用基類和擴展類製作不同按鈕。網頁當中看似不同內容，可用相同結構和不同樣式加以區分，減少重複代碼量，提高復用性。

整體來說，邏輯比較清晰，但不夠深入，介紹了一些常規的，正常情況下的方法，未涉及可能存在的「坑」。（或許是時間關係）

另外，感覺他把中文換成英文聽起來就更高端些了？ 逃~

二、CSS Houdini 初探 PPT鏈接

勾股這個人，我還是很欽佩的，我跟他沒有過交流，但一直在關注，就此次大會來說，從內容和演講效果，他都能排在第一位。

說起Houdini，相信不少關注行業動態的人早有耳聞，因為一旦出現新事物都會傳播特別快，但現場知道的人還是很少...

勾股把它譯成「胡迪尼」，包括後面把「One more thing」音譯成「玩毛線」，不得不說，演講中加入這些小幽默效果還是不錯的。

他講的很多東西暫時都用不上，但卻沒有感覺假大空，而是一種期盼（能快點實現就好啦~）。總體概括有以下幾點：

一、樣式腳本化，能夠實現更便捷和靈活控制，當然，這裡指的不是style屬性改變。

二、創建新屬性和值，能夠設置它可以做什麼，不能做什麼，相當於把定義CSS的這項工作部分放權給開發者，像定義組件介面一樣去定義你需要的樣子。

三、CSS變數，應用倒是沒有細說，提到它的一個弊端是不支持過渡和動畫，可能即將被第二點提到的功能更強大的東西取代。

四、圖片變成畫布，這個還是蠻大膽的，相當於，把現在只能設置成一個靜態圖案或圖形的東西激活了，把一塊畫板換成了一塊屏幕，Canvas能幹什麼，它就能幹什麼，賦予了更強的靈活性和創意空間。

五、更新、更強大的布局方法。現場無法給出demo，但可想像，它能讓人更輕鬆定義瀑布流之類，甚至更雜亂無章的布局，能夠打破現存單調的布局模式，呈現更多樣化的網頁形式。

譬如這樣：

當然，對未來的暢想還不止於此，盒模型可能被重新定義，動畫的控制比現在更靈活，瀏覽器能夠精確解析字大小等等，都是值得期待的。

整體感覺，將CSS更加編程化，更複雜，也更強大。演講過程輕快流暢，讓人很舒服，各種demo時常引得周圍的人次次驚呼：哇，好厲害。

三、組件化開發樣式API PPT鏈接

知乎上常看到顧軼靈...回答的問題，屬於接近規範的那類人~

他從很古老的開發方式開始回顧，一直到現在：標籤自帶樣式——內嵌樣式——CSS的誕生——結構、表現、行為分離——組件化、模塊化。

講到CSS這門語言本身的缺陷，從而會出現行業中廣泛流傳的那些方法論和設計模式，同樣也聊到了CSS IN JS，CSS Modules，自定義屬性、新的CSS選擇器，以及Houdini。

整體相當於發展歷史回顧以及對未來的展望，理論較多，代碼和demo偏少，細節給人的印象並不深，但如果仔細回味會有收穫。

四、領導，我不想寫CSS PPT鏈接

張鑫旭這個人，我想不必過多介紹了，從第一次看他博客就覺得怎麼還有人在用這麼low的界面？但還別說，絕大多數比他博客好看的，流量都大不如他，為什麼呢？說到底，博客還是內容為王的，人家數年如一日地產出優質文章，有這麼多回報也是應該的，這不，剛進門就看到他在那裡簽名售書，整個前端圈，到現在為止也沒有出現過這個情況。

但是，我卻偏偏是要給他挑毛病的。

不想寫CSS，到底是怎麼個不想法。

哦，原來是不想寫頁面，所以，有人做了設計稿轉網頁的工具，方便是方便，但設計的靈活性和特異性做不到，無法做到人工那樣細緻和完善。

然後怎麼辦呢，有人想到了把常用代碼段，做成固定模塊，可組裝，可編輯，使用是時候按需拼接，這的確是個好方案，我們組正在使用中。

那還要怎樣緩解「難受」呢？其實在樣式裡面，我們也是常用到封裝的，把一個具備某種功能的代碼塊，單獨定義成一個類，稱為「原子類」，那麼，原子類再進一步，我們可以把它做成自定義標籤，去替代div，但它也有個局限，只適用於長尾區域。

有其他方法么，有，使用預處理器進行偷懶，寫一些帶參數的函數，一次書寫，反覆使用。

代碼層面說完了，還有么？我們寫代碼能更快些么？

當然可以，編輯器本身會自帶屬性提示，而且我們可以自定義代碼段，只需要敲兩個字母，就能出來一大段代碼。

最後的最後，他介紹了一個腳本，叫Qcss，說得很好用，不過初看是讓人有些頭大的，實用性也有待考量。

上面這些，我基本上是按照他的調調描述完了，概括一下，就是下面這張圖

我......為什麼說要給他挑毛病，你們懂了？不懂的我也不啰嗦哈，你覺得有收穫就好~

五、探索動效開發模式 PPT鏈接

這個話題來自大漠，大漠的網站，是前端圈幾大名站之一，他對技術的研究算得上勤奮，畢竟一把年紀，哈哈。

據他所說，最近這一年他也沒怎麼寫CSS了，比較多的在做各種動效，從他網站上也看得出，很多JS的文章。（說好的一起走下去呢）

這次的話題，分享了幾種不同類型的動畫及場景、用途，比如：引流 、氛圍 、富交互作用、展示、互動，分別適用的動畫形式為：路徑、幀、timeline、視頻、小遊戲。

然後簡介了一下動效技術的發展歷程，雖然隨著CSS3的推出，做動畫比以前多了一種簡便的方法，但在現有環境下，CSS驅動的動畫越來越無法滿足需求，故而需要轉換到使用JS驅動，比如：精靈動畫、路徑動畫等。

既然開發方式不同了，那麼流程和工具都要做出相應改變，於是他給出了這麼一張圖：

使用設計軟體轉出json，這樣就很方便用JS去控制DOM，甚至於，走到這一步仍然不是很滿意，還想到了使用數據驅動，動畫環節的大部分工作都交給設計師搞定。

除了傳統動畫，可使用的動畫形式隨著技術的更迭和豐富會有更多，比如：AR、陀螺儀、Webgl、各種感測器等。

整體看，首先要有好的動畫創意和設計意圖，然後找到適合運用的技術，再工具化，提高實現質量，降低製作成本，提高效率。

六、面向設計的CSS PPT鏈接

對一絲最初的了解，還是那篇那些年，那時剛從業不久，浮動、居中，這一直是前端圈經久不衰的話題，一看到有什麼好文章，或者誰曝光度比較高，就覺得肯定是大牛，說的話肯定有道理，也時不時地去看他的言論和文章，有過兩次問題請教。

所以，我對他這次的演講話題和內容還是相當期待的。

他首先進行了一番調侃式的自我介紹，接著，他講了CSS書寫方式的演變歷程，從裸寫到預處理器，到Postcss，最後還是說道CSS IN JS。

當然，這些東西放到現在都不再新鮮，已經是大家耳熟能詳的，就光會議當天，也都有人已經講過了，難免讓人覺得重複和乏味，但這些都還沒到他要講的正題。

他說，CSS本來是用來做什麼的呢？還原設計，那麼面向設計，才是需要盡最大努力做好的事情。

這句話說得很在理，接下來，他列了CSS開發者需要具備的三個力：生長力、創造力、靈動力，然後舉了三個相關的例子來說明。（具體是什麼例子，大家可以看PPT）

例子本身，可以說具備一定的創新和啟發性，但很多人沒想到的是，三個例子講完就沒了，戛然而止。

另外，在之後的提問環節，他的回答也是差強人意，比如：

問：響應式和自適應的區別？

答：翻譯的不同。

問：是運用js去計算進行適配更好，還是使用VW和VH更好？

答：程序員都有潔癖，能用樣式解決的，幹嘛要引入一個腳本呢。

裕波聽完之後都忍不住說：你就這樣回答完了？

主要論點：怎樣運用技術能不妥協求次，而是高度還原設計，提升體驗。

但不足的是，速度稍快，內容稍薄，後半段講述的才是主要內容，卻以三個小例子就「草草」結束，輕鬆有餘，而嚴肅不足，像欲波說的那樣，本可以期待更多內容但沒有看到。

七、聊聊CSS中的黑科技 PPT鏈接

聊這個話題的，是我廠互娛的一位同事，標題是「黑科技」，但在我看來並不黑，而是用來實現某種看似很難做到的效果的思路和技術選型問題。

一個動畫，是一棵樹，從很小的枝葉慢慢動態長大的過程。

想用Canvas分層繪製，覺得生硬不自然，想用視頻，但修改成本高，文件過大，最後，選用了CSS animation+SVG的線條動畫來搞定，然後介紹了兩個屬性，和實現動畫的方法，這是幾乎每個人都可能有的經歷。

接下來，他又提到了很經典的一個div實現某某效果，當然，需要結合偽元素、陰影、漸變、濾鏡等技術，還是那個老生常談，技術只是工具，最神奇的東西從來不在技術，而在創意和思維，現在這些看起來很平常的東西，功勞應該歸功於第一個吃螃蟹的人，他才是真的了不起。

整個分享的最高潮部分，是最後現場所寫的一個demo，是什麼呢？PPT裡面沒有，這裡先賣個關子，我只說，可能過段時間，本屆大會的很多內容會被遺忘，這個就會被記住，甚至會後都有不少人忍不住重新敲打了一遍來向本屆大會致敬，哈哈，留這麼多懸念我也是太壞了，感興趣的可以再找我~

八、在線圖像編輯器中的CSS黑魔法 PPT鏈接

剛走了個黑科技，又來了個黑魔法。

說實話，內容本身並沒有給我太大的驚喜，使用漸變，文字描邊，鏤空遮罩，這些可能多數人都搞過。

屬於實現特殊效果的小技巧，但他通過這些東西向大家傳達的理念我還是認同的，充分利用技術和技巧去武裝自己，使自己面對各種需求的時候都能更從容。

最後，他還比較取巧的，把本屆大會當做素材，講了個問題，什麼問題呢？——一個模版多種樣式。

在結構不變的情況下，怎麼做到，不同背景、不同字體顏色、不同配圖、不同展示順序。

聽起來是否耳熟呢？是的，作者很自然地引出了那個經典案例——CSS禪意花園。

但讓我大感意外的是，現場居然還有人不知道這個，這就有點讓人搞不懂了，現在的前端新人學習都看啥？信息越多，精力越被分散，視野越窄了嗎？

總結

整體感覺，優化、效率、新事物。

但不禁又引起我另外的思考，當這個圈子的話題被講的越來越多，自適應、布局、單位、好玩兒又有用的屬性、設計模式、組件化、快捷編碼、還原設計，那麼還未講到的就越來越少，以後還講什麼？

稍微想想，又有了答案，人們參會無非兩個目的，學新知識和獲得解決問題的方案。先不說他們到底有沒有講完，即使講了，有一部分也是點到為止，並未深挖。所以，可以從不同緯度去考量，可以在同一個知識點上進一步拓展好的實踐方法，以及實際項目中所遇到問題的解決方案，從知識型向問題型轉變。比如這一屆，好幾個話題都讓人意猶未盡，可以下次再續。

雖然我給它挑了一些刺兒，內容重複，層次和充實度不夠，但總的看來，正如裕波所說，收穫肯定比失望更多，哪怕僅有五分鐘的內容是有幫助，有啟發的，那就值得，聽君一席話，勝讀十年書嘛。

另外，很明顯感覺到，大家都在努力挖掘技術的潛力，以及很積極的實踐新技術，不說別的，就沒見幾段代碼是在「老老實實」地寫CSS，都是預處理器、變數之類用的很普遍。

舉辦一屆這樣的全國性會議很不容易，記得大學時組辦一個系的社團活動都不易，這個就更加勞心勞力了。努力不等於優秀，但不努力，就沒有變優秀的可能。在這個人人顧己不言他的社會，能有一幫這樣的人，還在組織對大家、對行業有益的事，真的難能可貴，所以，我很直接地指出一些問題，是真心希望，在大家的付出和熱情之下，它能夠更好，也的確代表我本人，再次對所有付出辛勞的人說聲，感謝！

期待更好的下一屆！