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

歡迎關注咱們的微信公衆號，前端外刊評論，若是搜索異常，請搜索，FrontendMagazine。

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

4.20 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 是一個值得研究的方向。

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

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