SegmentFault 社區訪談 | Linxz：只會寫 CSS 不會寫 JS 的「僞」前端

上週沒和你們見面，是去邀請大佬來訪談了(///▽///)社區訪談以來，清蒸邀請都是些你們相對熟悉的面孔，好比公子，好比邊城大大，此次的訪談嘉賓，你們可能有些陌生，他主要出沒在 css 標籤下，有請專一 css 三十年不會 js 的林小志 - @林小志 。

破冰環節

小志，和以前的小夥伴同樣，和你們簡單地打個招呼吧(￣∇￣)從簡就好

（長篇大論的開場）自我介紹是我最不擅長的，一直以來都不知道本身應該如何介紹本身比較好。想來想去，我就隨便說一下吧。工年已經有一些年頭了，可是能力卻一直都是通常般，在 2009 年的時候曾「無知」掛名在某人的一本書中，寫了最後一頁內容，過後看到書中內容跟本身寫 CSS 的方式、思路有所出路，因而年少輕狂的我就出口要本身寫一本。最後用了半年多的時間在晚上、在週末寫完了《CSS那些事兒》這本書。

有朋友問我爲何用這個書名，其實這個書名並非我起的，我也沒去考慮書名的問題，可是我很認真很嚴肅地表態，書名中不準出現「div+css」、「X 日精通」以及「精通」等字眼。最後這本書知足了個人虛榮心以後，由於銷量不佳，被出版社收回銷燬（聽說）。

一個不當心從要介紹本身扯到了本身曾經的一本書，思緒又飄了。其實認識個人朋友都知道我一直以來都是在寫 CSS，大概何時開始寫呢，應該是從 07 年或者 08 年吧，具體我也不記得了。雖然以前有過接觸 CSS，但並未以爲用 CSS 佈局有什麼好的，也沒在乎，後來無心間加入一個 QQ 羣，在羣裏各位老師的帶動下，我開始認真接觸。遇到問題不斷摸索，而後跟你們討論交流，最後也就這樣混下來了。
接下來幾年的工做中，雖然一直都是偏重於 CSS 方面，但其餘的偶爾仍是會接觸一下，去玩一下。因此，如今的我是一個只會 CSS 不會寫 JS 的「僞」前端。然而，可怕的是，當如今的 flex 以及 rem 等一系列新的 CSS 屬性出現以後，我發現，我其實連 CSS 都不會寫了。

【「愛·花苑」花店賣花、送花的】是你某個社交平臺的簡介，愛·花苑 是你本身開的花店嗎？爲何要想開個花店呢？

「愛·花苑」是我老婆開的花店，而我只是在利用網絡以及平時週末的時間幫忙一下。開一家花店，天天身處在花叢中，給人的感受彷佛是很嚮往的生活。但，身爲切圖仔的我在花店裏打工的那段時間感覺來講，開一家花店，經營一家花店比打工要累太多了。

都說互聯網的工做是常常要加班，通宵加班的。其實，作實體行業，開花店也是常常要加班的，有時候還要通宵，最後賺不了幾塊錢。說了可能不少人都不相信，但事實就是這樣。就不說逢年過節什麼的，平時一個不當心接到作開業花籃這樣的單子，從準備花材、籃子、花泥，而後處處理花材，最後花籃成型，絕對是一個體力活。

最後想說，有時候真的不要認爲花店很賺你的錢，尤爲是像咱們「愛·花苑」這樣的，儘量作小清新，漂亮的花束是很累的，花材根據時間的不一樣，進貨價格也不一樣，可是咱們又不高價出售，最後只能賺個吃飯的錢。

別問花店在哪裏，本來是在杭州濱江，如今已經不開了。緣由不少，就很少說了。

若是要你幫程序員選鮮花給對象的話，你推薦哪一個花種呢？

不推薦任何花種。這個就跟有時候有人找我推薦書籍同樣，這個我真沒法推薦。每一個人都有各自的喜愛和追求，我所推薦的只是本身的想法而已。若是必定要推薦什麼花送給對象的話，那麼首先你要了解你的對象，是一個什麼性格的人，喜歡什麼顏色，平時有沒有特別喜好的花，對於包裝有沒有什麼要求。

這些問題，都是以前在花店裏我所聽到所記錄的。當一位顧客要送花給朋友的時候，我老婆就會很細心的詢問對方一系列問題，而後針對性地用心包一束花。在我印象中，基本上來買過花束的人，滿意的居多，我不敢說百分百，這年頭百分百的東西還存在嗎？若是有，那就是咱們的花店是百分百實惠。

技術昇華環節

如何理解你的微博簡介：一個只會寫CSS不會寫JS的「僞」前端工程師？你以爲 JS 和 CSS 學習起來各有什麼難點呢？

微博我很久沒去碰了，其實如今應該是寫一個連 CSS 都不會寫，更不會寫 JS 的「僞」前端工程師。

爲何說本身是前端工程師呢，其實就是爲了讓本身以爲本身仍是在前端行列中的，跟你們在一個行業中的；至於說只會寫 CSS，那是由於個人工做從幾年前開始就一直只是圍繞着 CSS 在轉，拿着設計師給的設計稿，實現最終的頁面效果，空餘時間作一些 CSS 方面的 demo 玩玩，總之就是各類圍着 CSS 轉；至於 JS 方面的話，我真不知道說什麼，可能我會用一點，但我真不會寫，因此，我在學。

就像前面所說的，如今 CSS 發展太快了，各類新的屬性出現，感受本身如今連 CSS 都不會寫了。不過其實不少屬性跟幾年前 IE 中使用的濾鏡效果太類似了，就連 box-sizing 這個屬性跟以前 IE 的怪異模式下盒模型計算方式是那麼的類似。

至於要說 JS 和 CSS 學習起來有什麼難點的話，我能夠確定地說：JS 我根本不知道有什麼難點啊，我連門都還沒入呢；至於 CSS 的話，寫來寫去就那麼幾個屬性，不難，而難的是怎麼去思考一個佈局用什麼方式來實現。因此，寫 CSS 不難，入門也就簡單不少了。也就是由於這樣，不少人都以爲 CSS 很簡單，但事實並非這樣，CSS 其實挺難的。難點在於如何思考，如何巧妙運用每一個 CSS 屬性的特性。
可能這樣說的比較虛，舉個簡單的例子?：隱藏文字的幾種方法（用的都是之前老的方法，沒有用新的 CSS 屬性）。

在 CSS 中一直以來我就不以爲有絕對惟一這種說法，換個思路換個想法，結果可能仍是同樣的。或許這個就是那句話所說的：條條道路通羅馬……

你的書籍【CSS那些事兒】以 CSS 技巧實例講解爲主，能夠舉個經典佈局例子，分析下實現思路和過程嗎？

這本書已經估計目前只是存在於部分人的硬盤中吧，一個盜版的 PDF。從當時開始寫的時候我就是計劃着用實例的方式來一點點講解（只是針對當時的技術狀況來講），因此，書中會從最簡單的盒模型、單列布局慢慢延伸到三列布局，而且會對每種佈局可能有的幾種方式加點說明。

至於經典佈局例子，這個有點難，由於我不知道什麼是經典佈局例子。佈局從大到小去分析，把一個大的模塊拆分中 N 個小模塊，而後 N 個小模塊可能還能夠繼續拆分，最後就是一個頁面。好比左右兩列布局，根據不一樣的 HTML 寫法可使用不一樣的 CSS 方式實現，但最終無非就是對佈局屬性的瞭解和掌握。

這裏列一個幾年前，又是一個幾年前的東西，發覺本身真的沒有新東西了，哎?。我是例子頁面 ,這個頁面是在很早以前看了國外的一個例子後本身嘗試去學習整理的，同一個 HTML 結構，而後根據 CSS 的不一樣，最終展示不一樣的頁面效果。而修改的 CSS 部分無非也就是 float、margin 之類的屬性，有興趣的能夠看看代碼。固然，我也不知道這個域名會存在多久，畢竟沒有那個什麼什麼案來着。

對於問題【關於CSS核心技術關鍵字都有哪些？】下的回答裏的導圖，你怎麼看？

這，怎麼說呢，我沒見解。不得不願定這張圖包含了不少知識點。但就我我的感受，整理這張圖的做者是最受益的。由於他從整理到最後發出來，確定不是隨隨便便就完事了。

用心去整理，概括的過程是一我的最好的學習過程，而他人去看這個整理的圖，並不必定會徹底理解裏面全部的東西，有些甚至也只是蜻蜓點水似得看過，腦殼中有一個印象而已，並不會真正去理解其中每一個詞所表明的含義。最大的可能性應該是看到感興趣的詞，而後去挖掘一下。

可能有人會說，那我就每一個詞都挖掘一下咯。是啊，這樣當然好，但我只想說，你有這個時間？不敢保證這張圖的做者能完徹底全把圖中每一個詞都所深刻的含義都理解透，若是所有都理解透了，我真心佩服。至少我知道其中幾個詞就已經能夠寫一大篇文章了。

若是不信的話，能夠看看 doyoe 之前整理的有關 margin 的文章：閱讀傳送門

那麼其餘的一些每一個都深刻去研究的話，真的不知道是須要多少時間啊。因此，如今 CSS 都是按照模塊來升級研究開發，而不是一個總體來操做的。

前段時間，小志你也開發了本身的小程序 -- caniuse簡化版，你是出於怎麼樣的考慮開發的這個小程序呢？開發過程當中有遇到什麼坑嗎？

若是我說由於我無聊，因此我去折騰這個 caniuse 簡化版，不知道會有多少人信。但我至少能夠確定，最開始的想法，我真的是無聊。當時一直在想玩點什麼，就是不知道玩什麼好，然而一個不當心在 github 上看到 caniuse 網站開源 的 json 文件，因而就想要不就折騰一下這個吧，功能簡單點，而後在微信裏裝逼的時候用一下。

因此，折騰這個 caniuse 簡化版就是由於我無聊到後面想裝逼，到最後的最後是想本身用的更順手一點，僅此而已。然而也就是這樣一個簡單的想法，反反覆覆折騰了好幾次，直到目前爲止本身才算相對滿意而已。

坑？遇到坑，首先是本身的能力不足致使的，其次就是本身的無知。當時看到這個 json 文件的時候，我在想，若是把文件下載過來，或者 fork 到本身的倉庫後作修改，那麼更新就麻煩了，直接引用應該是最簡單的方法。

就由於這個想法，折騰這個 1.48 MB 的 json 文件讓我快抓狂。裏面數據量的龐大，以及本身不成熟的想法。最最開始的時候，我竟然把整個 json 文件在請求以後直接丟到 localStorage，想一想真是可怕。

反反覆覆修改了幾回後，思路就清晰多了，總體的原則不變，經過對比 json 文件的 timestamp 來檢測文件是否更新。由於不是必要更新，因此更新的主動權交給用戶自行選擇，如要嘗試更新就去「關於」頁面中點更新按鈕便可，通常來講，一週會有一次更新。

json 文件請求成功以後，會根據每一個屬性，拆分寫入到 localStorage，這樣在搜索的時候直接從本地搜就能夠了。這個時候是否是應該插入一個廣告了呢。?

---

我是強勢入場的廣告

---

前面我說了，我是一個不會寫 JS 的「僞」前端，因此，我在開源這個小程序代碼的時候，很忐忑，但最終我仍是鼓起了勇氣。小程序代碼的 GitHub 地址

廣告環節

公衆號【閒談CSS那些事兒】

簡介
沒啥事兒就談談CSS，不深刻，只扯淡，扯點本身想說的，或許也是你想聽的小東西，沒有高深的東西，但應該不是平庸的內容……

我是清蒸嫌棄醜的公衆號二維碼

技術圈【混跡於CSS圈】，技術圈傳送門

簡介
層疊樣式表（英語：Cascading Style Sheets，簡寫CSS），又稱串樣式列表，由W3C定義和維護的標準，一種用來爲結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言。
CSS 看似簡單，卻深似海；
CSS 常常用的東西彷佛挺簡單，但要想知道爲何，卻好像不容易理解；
一個使用簡單，深刻難的東西；
一個沒有過多複雜語法，卻開始有變量的東西；
每一個人都有各自的玩法，每一個人都有各自的思想，怎麼玩怎麼用，全在我的。
#you { idea: important; }
站內 CSS3 問答
站內 CSS 問答
站內 CSS 專家問答
站內 CSS 關鍵字的搜索結果

劇透環節

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