不久之前售躁，我做了一次公司內(nèi)部的分享，但時(shí)間有限墨微，很多東西沒能展開道媚。這篇文章算是文字版，當(dāng)然翘县，不僅如此最域，還會(huì)增加一些新的東西，下面正文锈麸。

話題由來

首先镀脂，技術(shù)是沒有界限的，一個(gè)網(wǎng)站忘伞，一個(gè)人可以完成狗热，分成三個(gè)人也可以钞馁，分成五個(gè)人也可以，比如：交互設(shè)計(jì)匿刮、視覺設(shè)計(jì)僧凰、UI開發(fā)、前端開發(fā)熟丸、后臺(tái)開發(fā)训措。所以，就會(huì)出現(xiàn)不同團(tuán)隊(duì)的技術(shù)分工不同光羞。有多種分工會(huì)怎樣呢绩鸣？各自在自己的領(lǐng)域挖得更深、做得更精纱兑，但問題在于呀闻，對(duì)于另外一個(gè)本來也應(yīng)該了解或者掌握的相鄰領(lǐng)域知之甚少，這是精細(xì)分工的弊端潜慎。

再者捡多，最近兩年，網(wǎng)站開發(fā)中最火的莫過于前端開發(fā)铐炫，因?yàn)橐苿?dòng)互聯(lián)網(wǎng)的大熱垒手，因?yàn)楦鞣N工具和框架、庫(kù)的層出不窮倒信，因?yàn)镹ode.js對(duì)后端領(lǐng)域的入侵科贬，仿佛一下子JavaScript變得無比的迷人和強(qiáng)大。但同時(shí)鳖悠，不論是行業(yè)會(huì)議還是博客文章榜掌，都很少看到有人在談?wù)揅SS方面的東西，當(dāng)然乘综，還是有少數(shù)人在堅(jiān)持做的憎账，后面會(huì)推薦給大家。

所以瘾带，在很多人不知UI開發(fā)為何物，以及很多人對(duì)CSS和頁(yè)面開發(fā)的認(rèn)識(shí)有失妥當(dāng)?shù)那闆r下熟菲，就有了這個(gè)話題看政，談的更多不是代碼，而是環(huán)境抄罕、方向以及方法論允蚣。

結(jié)構(gòu)大體如下：

1、認(rèn)識(shí)UI開發(fā)

2呆贿、重新強(qiáng)調(diào)Web標(biāo)準(zhǔn)

3嚷兔、CSS設(shè)計(jì)模式的思考

4森渐、工具，讓開發(fā)更敏捷

5冒晰、怎樣成為一名優(yōu)秀的UI開發(fā)

始于開發(fā)同衣，但不止于開發(fā)。

認(rèn)識(shí)UI開發(fā)

UI開發(fā)壶运，之前叫網(wǎng)頁(yè)重構(gòu)耐齐，現(xiàn)在仍有不少人在這么叫，大家看到了知道是什么就好蒋情。簡(jiǎn)單來說埠况，職責(zé)就是還原視覺設(shè)計(jì)稿，使用HTML和CSS把視覺稿做成網(wǎng)頁(yè)棵癣。它的概念辕翰，可能跟你印象中的代碼重構(gòu)相沖突，那么來看看為什么叫網(wǎng)頁(yè)重構(gòu)狈谊。

“首先喜命，騰訊的這個(gè)網(wǎng)頁(yè)重構(gòu)崗位起名的原因就是大家說的因?yàn)椤毒W(wǎng)站重構(gòu)》一書。最早是叫網(wǎng)站策劃與制作的畴。工作內(nèi)容包含產(chǎn)品交互稿渊抄，網(wǎng)頁(yè)（HTML和CSS）本身，JavaScript丧裁，flash护桦。重構(gòu)的工作定位也很好理解，設(shè)計(jì)理念還原煎娇。所以在騰訊重構(gòu)是在設(shè)計(jì)通道的二庵，而前端是開發(fā)通道的。術(shù)業(yè)有轉(zhuǎn)攻缓呛，劃分開兩個(gè)崗位是為了明確這一專多長(zhǎng)的“一尨呦恚”而已。"

——Twinsen Liang（梁璟彪）

“『重構(gòu)』并不只是寫CSS和HTML哟绊，而是規(guī)劃網(wǎng)頁(yè)的實(shí)現(xiàn)方式因妙。歷史背景上，從表格布局的思維轉(zhuǎn)換到樣式布局的思維票髓，是一個(gè)推翻重來的過程攀涵。是對(duì)舊有工作流程、分工的一種打破洽沟，是一種進(jìn)化以故。是連接感性設(shè)計(jì)師和理性程序員的橋梁，是支持站點(diǎn)更美裆操、更友好怒详、更健壯的基石之一炉媒。”

——ghostzhang（張癸鑫）

“借用了軟件開發(fā)中的著名書籍《Refactoring》的中文翻譯《重構(gòu)》來影射當(dāng)時(shí)國(guó)內(nèi)網(wǎng)站需要用類似的方式來改變網(wǎng)站底層的本質(zhì)±ニ福現(xiàn)在來看吊骤，對(duì)網(wǎng)站進(jìn)行重構(gòu)更將是一個(gè)持續(xù)不斷的過程，范圍也超脫了單純的css善玫，還包括javascript水援、ajax、flash等等所有前端技術(shù)和非技術(shù)的集合體茅郎∥显”

——王宗義 《網(wǎng)站重構(gòu)》譯者之一

由以上三位行業(yè)前輩的話，不難看出UI開發(fā)是做什么的系冗。但隨著時(shí)代和技術(shù)的變遷奕扣，需要掌握的知識(shí)和注意事項(xiàng)也在發(fā)生變化。

設(shè)備：以前主要是PC掌敬，很多時(shí)候只需要寫一個(gè)固定的布局就好惯豆，但現(xiàn)在我們可能需要做出在PC、筆記本奔害、平板電腦楷兽、各種安卓/iphone都能正常展示的網(wǎng)頁(yè)。技術(shù)方案總是要與時(shí)俱進(jìn)的华临，就出現(xiàn)了em芯杀、rem、flex雅潭、百分比揭厚、媒體查詢、vh/vw扶供、calc等等筛圆。

瀏覽器：這是目前為止網(wǎng)頁(yè)存在的唯一環(huán)境，以前椿浓，最大的麻煩是低版本IE的各種奇怪bug√現(xiàn)在，移動(dòng)互聯(lián)網(wǎng)的興起扳碍，讓我們從IE的坑里跳了出來提岔，卻發(fā)現(xiàn)掉到了另外一個(gè)更大的坑。瀏覽器種類更多左腔，還有各種版本的手機(jī)系統(tǒng)唧垦，還有微信捅儒，很多時(shí)候液样，這些問題需要我們做更多的兼容甚至切換方案振亮。

網(wǎng)絡(luò)環(huán)境：網(wǎng)站開發(fā)人員很在乎的一點(diǎn)就是性能，它直接決定了用戶體驗(yàn)鞭莽，從UI開發(fā)角度坊秸，就是文件加載和執(zhí)行，更少的文件請(qǐng)求澎怒，更小的文件大小褒搔，更高性能的屬性和方法。移動(dòng)設(shè)備的網(wǎng)絡(luò)環(huán)境是不穩(wěn)定和不確定的喷面，可能2G星瘾，可能3G，可能4G惧辈，可能wifi琳状，可能沒信號(hào)。所以盒齿，讓性能更優(yōu)是重要且必要的念逞。

具體來說，UI開發(fā)可以分成兩大塊：

視覺體驗(yàn)：布局边翁、文本翎承。布局的范疇是，左右還是上下符匾，寬高叨咖，背景，邊框等待讳。文本的范疇是芒澜，字體種類、大小创淡、顏色痴晦、粗細(xì)等，font屬性里應(yīng)有盡有琳彩，后來又加進(jìn)來一個(gè)font-face的技能包誊酌。還有圖片，圖片大小的控制露乏，格式的選擇碧浊，以及要不要使用圖片，CSS3的強(qiáng)大瘟仿，除了表現(xiàn)在布局箱锐，還表現(xiàn)在視覺，比如劳较，圓角驹止、陰影浩聋、漸變、濾鏡臊恋、遮罩等等衣洁。

交互體驗(yàn)：你可能會(huì)說交互不是js的事嗎？其實(shí)不然抖仅，js只是響應(yīng)行為坊夫，行為有什么樣的表現(xiàn)，依然屬于UI范疇撤卢，比如：鼠標(biāo)懸停环凿、點(diǎn)擊態(tài)，移動(dòng)端的觸摸態(tài)放吩，點(diǎn)擊區(qū)域拷邢，層級(jí)，容器大小屎慢、位置變化的過渡瞭稼，顏色變化的過渡，動(dòng)畫等等腻惠。

開個(gè)小灶：

突破思維界限——廣義的盒

上面說過环肘，我們會(huì)面臨著一些自適應(yīng)和性能的挑戰(zhàn)，那么集灌，就需要有應(yīng)對(duì)方法悔雹。常規(guī)的盒模型只有margin、padding欣喧、border腌零、content。

在實(shí)際的應(yīng)用中唆阿，只看到這些是不夠的益涧，因?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)的創(chuàng)意越來越花哨，元素的排列不總是那么規(guī)規(guī)矩矩驯鳖，橫平豎直闲询，形狀也不規(guī)則，視覺效果可以非常豐富浅辙，拿到視覺稿之后扭弧，就要對(duì)它進(jìn)行解構(gòu)，有了CSS3的強(qiáng)大武器之后记舆，我們能分得很細(xì)鸽捻，一般的圓角、背景漸變/裁切、陰影御蒲、縮放等都能用CSS3來實(shí)現(xiàn)伊磺，一些裝飾性的元素，可以用偽元素實(shí)現(xiàn)删咱，如此分析規(guī)劃一番之后，就能夠知道豪筝，怎樣用最少的圖片痰滋、最少的容器，做出更合理也更健壯的頁(yè)面续崖。

當(dāng)然敲街，要做到以上這些，需要這三點(diǎn)：夠廣的知識(shí)面严望、對(duì)技術(shù)細(xì)節(jié)更精確的把控多艇、將視覺元素和技術(shù)實(shí)現(xiàn)之間相聯(lián)系的能力。

這里可以推薦一本書給大家像吻，是由CSS魔法翻譯的《CSS揭秘》峻黍，里面展示了一些CSS的高級(jí)使用技巧，能幫助大家拓寬思維拨匆，找到更多樂趣和解決方案姆涩。

重新強(qiáng)調(diào)Web標(biāo)準(zhǔn)

Web標(biāo)準(zhǔn)，是個(gè)老生常談的話題惭每，給多數(shù)人的印象就是一堆堆的英文骨饿，足以將任何人送入夢(mèng)鄉(xiāng)。不過也有同行朋友花了很大心血翻譯了一部分層疊樣式表2級(jí)修訂版1（CSS 2.1）規(guī)范可以給大家作為參考台腥，但也不能太依賴它宏赘，就我本人所看，有些地方翻譯得也是不準(zhǔn)確的黎侈，說到底察署，技術(shù)這個(gè)東西，還是理論加上實(shí)踐峻汉，百煉方可成鋼~

我們說Web標(biāo)準(zhǔn)箕母，是在說什么？其實(shí)就是對(duì)網(wǎng)頁(yè)開發(fā)者的一些建議俱济，在使用技術(shù)的過程中嘶是，更科學(xué)，更合理的建議蛛碌。遵守了它們之后聂喇，更專業(yè)，更不容易出錯(cuò)，能將語(yǔ)言的原生屬性和功能發(fā)揮到極致希太。

好處大致有如下四點(diǎn)：

1克饶、更好的兼容，讓網(wǎng)頁(yè)在不同瀏覽器和設(shè)備當(dāng)中正常瀏覽

2誊辉、結(jié)構(gòu)表現(xiàn)分離矾湃，更易維護(hù)，更靈活

3堕澄、改善無障礙性邀跃，使網(wǎng)站在觸摸或者鍵盤操作時(shí)可用，易用

4蛙紫、利于SEO拍屑，比如關(guān)鍵字的書寫，標(biāo)題的使用等

由于瀏覽器比較大程度的容錯(cuò)性坑傅，加上人為的忽視僵驰，并不是所有人都會(huì)去遵從標(biāo)準(zhǔn)來選擇標(biāo)簽和屬性，人們對(duì)于JS唁毒、CSS蒜茴、HTML的關(guān)注度和在意程度似乎是逐級(jí)遞減的，即使在UI工程師當(dāng)中浆西，也普遍“重CSS輕HTML”矮男，這顯然是不妥的，故而室谚，不僅需要重新強(qiáng)調(diào)web標(biāo)準(zhǔn)毡鉴，更需要大家堅(jiān)持去踐行web標(biāo)準(zhǔn)。

CSS設(shè)計(jì)模式的思考

可以先從一個(gè)事故講起秒赤，剛?cè)胄械臅r(shí)候猪瞬，經(jīng)歷過一次不大不小的事故，因?yàn)閯傞_始做入篮，很不熟陈瘦，做一個(gè)簡(jiǎn)單的首頁(yè)也要兩天左右，當(dāng)時(shí)的情況是潮售，剛好完成一個(gè)頁(yè)面痊项，突然右下角看到有報(bào)錯(cuò)，說由于系統(tǒng)原因文件已損壞酥诽，一下就慌了神鞍泉，喊主管過來看看怎么回事，他馬上幫我把文件另存起來肮帐，可是最后發(fā)現(xiàn)還是沒用咖驮，文件還是空的边器，也就是說，當(dāng)天我的工作基本白做了托修，極其沮喪忘巧，但是沒辦法，重做睦刃，那時(shí)我每次拿到一個(gè)視覺稿砚嘴，都是上來就做，邊寫代碼涩拙，邊切圖际长，邊刷新看效果，但是這次事故打亂了原本的節(jié)奏吃环，切圖和寫HTML都省了，就是對(duì)著一個(gè)凌亂的頁(yè)面直接寫CSS洋幻，我可不想再花兩天時(shí)間郁轻，必須有所規(guī)劃和調(diào)整。

畢竟已經(jīng)寫過一遍文留，對(duì)每個(gè)部分都還有大致的印象好唯，于是，就從頭部燥翅，banner骑篙，產(chǎn)品列表，側(cè)邊欄森书，底部靶端，這么一路寫下來，因?yàn)樗悸非逦莞啵兴?guī)劃杨名，這次復(fù)盤只用了一個(gè)多小時(shí)就完成了，寫完之后猖毫，對(duì)著自己寫出的代碼台谍，有一種說不出的滿足，也是從那一次開始吁断，我的編碼思想慢慢發(fā)生了改變趁蕊，這或許是命運(yùn)的安排~

回歸正題，什么是模式仔役，就是一套應(yīng)對(duì)問題的方案掷伙，從實(shí)踐得來，從解決問題得來又兵。所以炎咖，很多新手在面對(duì)設(shè)計(jì)模式的時(shí)候，會(huì)一頭霧水，不知所以然乘盼，為什么要那么做升熊？沒有碰到過的問題，自然就不知道為什么要解決它绸栅。

那么级野，設(shè)計(jì)模式能解決什么問題？——CSS本身語(yǔ)法簡(jiǎn)單粹胯、限制少蓖柔、編程能力弱。

代碼是死的风纠，人是活的况鸣，無序的東西，我們可以開動(dòng)腦筋讓它變得有序竹观。比如：

1镐捧、怎樣避免樣式?jīng)_突

2、怎樣避免代碼混亂難維護(hù)

3臭增、內(nèi)容和表現(xiàn)分離

4懂酱、怎樣能讓代碼易拓展、易移植

大致先列這四點(diǎn)誊抛，如果這四點(diǎn)處理不好列牺，就別怪坑多，那都是自己給自己挖的~你可能會(huì)問我怎么避免拗窃，我只能說瞎领，有些坑必踩不可，有些坎必然要過随夸。

你應(yīng)該見過這幾種設(shè)計(jì)模式默刚，并且可能已經(jīng)在項(xiàng)目中使用：

OOCSS——結(jié)構(gòu)和皮膚分離，容器和內(nèi)容分離

SMACSS——Base（基礎(chǔ)）逃魄、Layout（布局）荤西、Module（模塊）、State（狀態(tài)）伍俘、Theme（主題）

Meta CSS——預(yù)先定義好的邪锌、粒度小，樣式和結(jié)構(gòu)癌瘾、內(nèi)容無關(guān)

第一種觅丰，是為了把表現(xiàn)和內(nèi)容分離，比如妨退， 一個(gè)新聞列表妇萄，一個(gè)產(chǎn)品列表蜕企，看起來都是列表，但既不能命名為new-list冠句，也不能命名為product-list轻掩，因?yàn)樗鼈兪遣荒芟嗷ミm用的。所以懦底，重點(diǎn)就在于唇牧，把UI表現(xiàn)和具體內(nèi)容分開來，相互不影響聚唐，哪里需要就可以放到哪里丐重，可以合作完成很多事情，其他特有的部分杆查，可以通過增加擴(kuò)展類來實(shí)現(xiàn)扮惦，但也要注意不宜泛濫，如果添加了過多的類亲桦，就要重新分析一下規(guī)劃的是否合理崖蜜。

第二種，關(guān)注點(diǎn)在于整站的規(guī)劃烙肺，這就要求有更長(zhǎng)遠(yuǎn)的眼光纳猪，基礎(chǔ)和布局樣式可能是在網(wǎng)站的很多地方都用到氧卧，單獨(dú)提取出來桃笙，模塊是為了保持清晰和獨(dú)立性，狀態(tài)這一點(diǎn)就需要對(duì)需求的使用場(chǎng)景有較為完整的了解沙绝，一個(gè)按鈕不只是一個(gè)按鈕搏明，可能是幾種狀態(tài)，暫時(shí)的一個(gè)圖標(biāo)闪檬，可能是將來的一堆圖標(biāo)星著。

第三種，是把一些大家都常用或者是你自己通過評(píng)估粗悯，某個(gè)項(xiàng)目里有很多地方會(huì)用的規(guī)則提取出來虚循，比如：同一種顏色的字體，同一種間距样傍，同一類布局等等横缔，是一些粒度比較細(xì)的東西。

設(shè)計(jì)模式不止上面這三種衫哥，只是拿出來給大家舉例子茎刚。我們常會(huì)聽到一句話，借鑒思想撤逢，怎樣借鑒思想膛锭？任何一種框架粮坞，都是某種思想的一個(gè)具體實(shí)現(xiàn)，是一個(gè)樣例初狰，就像以上三者莫杈，也各有自己的優(yōu)勢(shì)和短板。當(dāng)我們知道它們用什么方法解決了什么問題跷究，就可以不拘泥于任何一種姓迅，融會(huì)貫通，皆可為我所用俊马，正所謂“無招勝有招”丁存。

工具，讓開發(fā)更敏捷

日常工作中柴我，很多朋友會(huì)受困于一些煩惱解寝，其中一個(gè)就是效率低下。在我看來艘儒，編程從來都應(yīng)該是一件充滿樂趣和創(chuàng)意的事情聋伦，如果每天都在疲于做很多重復(fù)的、純體力的事情界睁，就太浪費(fèi)了觉增。故而，我們可以在工作的各個(gè)環(huán)節(jié)去進(jìn)行改進(jìn)翻斟。

對(duì)于UI開發(fā)逾礁，可以從以下幾方面去著手：

圖片處理：切圖、壓縮访惜、格式轉(zhuǎn)換

代碼編輯器：快捷鍵嘹履、代碼模板、插件

代碼處理器：格式化债热、排序砾嫉、壓縮、預(yù)處理器等

自動(dòng)化構(gòu)建工具：grunt窒篱、gulp焕刮、webpack、fis等

簡(jiǎn)單來說就是墙杯，快速切圖配并，更快的寫出優(yōu)雅的代碼，自動(dòng)化處理寫完代碼之后的所有事情霍转。

當(dāng)然荐绝，現(xiàn)在可供使用的工具多種多樣，構(gòu)建工具可以做的避消，瀏覽器插件也可以低滩，在線工具也可以召夹，編輯器插件還可以，而且有些工具的學(xué)習(xí)成本是不低的恕沫，每個(gè)人都有自己習(xí)慣用的工具监憎，所以，你可能又會(huì)犯選擇困難癥了婶溯。

其實(shí)大可不必鲸阔，所有工具需要做的都是類似的事情，差異在于處理方式和細(xì)節(jié)迄委，所以褐筛，不必糾結(jié)，有興趣可以多嘗試叙身，不想用新的也可以繼續(xù)用原先自己最拿手的渔扎。

如果你還不知道到哪里找工具，可以來這兒看看醉牛前端嗯信轿，我做的晃痴，雖簡(jiǎn)單，但實(shí)用~

怎樣成為一名優(yōu)秀的UI工程師财忽？

最近幾天倘核，有一篇文章，叫《既然寫CSS很容易即彪，那為什么大家還是把CSS寫的那么爛呢紧唱？》，個(gè)人認(rèn)為里面的干貨并不多祖凫，但它再次引發(fā)了一些前端人的思考琼蚯，大家都覺得它容易酬凳，為什么容易寫得爛惠况？

我曾在知乎上回答過一個(gè)類似的問題——“寫CSS，怎么知道自己的代碼很爛宁仔？”稠屠，答案簡(jiǎn)單羅列如下：

1、當(dāng)你的單個(gè)CSS文件很大翎苫，代碼很亂的時(shí)候

2权埠、當(dāng)你不得不為增加新的內(nèi)容而隨便塞了一個(gè)新的元素，并隨意給它命了個(gè)名的時(shí)候

3煎谍、當(dāng)你使用了很多不必要的規(guī)則的時(shí)候攘蔽，比如position：absolute；display：block呐粘；

4满俗、當(dāng)你忽略了繼承转捕，在反復(fù)定義font-size、color等可繼承屬性的時(shí)候

5唆垃、當(dāng)你忽略了復(fù)用模塊的規(guī)劃五芝，在重復(fù)寫一個(gè)相似度達(dá)到80%的兩塊內(nèi)容的時(shí)候

6、當(dāng)你習(xí)慣于用一些性能很差的屬性和很脆弱的結(jié)構(gòu)的時(shí)候

暫列這6點(diǎn)辕万，不展開說了枢步，有疑惑，有需要渐尿，咱再聊醉途。那么怎么成為一名優(yōu)秀的UI工程師呢？可以從以下三點(diǎn)來說：

工匠精神

關(guān)鍵詞：還原砖茸、探索结蟋、積累、跟進(jìn)

還原：多體現(xiàn)在細(xì)節(jié)渔彰，比如：陰影嵌屎、對(duì)齊、行距恍涂，中英文字符等宝惰，很多時(shí)候，用戶再沧，包括我們開發(fā)者本人尼夺，都難以看出這些細(xì)微差別，但往往逃不過細(xì)心設(shè)計(jì)師的法眼炒瘸，而且的確會(huì)對(duì)整體的視覺效果有影響淤堵，這就需要我們對(duì)自己提出更嚴(yán)格的要求，也更能體現(xiàn)專業(yè)度顷扩。

探索：平時(shí)我們都在不停的忙碌拐邪，做需求，做項(xiàng)目隘截，好不容易完成了扎阶，稍微休息一下，接著做下一個(gè)婶芭，長(zhǎng)此反復(fù)东臀，就沒時(shí)間去探索和嘗試新的技術(shù)和工具，進(jìn)而沒有空間去改進(jìn)自己的工作流程和技術(shù)方案犀农，就會(huì)讓自己的職業(yè)技能儲(chǔ)備處于停滯不前的狀態(tài)惰赋，所以，保持熱情呵哨，堅(jiān)持探索很重要赁濒。

積累：我們?cè)陧?xiàng)目中難免會(huì)碰到各種問題贵扰，同時(shí)，也會(huì)不經(jīng)意間碰到某種很好的解決方案流部，可能是一種思路戚绕，可能是一個(gè)代碼段，這個(gè)時(shí)候就需要及時(shí)的積累起來枝冀，否則舞丛，每次遇到都像是第一次遇到一樣，這都是成本果漾。

跟進(jìn)：新事物跟進(jìn)球切，在很多新的技術(shù)或者屬性、方法出現(xiàn)之后绒障，大家的節(jié)奏都是先欣喜后無奈吨凑，因?yàn)榭赡苌形窗l(fā)布正式版本或者瀏覽器尚未支持，然后就直接放棄去嘗試和研究户辱。溫總理曾說過這樣一句話“沒有程序的民主鸵钝，就沒有實(shí)質(zhì)的民主”，如果套用到這里來庐镐，可以改成“沒有新的嘗試恩商，就不會(huì)有新的可行性方案”。很多時(shí)候必逆，面對(duì)一個(gè)需求怠堪，我們會(huì)習(xí)慣性的面露難色，然后說“這個(gè)做不了”名眉，其實(shí)有些不是實(shí)現(xiàn)不了粟矿，只是需要稍微多花些心思，或者是我們認(rèn)知的局限损拢，不知道有方法可以輕松實(shí)現(xiàn)陌粹，除了關(guān)乎項(xiàng)目的質(zhì)量，還關(guān)系到技術(shù)選型探橱，當(dāng)手里的武器多了申屹，可選范圍才廣绘证，才能舒舒服服的去選擇最優(yōu)解隧膏。

更多可能性

關(guān)鍵詞：創(chuàng)造性、可行性

創(chuàng)造性：我們已經(jīng)見過不少人用CSS3的技術(shù)做出各種以前不敢想象是CSS能做出來的東西嚷那，比如這兩個(gè)18個(gè)你可能不相信是用CSS制作出來的東西胞枕、one-div，所以魏宽，新方法的出現(xiàn)腐泻，能給我們提供更多可能性决乎，當(dāng)然，你可能會(huì)說派桩，這些都是一些奇技淫巧构诚，在真實(shí)項(xiàng)目中并不實(shí)用，其實(shí)他們的存在铆惑，除了讓我們感受到技術(shù)的趣味性范嘱，主要是給了我們啟發(fā)，幫我們打開一扇門员魏，至于能創(chuàng)造出的是什么丑蛤，就看我們自己了。

可行性：除了玩兒技術(shù)“自嗨”撕阎，實(shí)際工作中受裹，技術(shù)的施展空間還是要跟項(xiàng)目緊密結(jié)合的，產(chǎn)品經(jīng)理和設(shè)計(jì)師的想法是天馬行空的虏束，很多時(shí)候棉饶，我們并不只是一個(gè)“聽話做事”的執(zhí)行者，要充分發(fā)揮我們的專業(yè)性和主動(dòng)性镇匀，某個(gè)idea到底能不能做砰盐，能實(shí)現(xiàn)到什么程度，需要多少成本坑律，如果在早期能夠溝通好岩梳，就能避免到了開發(fā)過程中或者驗(yàn)收的時(shí)候才有這樣那樣的問題。

最佳實(shí)踐

關(guān)鍵詞：預(yù)見性晃择、最佳實(shí)踐

預(yù)見性：設(shè)計(jì)師給過來的視覺稿是靜態(tài)的冀值，內(nèi)容是確定的萎津，實(shí)際上線了之后糟需，內(nèi)容都是不確定的消恍，所以凳谦，必須要有更多的考慮噪服，才能盡可能的在前期避免掉一些不應(yīng)該出現(xiàn)的問題克握，比如：文字溢出截?cái)嗨健⑽淖终坌惺铝汀?nèi)容自適應(yīng)坤次、內(nèi)容超出滾動(dòng)等古劲。

最佳實(shí)踐：有很多介紹最佳實(shí)踐的文章，基本都是一些技術(shù)方面的通用注意事項(xiàng)缰猴，我想說的是产艾，沒有脫離項(xiàng)目的最佳實(shí)踐，只有做了，踩了坑了闷堡，才會(huì)更加知道怎樣做在特定場(chǎng)景下是最好的隘膘。比如：為避免結(jié)構(gòu)變動(dòng)引起的樣式繼承沖突，盡量不要使用元素選擇器杠览。因?yàn)閳D標(biāo)在網(wǎng)站的每個(gè)地方和其他元素的相對(duì)位置是不確定的弯菊，所以，只定義表現(xiàn)踱阿，不定義布局误续。通用組件的外框是確定的，內(nèi)容是不定的扫茅，所以蹋嵌，只定義外圍，不定義內(nèi)容葫隙。等等栽烂，都是在實(shí)際項(xiàng)目中才能切身體會(huì)。

寫在最后

有不少人問頁(yè)面重構(gòu)是做什么的恋脚，也有人問腺办，騰訊為什么把JS和CSS分開，這樣做的利弊是什么糟描？其實(shí)在文章的開頭已經(jīng)簡(jiǎn)單的說了怀喉，有利有弊。但是就目前前端圈的發(fā)展來看船响，其實(shí)是弊大于利的躬拢，但職位是死的，人是活的见间，如果想要學(xué)習(xí)聊闯，想要自我突破，怎樣都擋不住米诉。我們可以借張克軍我的前端工程師之路的一段來看一下前端大概的發(fā)展路徑：

2002?2005年菱蔬，網(wǎng)頁(yè)制作，從業(yè)者要求：手快史侣、像素級(jí)還原拴泌、全面兼容

2005?2009年，網(wǎng)站開發(fā)工程師惊橱，從業(yè)者要求：網(wǎng)頁(yè)重構(gòu)蚪腐、性能、SEO李皇、jQuery（及同類）

2009?2013年削茁，前端工程師宙枷，從業(yè)者要求：MV＊掉房、AMD/CMD茧跋、SCSS（及同類）、Grunt（及同類）

2013?2016年卓囚，前端工程師瘾杭，從業(yè)者要求：全棧、ES5/6哪亿、CSS3粥烁、RWD（響應(yīng)式開發(fā)）、混合開發(fā)（所有要求向前兼容蝇棉，不包含特殊領(lǐng)域的特別要求）

從以上可以看出讨阻，不論是從市場(chǎng)需求還是技術(shù)領(lǐng)域，對(duì)前端工程師的要求都是越來越高篡殷，需要掌握更多實(shí)戰(zhàn)技能钝吮，寫出適應(yīng)多終端的頁(yè)面或者應(yīng)用，更像是一個(gè)全能型選手板辽。當(dāng)然奇瘦，大家也不用被嚇到，千里之行始于足下劲弦，所有牛人都是從零開始一步步的走過來耳标，不需要盲目的比較或者給自己徒增壓力，只要你喜歡它邑跪，堅(jiān)持學(xué)習(xí)和進(jìn)步次坡，定能有所成。

在如今這個(gè)讓人眼花繚亂的前端世界里画畅，不論你是新手還是半生不熟贸毕，都會(huì)對(duì)選擇有所迷茫，語(yǔ)言的迷茫夜赵，框架明棍、工具的迷茫，書本的迷茫寇僧，公司的迷茫摊腋，怎樣不迷茫？唯有行動(dòng)起來嘁傀，走近它兴蒸，熟悉它。職業(yè)打拼的過程细办，就是在不斷探索橙凳、積累蕾殴、提升自己對(duì)事物的認(rèn)知的過程。

《生命中不能承受之輕》里有這么一句話岛啸，“人類一思考钓觉，上帝就發(fā)笑”。有人說是嘲笑坚踩，有人說是鼓勵(lì)荡灾，我更愿意相信是鼓勵(lì)，當(dāng)我們?cè)谧鍪碌耐瑫r(shí)瞬铸，能夠通過自己過往的經(jīng)驗(yàn)和思考批幌，使得以后做同樣事情的時(shí)候更加高效和聰明，這就是我們能夠越來越優(yōu)秀的理由嗓节。

最后推薦幾位在CSS方面頗有研究的大牛荧缘，大漠、林小志拦宣、CSS魔法截粗、張?chǎng)涡?/a>，我相信很多人已經(jīng)熟識(shí)恢着，高手肯定不止這四位桐愉，但是，這四位是近年來在CSS領(lǐng)域最為高產(chǎn)掰派、最有建樹从诲，給大家?guī)碜疃鄮椭男袠I(yè)前輩，可以重點(diǎn)關(guān)注下靡羡。

終于把許諾大家的文章版給完成了系洛，很長(zhǎng)，要吐血了~希望能夠?qū)δ銈冇兴鶐椭?/p>

心血之作略步，未經(jīng)允許描扯，謝絕轉(zhuǎn)載，謝謝趟薄。