摘要：所以，現(xiàn)在的我是一個(gè)只會(huì)不會(huì)寫的偽前端。技術(shù)升華環(huán)節(jié)如何理解你的微博簡(jiǎn)介一個(gè)只會(huì)寫不會(huì)寫的偽前端工程師你覺(jué)得和學(xué)習(xí)起來(lái)各有什么難點(diǎn)呢微博我好久沒(méi)去碰了，其實(shí)現(xiàn)在應(yīng)該是寫一個(gè)連都不會(huì)寫，更不會(huì)寫的偽前端工程師。

上周沒(méi)和大家見(jiàn)面，是去邀請(qǐng)大佬來(lái)訪談了(///▽///)社區(qū)訪談以來(lái)，清蒸邀請(qǐng)都是些大家相對(duì)熟悉的面孔，比如公子，比如邊城大大，這次的訪談嘉賓，大家可能有些陌生，他主要出沒(méi)在 css 標(biāo)簽下，有請(qǐng)專注 css 三十年不會(huì) js 的林小志 - @林小志 。

小志，和之前的小伙伴一樣，和大家簡(jiǎn)單地打個(gè)招呼吧(￣?￣)從簡(jiǎn)就好

（長(zhǎng)篇大論的開(kāi)場(chǎng)）自我介紹是我最不擅長(zhǎng)的，一直以來(lái)都不知道自己應(yīng)該如何介紹自己比較好。想來(lái)想去，我就隨便說(shuō)一下吧。工年已經(jīng)有一些年頭了，但是能力卻一直都是一般般，在 2009 年的時(shí)候曾“無(wú)知”掛名在某人的一本書中，寫了最后一頁(yè)內(nèi)容，事后看到書中內(nèi)容跟自己寫 CSS 的方式、思路有所出路，于是年少輕狂的我就出口要自己寫一本。最后用了半年多的時(shí)間在晚上、在周末寫完了《CSS那些事兒》這本書。

有朋友問(wèn)我為什么用這個(gè)書名，其實(shí)這個(gè)書名并不是我起的，我也沒(méi)去考慮書名的問(wèn)題，但是我很認(rèn)真很嚴(yán)肅地表態(tài)，書名中不許出現(xiàn)“div+css”、“X 日精通”以及“精通”等字眼。最后這本書滿足了我的虛榮心之后，因?yàn)殇N量不佳，被出版社收回銷毀（據(jù)說(shuō)）。

一個(gè)不小心從要介紹自己扯到了自己曾經(jīng)的一本書，思緒又飄了。其實(shí)認(rèn)識(shí)我的朋友都知道我一直以來(lái)都是在寫 CSS，大概什么時(shí)候開(kāi)始寫呢，應(yīng)該是從 07 年或者 08 年吧，具體我也不記得了。雖然之前有過(guò)接觸 CSS，但并未覺(jué)得用 CSS 布局有什么好的，也沒(méi)在意，后來(lái)無(wú)意間加入一個(gè) QQ 群，在群里各位老師的帶動(dòng)下，我開(kāi)始認(rèn)真接觸。遇到問(wèn)題不斷摸索，然后跟大家討論交流，最后也就這樣混下來(lái)了。
接下來(lái)幾年的工作中，雖然一直都是偏重于 CSS 方面，但其他的偶爾還是會(huì)接觸一下，去玩一下。所以，現(xiàn)在的我是一個(gè)只會(huì) CSS 不會(huì)寫 JS 的“偽”前端。然而，可怕的是，當(dāng)現(xiàn)在的 flex 以及 rem 等一系列新的 CSS 屬性出現(xiàn)之后，我發(fā)現(xiàn)，我其實(shí)連 CSS 都不會(huì)寫了。

【“愛(ài)·花苑”花店賣花、送花的】是你某個(gè)社交平臺(tái)的簡(jiǎn)介，愛(ài)·花苑 是你自己開(kāi)的花店嗎？為什么要想開(kāi)個(gè)花店呢？

“愛(ài)·花苑”是我老婆開(kāi)的花店，而我只是在利用網(wǎng)絡(luò)以及平時(shí)周末的時(shí)間幫忙一下。開(kāi)一家花店，每天身處在花叢中，給人的感覺(jué)似乎是很向往的生活。但，身為切圖仔的我在花店里打工的那段時(shí)間感受來(lái)說(shuō)，開(kāi)一家花店，經(jīng)營(yíng)一家花店比打工要累太多了。

都說(shuō)互聯(lián)網(wǎng)的工作是經(jīng)常要加班，通宵加班的。其實(shí)，做實(shí)體行業(yè)，開(kāi)花店也是經(jīng)常要加班的，有時(shí)候還要通宵，最后賺不了幾塊錢。說(shuō)了可能很多人都不相信，但事實(shí)就是這樣。就不說(shuō)逢年過(guò)節(jié)什么的，平時(shí)一個(gè)不小心接到做開(kāi)業(yè)花籃這樣的單子，從準(zhǔn)備花材、籃子、花泥，然后到處理花材，最后花籃成型，絕對(duì)是一個(gè)體力活。

最后想說(shuō)，有時(shí)候真的不要認(rèn)為花店很賺你的錢，尤其是像我們“愛(ài)·花苑”這樣的，盡可能做小清新，漂亮的花束是很累的，花材根據(jù)時(shí)間的不同，進(jìn)貨價(jià)格也不同，但是我們又不高價(jià)出售，最后只能賺個(gè)吃飯的錢。

別問(wèn)花店在哪里，原本是在杭州濱江，現(xiàn)在已經(jīng)不開(kāi)了。原因很多，就不多說(shuō)了。

如果要你幫程序員選鮮花給對(duì)象的話，你推薦哪個(gè)花種呢？

不推薦任何花種。這個(gè)就跟有時(shí)候有人找我推薦書籍一樣，這個(gè)我真無(wú)法推薦。每個(gè)人都有各自的喜好和追求，我所推薦的只是自己的想法而已。如果一定要推薦什么花送給對(duì)象的話，那么首先你要了解你的對(duì)象，是一個(gè)什么性格的人，喜歡什么顏色，平時(shí)有沒(méi)有特別喜愛(ài)的花，對(duì)于包裝有沒(méi)有什么要求。

這些問(wèn)題，都是之前在花店里我所聽(tīng)到所記錄的。當(dāng)一位顧客要送花給朋友的時(shí)候，我老婆就會(huì)很細(xì)心的詢問(wèn)對(duì)方一系列問(wèn)題，然后針對(duì)性地用心包一束花。在我印象中，基本上來(lái)買過(guò)花束的人，滿意的居多，我不敢說(shuō)百分百，這年頭百分百的東西還存在嗎？如果有，那就是我們的花店是百分百實(shí)惠。

如何理解你的微博簡(jiǎn)介：一個(gè)只會(huì)寫CSS不會(huì)寫JS的“偽”前端工程師？你覺(jué)得 JS 和 CSS 學(xué)習(xí)起來(lái)各有什么難點(diǎn)呢？

微博我好久沒(méi)去碰了，其實(shí)現(xiàn)在應(yīng)該是寫一個(gè)連 CSS 都不會(huì)寫，更不會(huì)寫 JS 的“偽”前端工程師。

為什么說(shuō)自己是前端工程師呢，其實(shí)就是為了讓自己覺(jué)得自己還是在前端行列中的，跟大家在一個(gè)行業(yè)中的；至于說(shuō)只會(huì)寫 CSS，那是因?yàn)槲业墓ぷ鲝膸啄昵伴_(kāi)始就一直只是圍繞著 CSS 在轉(zhuǎn)，拿著設(shè)計(jì)師給的設(shè)計(jì)稿，實(shí)現(xiàn)最終的頁(yè)面效果，空余時(shí)間做一些 CSS 方面的 demo 玩玩，總之就是各種圍著 CSS 轉(zhuǎn)；至于 JS 方面的話，我真不知道說(shuō)什么，可能我會(huì)用一點(diǎn)，但我真不會(huì)寫，所以，我在學(xué)。

就像前面所說(shuō)的，現(xiàn)在 CSS 發(fā)展太快了，各種新的屬性出現(xiàn)，感覺(jué)自己現(xiàn)在連 CSS 都不會(huì)寫了。不過(guò)其實(shí)很多屬性跟幾年前 IE 中使用的濾鏡效果太相似了，就連 box-sizing 這個(gè)屬性跟之前 IE 的怪異模式下盒模型計(jì)算方式是那么的相似。

至于要說(shuō) JS 和 CSS 學(xué)習(xí)起來(lái)有什么難點(diǎn)的話，我可以肯定地說(shuō)：JS 我根本不知道有什么難點(diǎn)啊，我連門都還沒(méi)入呢；至于 CSS 的話，寫來(lái)寫去就那么幾個(gè)屬性，不難，而難的是怎么去思考一個(gè)布局用什么方式來(lái)實(shí)現(xiàn)。所以，寫 CSS 不難，入門也就簡(jiǎn)單很多了。也就是因?yàn)檫@樣，很多人都覺(jué)得 CSS 很簡(jiǎn)單，但事實(shí)并不是這樣，CSS 其實(shí)挺難的。難點(diǎn)在于如何思考，如何巧妙運(yùn)用每個(gè) CSS 屬性的特性。
可能這樣說(shuō)的比較虛，舉個(gè)簡(jiǎn)單的例子?：隱藏文字的幾種方法（用的都是以前老的方法，沒(méi)有用新的 CSS 屬性）。

在 CSS 中一直以來(lái)我就不覺(jué)得有絕對(duì)唯一這種說(shuō)法，換個(gè)思路換個(gè)想法，結(jié)果可能還是一樣的。或許這個(gè)就是那句話所說(shuō)的：條條道路通羅馬……

你的書籍【CSS那些事兒】以 CSS 技巧實(shí)例講解為主，可以舉個(gè)經(jīng)典布局例子，分析下實(shí)現(xiàn)思路和過(guò)程嗎？

這本書已經(jīng)估計(jì)目前只是存在于部分人的硬盤中吧，一個(gè)盜版的 PDF。從當(dāng)時(shí)開(kāi)始寫的時(shí)候我就是計(jì)劃著用實(shí)例的方式來(lái)一點(diǎn)點(diǎn)講解（只是針對(duì)當(dāng)時(shí)的技術(shù)情況來(lái)說(shuō)），所以，書中會(huì)從最簡(jiǎn)單的盒模型、單列布局慢慢延伸到三列布局，并且會(huì)對(duì)每種布局可能有的幾種方式加點(diǎn)說(shuō)明。

至于經(jīng)典布局例子，這個(gè)有點(diǎn)難，因?yàn)槲也恢朗裁词墙?jīng)典布局例子。布局從大到小去分析，把一個(gè)大的模塊拆分中 N 個(gè)小模塊，然后 N 個(gè)小模塊可能還可以繼續(xù)拆分，最后就是一個(gè)頁(yè)面。比如左右兩列布局，根據(jù)不同的 HTML 寫法可以使用不同的 CSS 方式實(shí)現(xiàn)，但最終無(wú)非就是對(duì)布局屬性的了解和掌握。

這里列一個(gè)幾年前，又是一個(gè)幾年前的東西，發(fā)覺(jué)自己真的沒(méi)有新東西了，哎?。我是例子頁(yè)面 ,這個(gè)頁(yè)面是在很早之前看了國(guó)外的一個(gè)例子后自己嘗試去學(xué)習(xí)整理的，同一個(gè) HTML 結(jié)構(gòu)，然后根據(jù) CSS 的不同，最終展現(xiàn)不同的頁(yè)面效果。而修改的 CSS 部分無(wú)非也就是 float、margin 之類的屬性，有興趣的可以看看代碼。當(dāng)然，我也不知道這個(gè)域名會(huì)存在多久，畢竟沒(méi)有那個(gè)什么什么案來(lái)著。

對(duì)于問(wèn)題【關(guān)于CSS核心技術(shù)關(guān)鍵字都有哪些？】下的回答里的導(dǎo)圖，你怎么看？

這，怎么說(shuō)呢，我沒(méi)看法。不得不肯定這張圖包含了很多知識(shí)點(diǎn)。但就我個(gè)人感覺(jué)，整理這張圖的作者是最受益的。因?yàn)樗麖恼淼阶詈蟀l(fā)出來(lái)，肯定不是隨隨便便就完事了。

用心去整理，歸納的過(guò)程是一個(gè)人最好的學(xué)習(xí)過(guò)程，而他人去看這個(gè)整理的圖，并不一定會(huì)完全理解里面所有的東西，有些甚至也只是走馬觀花似得看過(guò)，腦袋中有一個(gè)印象而已，并不會(huì)真正去理解其中每個(gè)詞所代表的含義。最大的可能性應(yīng)該是看到感興趣的詞，然后去挖掘一下。

可能有人會(huì)說(shuō)，那我就每個(gè)詞都挖掘一下咯。是啊，這樣固然好，但我只想說(shuō)，你有這個(gè)時(shí)間？不敢保證這張圖的作者能完完全全把圖中每個(gè)詞都所深入的含義都理解透，如果全部都理解透了，我真心佩服。至少我知道其中幾個(gè)詞就已經(jīng)可以寫一大篇文章了。

如果不信的話，可以看看 doyoe 以前整理的有關(guān) margin 的文章：閱讀傳送門

那么其他的一些每個(gè)都深入去研究的話，真的不知道是需要多少時(shí)間啊。所以，現(xiàn)在 CSS 都是按照模塊來(lái)升級(jí)研究開(kāi)發(fā)，而不是一個(gè)整體來(lái)操作的。

前段時(shí)間，小志你也開(kāi)發(fā)了自己的小程序 -- caniuse簡(jiǎn)化版，你是出于怎么樣的考慮開(kāi)發(fā)的這個(gè)小程序呢？開(kāi)發(fā)過(guò)程中有遇到什么坑嗎？

如果我說(shuō)因?yàn)槲覠o(wú)聊，所以我去折騰這個(gè) caniuse 簡(jiǎn)化版，不知道會(huì)有多少人信。但我至少可以肯定，最開(kāi)始的想法，我真的是無(wú)聊。當(dāng)時(shí)一直在想玩點(diǎn)什么，就是不知道玩什么好，然而一個(gè)不小心在 github 上看到 caniuse 網(wǎng)站開(kāi)源 的 json 文件，于是就想要不就折騰一下這個(gè)吧，功能簡(jiǎn)單點(diǎn)，然后在微信里裝逼的時(shí)候用一下。

所以，折騰這個(gè) caniuse 簡(jiǎn)化版就是因?yàn)槲覠o(wú)聊到后面想裝逼，到最后的最后是想自己用的更順手一點(diǎn)，僅此而已。然而也就是這樣一個(gè)簡(jiǎn)單的想法，反反復(fù)復(fù)折騰了好幾回，直到目前為止自己才算相對(duì)滿意而已。

坑？遇到坑，首先是自己的能力不足導(dǎo)致的，其次就是自己的無(wú)知。當(dāng)時(shí)看到這個(gè) json 文件的時(shí)候，我在想，如果把文件下載過(guò)來(lái)，或者 fork 到自己的倉(cāng)庫(kù)后做修改，那么更新就麻煩了，直接引用應(yīng)該是最簡(jiǎn)單的方法。

就因?yàn)檫@個(gè)想法，折騰這個(gè) 1.48 MB 的 json 文件讓我快抓狂。里面數(shù)據(jù)量的龐大，以及自己不成熟的想法。最最開(kāi)始的時(shí)候，我居然把整個(gè) json 文件在請(qǐng)求之后直接丟到 localStorage，想想真是可怕。

反反復(fù)復(fù)修改了幾次后，思路就清晰多了，整體的原則不變，通過(guò)對(duì)比 json 文件的 timestamp 來(lái)檢測(cè)文件是否更新。因?yàn)椴皇潜匾?，所以更新的主?dòng)權(quán)交給用戶自行選擇，如要嘗試更新就去“關(guān)于”頁(yè)面中點(diǎn)更新按鈕即可，一般來(lái)說(shuō)，一周會(huì)有一次更新。

json 文件請(qǐng)求成功之后，會(huì)根據(jù)每個(gè)屬性，拆分寫入到 localStorage，這樣在搜索的時(shí)候直接從本地搜就可以了。這個(gè)時(shí)候是不是應(yīng)該插入一個(gè)廣告了呢。?

我是強(qiáng)勢(shì)入場(chǎng)的廣告

前面我說(shuō)了，我是一個(gè)不會(huì)寫 JS 的“偽”前端，所以，我在開(kāi)源這個(gè)小程序代碼的時(shí)候，很忐忑，但最終我還是鼓起了勇氣。小程序代碼的 GitHub 地址

公眾號(hào)【閑談CSS那些事兒】

簡(jiǎn)介
沒(méi)啥事兒就談?wù)凜SS，不深入，只扯淡，扯點(diǎn)自己想說(shuō)的，或許也是你想聽(tīng)的小東西，沒(méi)有高深的東西，但應(yīng)該不是平庸的內(nèi)容……

我是清蒸嫌棄丑的公眾號(hào)二維碼

技術(shù)圈【混跡于CSS圈】，技術(shù)圈傳送門

簡(jiǎn)介
層疊樣式表（英語(yǔ)：Cascading Style Sheets，簡(jiǎn)寫CSS），又稱串樣式列表，由W3C定義和維護(hù)的標(biāo)準(zhǔn)，一種用來(lái)為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體、間距和顏色等）的計(jì)算機(jī)語(yǔ)言。
CSS 看似簡(jiǎn)單，卻深似海；
CSS 經(jīng)常用的東西似乎挺簡(jiǎn)單，但要想知道為什么，卻好像不容易理解；
一個(gè)使用簡(jiǎn)單，深入難的東西；
一個(gè)沒(méi)有過(guò)多復(fù)雜語(yǔ)法，卻開(kāi)始有變量的東西；
每個(gè)人都有各自的玩法，每個(gè)人都有各自的思想，怎么玩怎么用，全在個(gè)人。
#you { idea: important; }
站內(nèi) CSS3 問(wèn)答
站內(nèi) CSS 問(wèn)答
站內(nèi) CSS 專家問(wèn)答
站內(nèi) CSS 關(guān)鍵字的搜索結(jié)果

本期訪談就到這了，下一次的訪談，我只能說(shuō)他的名字全是字母，遁走~