外刊君談中國第三屆CSS大會

歡迎關注我們的微信公眾號，前端外刊評論，如果搜索異常，請搜索，FrontendMagazine。

2016年12月17日，中國第三屆CSS大會在廣州天虹錦都酒店酒店舉行，外刊君同其他幾位同事也參加了這屆CSS大會。本文將對大會進行一個總結，談談外刊君的見聞和思考。

3.14 things I didn』t know about CSS

演講者 Mathias Bynens 來自比利時，一個 Web 標準的狂熱分子。對 HTML、JavaScript、Unicode、性能和網路安全充滿好奇。Mathias 整個演講都圍繞著 CSS 展開，從 CSS 的一些不為人知的小技巧，到 CSS only 的遊戲，再到如何通過 CSS 實現 XSS 攻擊都讓我耳目一新。技術的魅力在於不斷的挖掘和擴展，CSS 也是如此。更多內容可以下載 slide了解。

CSS Grid Layout

演講者大漠，CSS專家、阿里巴巴前端技術專家。自然是我們圈子的老熟人了。第一次聽大漠演講是在平安科技的分享上，第二次是在餓了么，這次是第三次。大漠給我們帶來了 CSS Grid Layout 這個話題。繼 flex 之後，瀏覽器廠商和Web標準繼續推出了 Grid Layout 來幫助開發者布局網頁。大漠的介紹一如既往地深入淺出，Grid Layout 的各個細節娓娓道來。CSS 專家大漠預測，flex 和 grid layout 結合使用應該是未來的趨勢。外刊君聽下來也有點懷疑，grid layout 標準是否有點過於複雜了，也許需要工具來簡化其使用方式。更多細節下載 ppt

閃電分享：CSS in Native

勾三股四，阿里前端開發專家，weex 項目主要發起者和負責人（有說錯請聯繫外刊君）。這雖然是一個只有15分鐘的閃電分享，也許你會覺得有打廣告之嫌，但外刊君認為可以給勾股45分鐘，好好講講 weex 是如何處理 CSS 的。演講雖然只有短短的十多分鐘，但對於想要了解 weex 原理的童鞋值得一聽。並且恭喜 weex 勾搭上了 Apache 基金會，去年 weex 開源的時候是有多稚嫩，到現在已經取得了長足的進步，與 RN 有了一戰之力。slide 下載

Sass & CSS Design Pattern

廖洧傑，台灣六角學院的校長，台灣國立高雄大學資訊管理學系前端兼任講師、業界講師。聽過幾次台灣同行的演講，除了台灣腔之外，他們還有一個共同特點，就是 slide 做得整潔漂亮，內容出彩。這次也不例外。介紹的內容一種叫做原子化的 CSS 設計模式。把架構分成了五層，原子、模塊、組件、模板和頁面。廖洧傑我們需要按照團隊屬性、項目性質來決定 CSS 的架構。如果你覺得你手上正在寫的、團隊維護的 CSS 有點混亂毫無章法的話，你可以好好學習學習這個分享。

一分鐘在我們的項目中使用 SVG

演講者，羅正燁，微信前端工程師。講真，現場聽下來，外刊君感覺這個分享並不好。後來再看看分享出來的 slide，問題應該出在外刊君和演講者的代溝（看不懂每張 slide 的標題），以及演講者有些緊張。這是一個 svg 實戰介紹，包括 svg 基礎已經一些使用的細節。第一次知道 svg 比起圖片不足的地方在於渲染耗時。大家也可以體驗一下 slide 最後亮的 webflow，一個高效、強大、跨平台的前端開發工作流工具。

咳咳，前端分重構和 Javascript 的優點和缺點就在這裡，優點是深入，缺點是障目。

SVG 動畫實踐

方瀟儀，微信UI工程師，對各種Web動畫感興趣。大家可以體驗一下第一頁 slide，滑鼠滑動到紅色和藍色色塊上試試。恩，這個分享可以打五星。通過互動式的體驗為我們介紹了 svg 動畫的秘訣。示例豐富，精美。重要的事情說三遍，好好看看 slide，好好看看 slide，好好看看 slide。

談談網頁中的「信息」

倪栩生，微信UI工程師，對CSS有各種奇葩想法。比較奇怪的是，騰訊微信並不是贊助商，但會有三個連續的來自微信工程師的分享。外刊君作為五年多的前端老司機，這個分享不是我的菜。不多評論，有興趣的可以看ppt。

從矩陣走入 WebGL 世界

演講者：陳劍鑫，阿里移動事業群 - UC RED設計中心 高級前端工程師。CSS給大家帶來了美妙絕倫的前端世界，但是大家是不是完全了解她的美呢？運用CSS3的transform我們可以做出各種靈動俏皮的網頁，但是瀏覽器給我們帶來的絢麗不僅僅是CSS3哦。這次講師從美麗的CSS3開始，使用 WebGL 和大家一起感受和創造多彩的前端世界。外刊君數學不好，倒是覺得後面 WebGL 的 demo 很贊。瀏覽 slide。

CSS 的隱藏繪畫功能和交互動畫技巧

Wenting Zhang，CSS ICON && underline.js 作者、工作於 Adobe Typekit。

CSS 可不僅僅是簡簡單單的布局語言，她還是繪畫和動畫雙料小能手！512個極簡風格的圖標都全部用 CSS 實現，然後再細細打磨動畫。

來自 Adobe Typekit 的用戶體驗設計師 Wenting Zhang 為大家講述了 CSS 的隱藏繪畫功能和高級動畫技巧。這個分享可以打六星！妹子當場打開 code pen，只用一個div和css寫了一個小鬍子，而且還是會動的，把外刊君看燃了！誰加了妹子的微信，可以分享給我一下么，外刊君也是她的粉絲！

注意 CSS 自定義屬性的運用。

如果能找到現場視頻更好了，氣場強大，代碼一氣呵成，圈了超多粉絲。至於高級繪畫技巧，大家可以看看 slide。

總結

大會整體質量不錯，沒有廣告。

本次大會的每一個話題都和 CSS，或者說前端/UI工程師相關。CSS 本身，CSS 新規範都有很多值得研究的地方。svg、WebGL 等技術的運用和普及，前端工程師可以為用戶提供更棒的體驗，前端開發再次開疆拓土，VR 是一個值得研究的方向。

外刊君參加了很多大大小小的分享會，從最初的小白，變成了今天的老司機。不再覺得技術的神秘，但也理解了技術會議的意義。

在群里，在知乎上可能有人會吐槽會議組織問題，沒有乾貨。但我的感受是，周圍都是剛入行的童鞋，甚至有應屆生，他們很認真也很嚮往，這也許就是意義吧。當初外刊君也是如饑似渴地吸取知識，開闊眼界呢！