1、css整理之前的一些話

如果說(shuō)html是前端的“核心”，那css是當(dāng)之無(wú)愧的“靈魂”（可以先猜測(cè)下js我會(huì)把它當(dāng)做什么）
相對(duì)于后臺(tái)程序來(lái)說(shuō)，前端工作人員最慶幸的時(shí)候應(yīng)該就是業(yè)務(wù)需求改動(dòng)的時(shí)候，而不是在修改的時(shí)候抱怨，因?yàn)橐粋€(gè)良好的結(jié)構(gòu)外加一套簡(jiǎn)潔合理的樣式表，工作量真的可以說(shuō)是“灑灑水”（當(dāng)然生活在一些逗比產(chǎn)品經(jīng)理陰影下得除外）。

那一套簡(jiǎn)潔、合理的樣式表我們應(yīng)該注意哪些：
*  css盒子模型；
*  浮動(dòng)；
*  block和inline；
*  層疊；
*  樣式優(yōu)先級(jí)；
當(dāng)然知識(shí)都是死的，活學(xué)活用才是硬道理，但是上面這幾個(gè)點(diǎn)真的是基礎(chǔ)中的基礎(chǔ)，如果都理解不了的話，真的不敢多要哪怕一點(diǎn)工資。
2、基礎(chǔ)知識(shí)淺析
*  在html整理的時(shí)候曾經(jīng)提到過(guò)，相比較div布局，我更傾向于“塊元素”布局，而塊元素除了自身就是塊元素的標(biāo)簽以外，還有css進(jìn)行設(shè)定的塊元素，舉個(gè)簡(jiǎn)單的例子，或許我可以將一個(gè)鏈接塊化，就不用在一個(gè)div外面再套一個(gè)鏈接那么啰嗦了。
至于行元素，它同樣有著明顯的弊端，它是無(wú)法控制長(zhǎng)寬的（原諒我經(jīng)常忘記），而inline-block則還要面對(duì)著兼容的問(wèn)題，這是要時(shí)刻警惕的。
*  我們都知道所謂的網(wǎng)頁(yè)，就是一個(gè)html文檔，然后很自然就有“文檔流”的名詞會(huì)在腦海中浮現(xiàn)。
“文檔流”的出現(xiàn)，也就意味著我們需要考慮到“層疊”和“浮動(dòng)”，這種讓內(nèi)容脫離文檔的存在。當(dāng)然，脫離文檔不是目的，讓合適的內(nèi)容顯示在合適的地方才是宗旨。
“浮動(dòng)”的時(shí)候，最需要注意的地方有兩點(diǎn)：內(nèi)層浮動(dòng)，外層容器沒(méi)有高度了一種情況，另一種情況就是沒(méi)有及時(shí)清理浮動(dòng)，影響了后面內(nèi)容的展示。
而“層疊”和“透明”的搭配，則讓整個(gè)界面的展示更立體和豐滿起來(lái)，可操作的空間更多更大，需要考慮的問(wèn)題同樣是，脫離文檔流的元素是不占位置的，跟正常文檔流的排版不要混起來(lái)。另外，relative，absolute和fixed的問(wèn)題，面試還是會(huì)經(jīng)常碰到的。
*  “盒子模型”聽(tīng)起來(lái)很簡(jiǎn)單，但是具體到應(yīng)用，或者說(shuō)多個(gè)“盒子”嵌套起來(lái)，或者“盒子”里有了太多元素的時(shí)候，往往就有太多問(wèn)題的出現(xiàn)，另外，說(shuō)起來(lái)容易，但是真的找到那個(gè)對(duì)的“盒子”并進(jìn)行分析并不是那么容易的，總之，“盒子”的概念還是理解的再透徹點(diǎn)好。
當(dāng)然，“兼容性”在這個(gè)地方的出現(xiàn)也最為頻繁，誰(shuí)讓它操控著整個(gè)“文檔流”呢。

*  樣式的優(yōu)先級(jí)，只是理論上的說(shuō)法，而在實(shí)際應(yīng)用中，為了方便后期的網(wǎng)站維護(hù)，更多的是看你如何合理的添加樣式：
一方面做到結(jié)構(gòu)和表現(xiàn)分離，我們盡可能不要寫(xiě)內(nèi)聯(lián)樣式，而為了代碼的復(fù)用和美觀，我們盡可能的把它放在外部樣式表上；
另一方面，復(fù)用是為了更好的開(kāi)發(fā)，但是往往在修改的時(shí)候容易出現(xiàn)問(wèn)題，這個(gè)時(shí)候盡量精確就非常有必要了，我的宗旨一般都是“不見(jiàn)兔子不撒鷹”。舉個(gè)簡(jiǎn)單的例子，設(shè)置一個(gè)初始字體為10px,外層如果加了字體的百分比，內(nèi)部元素再進(jìn)行設(shè)置百分比，則得到的實(shí)際字體是不正確的，而將有字的區(qū)域都單獨(dú)成一個(gè)獨(dú)立的模塊，再進(jìn)行設(shè)置，結(jié)果就不一樣了。
說(shuō)了那么多，總之就是“方便復(fù)用”和“模塊化”的合理搭配就是了。
3、css編寫(xiě)的個(gè)人習(xí)慣
正所謂“萬(wàn)法歸一”，條條道路通羅馬，能夠大體知道意思之后，總能拼湊出想要的結(jié)果，而前端工作的“門檻低”就是如此來(lái)的。
但也正因?yàn)槿绱?，前端工作真是純粹的良心活，將心比心，一樣的工作干好干差一樣錢也別想總能留住人。我應(yīng)該是有輕微的代碼潔癖，見(jiàn)不得縮進(jìn)不對(duì)，空格和沒(méi)空格的交叉，甚至沒(méi)有良好的注釋都不太喜歡，但很慶幸同事們都很配合。
reset.css在網(wǎng)上搜的話，應(yīng)該有很多，個(gè)人建議是參考網(wǎng)上的代碼，然后真正讀明白各自的意思，然后在分析需求，思考界面之后，再進(jìn)行編寫(xiě)，太多東西可能我們真的不需要；
我習(xí)慣有一個(gè)contain.css，是接手項(xiàng)目的所有通用的樣式，并且在上面標(biāo)明哪些用到了。（個(gè)人感覺(jué)還是有些必要的，可能在修改的時(shí)候我能很快的定位到這個(gè)地方，但是往往不敢下手去改，因?yàn)轫?xiàng)目上線后，實(shí)在不敢輕易改通用代碼，就是不知道還有哪些用到了）

再然后就是每個(gè)頁(yè)面我習(xí)慣單獨(dú)建一個(gè)css文件，然后名稱與相應(yīng)的html相同，也方便定位，代碼也簡(jiǎn)單，目前感覺(jué)還不錯(cuò)。
當(dāng)然具體到實(shí)際項(xiàng)目時(shí)，可能出現(xiàn)各種情況，這里也不列舉了。

3、關(guān)于css發(fā)展的一些思考

隨著時(shí)代的發(fā)展，單純的css開(kāi)始被看做很基礎(chǔ)，但是很low的東西了，每當(dāng)面試的時(shí)候，都是有沒(méi)有用過(guò)less，sass，scss等等預(yù)處理框架，仿佛逼格要高一點(diǎn)。

我只用過(guò)less，還是只用了一部分功能。

不得不說(shuō)，less自有其可取之處。在css編寫(xiě)的時(shí)候，每當(dāng)碰到圓角，透明等等問(wèn)題的時(shí)候，總在想每次都要寫(xiě)這么多，不能簡(jiǎn)單點(diǎn)么，有了需求，對(duì)less的應(yīng)用也就提上了日程，而且在學(xué)習(xí)過(guò)程中，發(fā)現(xiàn)它的嵌套，混合，變量等等，比自己想的更多，更全面，也是一時(shí)感慨不已。

但是，如果css學(xué)不好，真的能打包票用的好less么，而less只不過(guò)用編程的思想去編寫(xiě)css，而其本源還是css，思想才是最重要的。
當(dāng)然，這只是我的淺見(jiàn)，我還沒(méi)用過(guò)sass和scss，只是聽(tīng)過(guò)，就不多說(shuō)了。
我始終相信，思想和態(tài)度才是解決問(wèn)題的關(guān)鍵，積跬步，聚小流，終能到達(dá)那遠(yuǎn)方，加油2016....

歡迎專注北京網(wǎng)站建設(shè)公司 瑩晨設(shè)計(jì)