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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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