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