不算幾次路過，這是我正兒八經(jīng)第二次來廣州，每年的這個(gè)時(shí)候鸟妙，南方還是陽光明媚，12月17日竖独，第三屆CSS中國開發(fā)者大會(huì)，就在這樣一個(gè)溫暖的早晨開始了挤牛。
此次大會(huì)舉辦地談不上高大上莹痢，甚至比較偏，但會(huì)場內(nèi)環(huán)境和規(guī)模尚可，400人左右竞膳，門檻低航瞭，幾乎無廣告。
今年是CSS誕生22周年坦辟，在會(huì)議的開頭刊侯，特地播放了CSS之父H?kon Wium Lie錄制的一段視頻，其簡單提及了CSS的發(fā)展歷史和現(xiàn)狀锉走，并對CSS的未來有更多期許滨彻，希望大家能帶著它挑戰(zhàn)更多現(xiàn)在尚未觸及的領(lǐng)域，挑戰(zhàn)更多可能挪蹭。
一亭饵、3.14 Things I Didn’t Know About CSS——Mathias Bynens
第一個(gè)分享的是位外國友人，我雖然大學(xué)英語過了六級(jí)梁厉，但英語這個(gè)東西冬骚，不進(jìn)則退，更何況是聽力懂算，還有很多專業(yè)詞匯，所以庇麦，不得不承認(rèn)很多沒有聽懂计技，但大家都是程序員，代碼是通用語言山橄，演講者的代碼演示依然給了大家不少?zèng)_擊垮媒，大多是我們平時(shí)沒注意到的東西或者沒有用過的用法，還有比較一些大家平時(shí)有用到的方法的優(yōu)劣和規(guī)范與否航棱。
比如：!important的用法睡雇、CSS注釋的用法、font-family有什么講究饮醇、非常規(guī)選擇器 Escaping css selector它抱、CSS表達(dá)式? css expressions in IE<7、IE legacy document modes朴艰、Freeze Firefox等等观蓄，諸多的細(xì)節(jié)，每一個(gè)都能讓人感嘆祠墅，引人思考侮穿。
里面提到的兩個(gè)網(wǎng)站大家可以欣賞一下。
二毁嗦、CSS Grid Layout——大漠
現(xiàn)在大量網(wǎng)頁設(shè)計(jì)基于網(wǎng)格布局亲茅。雖說人們通常注意不到它，無論從理論、美學(xué)和整齊來說克锣，這樣的布局都很好平衡茵肃。網(wǎng)格結(jié)構(gòu)是所有現(xiàn)代網(wǎng)站的基礎(chǔ)，它總能給最終用戶完美無暇的設(shè)計(jì)娶耍。
大漠給大家介紹的Grid免姿，相信很多人挺早就有接觸，但因?yàn)闉g覽器對它的支持還不好并且看起來能夠大膽使用還遙遙無期榕酒，就沒有更深入去了解和實(shí)踐胚膊，為了到會(huì)場之后不會(huì)在演講者快節(jié)奏的講解下一臉茫然，去之前幾天想鹰，我借助著Eric Meyer那篇文章以及擴(kuò)展閱讀紊婉，稍微把Grid又過了一遍，對整體有了大概的了解辑舷，但文章終歸是文章喻犁，和PPT以及現(xiàn)場嘉賓講解還是會(huì)有不同，大概的定義和概念就不必多說何缓，重要的是看它的亮點(diǎn)以及能夠用什么巧妙的方法解決什么問題肢础。
其稱為“網(wǎng)格系統(tǒng)”，當(dāng)然就有它強(qiáng)大之處碌廓，強(qiáng)大在它不像行高传轰、浮動(dòng)這些屬性只是對一些具體區(qū)塊的影響和作用，它能夠把整個(gè)網(wǎng)頁都規(guī)劃進(jìn)去谷婆，而且在不變動(dòng)HTML的情況下大幅度改變布局慨蛙。就像很多人認(rèn)為的那樣，這跟當(dāng)年很多人熱衷的table從外表上看有點(diǎn)像纪挎，但又有本質(zhì)的不同期贫，網(wǎng)格較之更加強(qiáng)大和靈活，首先异袄，不需要特殊標(biāo)簽通砍，只是屬性，另外重點(diǎn)在于烤蜕，強(qiáng)大的屬性值選擇埠帕，怎樣分配行和列、區(qū)域玖绿，怎樣高效的書寫敛瓷，怎樣智能的計(jì)算，等等斑匪。
大漠也對未來的布局大勢做了些前瞻
了解過的人都會(huì)有一種感覺呐籽，Grid跟Flex box有相似之處锋勺，那么，它倆該怎樣選擇狡蝶，會(huì)是替代關(guān)系嗎庶橱？
在現(xiàn)場，大漠對這一點(diǎn)也做了解讀：
Flexbox ? 定義一個(gè)維度贪惹、內(nèi)容更擅長苏章，比如，一個(gè)容器里的圖片和文字排版
Grid Layout ? 定義兩個(gè)維度 外部大布局更適合奏瞬，比如枫绅，各種大模塊的排布
總之、Grid是對CSS技能包很好的補(bǔ)充硼端，而不是矛盾或者沖突關(guān)系并淋，技術(shù)在人的手里，可以靈活運(yùn)用珍昨。
三县耽、閃電分享——勾三股四
第三個(gè)話題，由勾三股四帶來的閃電分享 Css in Native镣典。之所以稱為閃電分享兔毙，是因?yàn)闀r(shí)間很短，所以兄春，語速也很快澎剥。
說實(shí)話，內(nèi)容跟CSS本身相關(guān)的東西不多神郊，多是關(guān)于Weex的介紹，有點(diǎn)廣告之嫌哈趾唱，但Weex出來之后的確曾引起行業(yè)的廣泛關(guān)注涌乳，我們組也不例外，不過過了那陣兒就沒有太多關(guān)注了甜癞，可能很多人和團(tuán)隊(duì)也都是這樣吧夕晓，這個(gè)跟自身的業(yè)務(wù)項(xiàng)目相關(guān)，但作為個(gè)人去了解和學(xué)習(xí)是可以的悠咱，其演講對時(shí)間的精準(zhǔn)控制和流暢度給人留下深刻印象蒸辆，跟主題相關(guān)的是講了Weex中是怎么寫CSS的，以及對原生CSS屬性的支持情況析既，具體等資料放出來大家再細(xì)看吧躬贡。
四、Sass & CSS Design Pattern——廖洧杰
如何設(shè)計(jì)出靈活性高眼坏、易維護(hù)的網(wǎng)頁版型拂玻，一直都是大家憧憬的目標(biāo)。這個(gè)話題是我比較感興趣的，因?yàn)槭俏覀儓F(tuán)隊(duì)正在使用的方案檐蚜，演講者先是列了一些數(shù)據(jù)魄懂，關(guān)于大家平時(shí)寫代碼的規(guī)范性和意識(shí)的統(tǒng)計(jì)，比如使用的工具（Sass）闯第、設(shè)計(jì)模式（BEM）市栗、CSS的命名規(guī)則等等。
重點(diǎn)是提到的一個(gè)金字塔：
自底向上咳短，不同層面填帽，從整個(gè)項(xiàng)目的高度去考量，一步步構(gòu)建出這個(gè)金字塔诲泌，看似簡單而順理成章盲赊，其實(shí)是需要很多的實(shí)踐和思考。
這部分內(nèi)容敷扫，應(yīng)該能和很多人腦子里的想法發(fā)生碰撞哀蘑。具體如下：
vendors：第三方插件? jquery plugin? inbox
components：組件
elements：元素/原子 ——分子（模塊）——機(jī)構(gòu)
base：預(yù)設(shè)樣式，全域樣式葵第、減輕各類設(shè)定負(fù)擔(dān)绘迁、前端和設(shè)計(jì)共同討論
browser：瀏覽器，reset差異
tools：開發(fā)資產(chǎn)卒密、積累缀台、成型方案
config：全域變量 、檔案路徑 哮奇、前端任務(wù) gulp等
這些環(huán)節(jié)膛腐，其實(shí)就是一個(gè)項(xiàng)目從無到有的過程，對于基礎(chǔ)階段的朋友來看鼎俘，可能有些費(fèi)勁兒哲身，但細(xì)細(xì)品味一定會(huì)有所悟，也可以借一步看下我前段時(shí)間寫過的另一篇文章明白了這些贸伐，你不僅僅能成長為優(yōu)秀的UI工程師會(huì)有一丟丟的幫助~
在談?wù)撨@個(gè)話題的過程中勘天，演講者插入了一大段不同角色和團(tuán)隊(duì)眼里的職能和所關(guān)心的側(cè)重點(diǎn)，比如：
1捉邢、只寫前端的脯丝，會(huì)更注意到什么
2、既懂設(shè)計(jì)又懂前端的伏伐，會(huì)是怎樣
3宠进、分工比較細(xì)致，團(tuán)隊(duì)協(xié)作藐翎，快節(jié)奏的砰苍，又是怎樣
這些能讓處在不同角色和團(tuán)隊(duì)的人感同身受潦匈。其中有一段說，好的設(shè)計(jì)師要考慮什么：自適應(yīng)布局赚导、圖片格式茬缩、狀態(tài)、頁面回饋吼旧、元素動(dòng)畫效果描述凰锡、WebUI 種類。我覺得這會(huì)令很多設(shè)計(jì)師汗顏圈暗，因?yàn)閾?jù)我所知掂为，相當(dāng)一部分的設(shè)計(jì)師是考慮不到這些看起來更偏向于開發(fā)范疇的東西，能考慮到這些员串，對前端或者UI開發(fā)來說應(yīng)該是很幸福的勇哗。
五、微信網(wǎng)頁重構(gòu)實(shí)踐 && SVG工程化與動(dòng)畫實(shí)踐——羅正燁寸齐、方瀟儀欲诺、倪栩生
這個(gè)話題講了SVG在項(xiàng)目中的應(yīng)用。SVG就像Grid一樣渺鹦，大家早有耳聞扰法，但應(yīng)用一直都不太普遍，像是一直在圈兒外打轉(zhuǎn)一般毅厚。
這個(gè)環(huán)節(jié)是由微信的三個(gè)同事來進(jìn)行的塞颁，基礎(chǔ)的東西不必贅述：
第一位主講了“什么是SVG，為什么用吸耿，怎么用”祠锣。這些，其實(shí)大家可以通過上網(wǎng)和書籍去查閱咽安。
SVG優(yōu)勢如圖：
大家都知道我們在實(shí)際開發(fā)中會(huì)遇到的痛點(diǎn)伴网，常常做了很多代碼層面的優(yōu)化，但到頭來頂不住幾張很大的圖片板乙，整個(gè)文件就顯得很大是偷，另外就是雖然CSS3在視覺和動(dòng)畫方面已經(jīng)做了很大的提升拳氢，但有些動(dòng)效實(shí)現(xiàn)起來還是很困難的募逞，故而，很多場景下馋评，SVG能成為一個(gè)很不錯(cuò)的替代方案放接。
第二位，主講了SVG的各種動(dòng)畫效果和大概的實(shí)現(xiàn)細(xì)節(jié)留特，比如：描線纠脾、變形玛瘸、路徑運(yùn)動(dòng)、圖案填充苟蹈、濾鏡糊渊。還通過簡單的代碼展示，介紹了是用哪些屬性如何實(shí)現(xiàn)的慧脱，對剛接觸或者還尚未開始接觸SVG的朋友應(yīng)該幫助蠻大的渺绒，它會(huì)告訴我們，那些很炫的動(dòng)效離我們并不遙遠(yuǎn)菱鸥，而且一點(diǎn)也不難宗兼，會(huì)讓人忍不住馬上去嘗試一番。當(dāng)然氮采，首先要掌握一些基礎(chǔ)殷绍，然后就是發(fā)揮自己的創(chuàng)意了。
第三位鹊漠，講了信息和網(wǎng)頁的關(guān)系主到，網(wǎng)頁是信息上下文的情景重現(xiàn)。
網(wǎng)頁特征：多平臺(tái)贸呢、可訪問镰烧、可用
信息在網(wǎng)頁中的形態(tài)
意識(shí)形態(tài)：元信息? 一個(gè)信息僅有一個(gè)意識(shí)形態(tài)，就是網(wǎng)頁結(jié)構(gòu)中獨(dú)一無二的內(nèi)容楞陷。
實(shí)體形態(tài)：標(biāo)記
表現(xiàn)形態(tài)：樣式
在我看來怔鳖，相當(dāng)于是對網(wǎng)頁內(nèi)容重新進(jìn)行了一下抽象和歸類的描述。
六固蛾、從矩陣走入 WebGL 世界——陳劍鑫
這個(gè)話題结执，我沒有學(xué)習(xí)過，也知道它沒那么簡單艾凯，這涉及到硬傷——數(shù)學(xué)和物理献幔，嗯，不是懂幾個(gè)屬性就能解決的趾诗，沒有多方面綜合而來的能力和技巧蜡感，做出來的東西也是不堪入目~所以，也沒有臨時(shí)抱佛腳恃泪，就權(quán)當(dāng)去現(xiàn)場感受一下它的魅力了郑兴。
拋出來幾個(gè)概念你們自己感受吧。
矩陣matrix transform基于矩陣實(shí)現(xiàn)效果 ? ? ? ? ? ?
歐拉角rotateXYZ ? ? ? ? ? ? ?
四元數(shù)rotate3D
演講者在現(xiàn)場也演示了幾個(gè)運(yùn)用這些技術(shù)做出來的炫酷效果贝乎，這是其中一個(gè)
七情连、CSS animation && CSS: The secret drawing tool——Wenting Zhang
來參會(huì)之前，就已經(jīng)看到過演講者的站點(diǎn)览效，但是說實(shí)話却舀，人大多數(shù)情況下都是懶的虫几，再加上精力有限，對很多東西會(huì)一掃而過挽拔，我所看到的網(wǎng)站和演講者自己演示出來的相比少了很多亮點(diǎn)辆脸，有很多“秘密”沒有發(fā)現(xiàn)，具體大家自己去發(fā)現(xiàn)吧~?cssicon.space
演講者以現(xiàn)場寫代碼的方式螃诅，寫出一個(gè)可愛的胡子來開場每强，像這樣
胡子本身并沒有多少難度，利用圓角和陰影以及偽元素和定位等州刽，大家都能畫出來空执，但是，當(dāng)這些東西穗椅，結(jié)合著CSS變量和calc函數(shù)辨绊，以及少量js的事件，便能產(chǎn)生出讓大家驚嘆的效果匹表，你會(huì)覺得门坷，原來看起來那么炫的效果其實(shí)這么簡單就能做出來。
我的感受是袍镀，畫icon是個(gè)簡單的事默蚌，但如果畫了512個(gè)，還給它們安了個(gè)家苇羡，不僅如此绸吸，還特地花了一些功夫，增加了非常贊的體驗(yàn)设江，就是一件很不簡單的事~
后記
期待了幾個(gè)月锦茁，提前一天抵達(dá)廣州，帶著本子做了一堆筆記叉存，事實(shí)證明不虛此行码俩。或許因?yàn)閭€(gè)人工作的局限歼捏，或許因?yàn)閼卸韪宕妫覀兛倳?huì)有一些東西尚未發(fā)現(xiàn)，然后一步步地走入了技術(shù)和心理的雙重瓶頸瞳秽，有人就覺得迷茫瓣履，不知道下一步該把精力放在哪里，這個(gè)時(shí)候寂诱，能夠借助一些更加優(yōu)秀或者比我們做了更多嘗試的人的視角拂苹，去看一看未知的區(qū)域安聘，對我們每個(gè)人都是個(gè)激勵(lì)痰洒。
嘗試更多東西瓢棒，找到更多精彩，這不正是我們編程人員工作的樂趣和初心么~
感謝大會(huì)的組織者和所有工作人員丘喻，期待下一次的精彩脯宿。
另附一篇無意間看到的CSS二十周年專訪?CSS: It was twenty years ago today — an interview with H?kon Wium Lie
