1、css整理之前的一些話

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

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

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

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

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

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

我只用過less，還是只用了一部分功能。

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

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

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