前端之路之自述
緣起
年初的時候，我換了一個工作，之前的工作主要是擼Oracle的openjdk7，或者V8什么的源碼。現(xiàn)在的工作主要是處理web開發(fā)方面的事情。web開發(fā)涉及到前后端，我負(fù)責(zé)后端，前端直接交給前端工程師去做，不過鑒于公司路由器有問題，都由我來解決的現(xiàn)狀，涉及到前端的事自然也落到我的頭上了。汗！
我的CSS基礎(chǔ)
這里說一個事情。有這么一個功能：一個搜索框，下面是一個很長的列表。點(diǎn)擊搜索框，會到后臺去搜索特定的內(nèi)容，并返回前臺。這個后臺功能不復(fù)雜，現(xiàn)在看來，涉及到的前臺顯示——讓搜索框和列表變的好看，其實(shí)也不是很復(fù)雜。但當(dāng)時，一籌莫展啊！我的css基礎(chǔ)嘛，為0.1，知道一些CSS文本屬性，其它的就不知道了。
怎么學(xué)習(xí)CSS、應(yīng)該掌握什么CSS知識，怎么實(shí)現(xiàn)眼前的這個功能等等，我都不知道，而且這個不可以借鑒我之前的后端知識。用php做個比對，php我之前一次沒有見過，但對于php，我知道我所不知道。我知道什么該知道，什么可以緩緩，不懂的原因、解決方法在那里，我都很清楚。我可以拿一本php權(quán)威指南之類的書籍，或者php編程之類的書籍，直接開始擼代碼。但對于css不行，我不知道我不知道的。而且在學(xué)了css后，我才了解前端程序員的不容易：如果把后端程序員比喻成去解決開源軟件的問題，那前端程序員就是去解決windows那閉源的軟件問題。
初衷
我打算將我目前對css的學(xué)習(xí)記錄下來。不知道誰說過，你只有教會某一樣?xùn)|西，你才能真正地學(xué)會某一樣?xùn)|西。嗯，這句話送給我。我有一句話送給你：沒有教會的，只有學(xué)會的。
學(xué)而不思則罔 思而不學(xué)則殆
有一個簡單的綱要：
-
CSS布局
- 浮動布局（float、浮動包含、浮動清除）
- 定位（靜態(tài)定位、絕對定位、固定定位、相對定位等）
- flex布局（使用的比較廣泛，尤其是移動端，目前的微信小程序就是使用的flex布局）
- grid布局（不會，因?yàn)槟壳盀g覽器支持比較少，屬于實(shí)驗(yàn)性，暫時沒有學(xué)的心情）
CSS控件實(shí)例學(xué)習(xí)
通過各個控件的實(shí)現(xiàn)，來學(xué)習(xí)CSS。重要的CSS屬性介紹，比如
line-height、background等屬性。
希望達(dá)到的目的：
- 看懂別人的CSS代碼。
- 可以熟練地利用CSS框架，比如Bootstrap、weui等CSS框架。
- 可以不借助框架，實(shí)現(xiàn)自己的布局；控件的布局
- 可以自己實(shí)現(xiàn)特定的CSS控件。
CSS書籍推薦
我只推薦我看過，我認(rèn)為還可以的。我聽說是好書，但我沒看過的，我就不推薦了！
CSS基礎(chǔ)知識類：
- 《CSS設(shè)計(jì)指南》（第2遍在讀）
- 《精通CSS：高級Web標(biāo)準(zhǔn)解決方案》（第二次讀完background一節(jié)后，認(rèn)為整本書獨(dú)值得一讀）
- 《CSS權(quán)威指南》（讀的昏昏欲睡）
《CSS設(shè)計(jì)指南》我認(rèn)為比較適合初學(xué)者，實(shí)例結(jié)合理論，有內(nèi)涵，有一定深度。圖書的厚度也合適。 我發(fā)現(xiàn)一點(diǎn)，前端的書籍，好像都不是太厚，我還沒有見過500頁向上的前端書籍。
《精通CSS：高級Web標(biāo)準(zhǔn)解決方案》這本書是我看被人推薦的，我剛拿到手，看了background一節(jié)，發(fā)現(xiàn)介紹的都是老的技術(shù)，以現(xiàn)在的效果，只要CSS3的一個屬性就可以做到，還講那個做什么。就放下了，知道后來開始擼CSS代碼的時候，才發(fā)現(xiàn)這些技術(shù)隨處可見，于是把它又撿起來，準(zhǔn)備認(rèn)真地通讀全本書。
《CSS權(quán)威指南》這本書，我已經(jīng)不止一次看到推薦了，比如《CSS設(shè)計(jì)指南》的作者也看過這本書。那為什么放在最后呢，因?yàn)殡y讀。尤其是浮動一節(jié)，不太適合剛做CSS的同學(xué)們?nèi)プx。嗯，對的，我就是第一次接觸CSS時，直接看《CSS權(quán)威指南》的，效果不好，看完就忘了。
寫出這本書的作者，起碼對CSS規(guī)范很熟悉，甚至可能自己接觸過瀏覽器對CSS特性的實(shí)現(xiàn)，否則不可能寫出介紹CSS原理的書籍來。這本書甚至可以換個名字，叫《CSS原理》。但這本書不是從代碼的角度去介紹CSS的，更多的是從規(guī)范的角度去寫CSS。我覺得每一個前端開發(fā)者都應(yīng)該讀一下這本書。嗯，我沒必要，我是后端程序員。
Bootstrap類：
- 《Bootstrap實(shí)戰(zhàn)》李松峰翻譯（讀完）
- 《Packt Bootstrap By Example》（實(shí)踐部分讀完）
《Bootstrap實(shí)戰(zhàn)》是國外的那一本，不是國內(nèi)的那一本，要分清。自從看到這本，我就知道我可以去駕馭Bootstrap了，當(dāng)然我現(xiàn)在也沒能自由駕馭Bootstrap。不過，書寫的真是好，屬于深入淺出之類的書籍，書中還教你前端開發(fā)的一些好的實(shí)踐，不錯！
《Packt Bootstrap By Example》這本書就是教你學(xué)Bootstrap的，有些人可能很驚訝，這本書不教你Bootstrap，那教你什么。舉個例子：《Bootstrap用戶手冊：設(shè)計(jì)響應(yīng)式網(wǎng)站》這本書就不是教你Bootstrap的，起碼在我眼里不是，它是賣錢的。
沒有結(jié)論
先給個結(jié)論吧，好像我們學(xué)前端的東西，需要先看最終的顯示效果一樣。此結(jié)論，只表明我目前對CSS的一些使用看法，不代表最終結(jié)論：
- CSS和瀏覽器結(jié)合緊密，而瀏覽器與CSS的關(guān)系，繁雜、瑣碎。需要花費(fèi)特定的時間來學(xué)習(xí)，故CSS比較難學(xué)。
- CSS也比較好學(xué)，因?yàn)闆]有秘密，隨時可以看到其代碼，看到就能學(xué)到，類似于開源的概念。
- 需要看CSS代碼，和后端一樣。
- CSS比較有趣。
簡書的自己的樣式比較漂亮，為什么個人寫作的CSS這么丑？
