css橫著寫還是豎著寫

不同的css寫法有不同的優勢，例如在開發時，css豎著寫，按規範編碼，格式縮進，一是代碼可讀性強，二是容易調試；在上線時， css讓橫著寫，可以用gulp或grunt等建置工具編寫腳本，優化css縮小css體積，讓生成程式碼變橫的。

本教學操作環境：windows7系統、css3版本、Dell G3電腦。

css橫寫還是豎寫？

開發：豎著寫，依規範編碼，格式縮進，一是程式碼可讀性強，二是容易調試

上線：用gulp或grunt等建構工具編寫腳本，優化css縮小css體積，產生程式碼變橫的

拓展：

縱向書寫特點：

每個CSS屬性獨立一行，一般不會出現換行或橫向捲軸。

可以透過firebug等工具查找到模組，在DW中ctrl g行定位，修改方便。

屬性段落間有縮進，保證了程式碼的整潔，層次清楚，符合程式語言程式碼規範，修改更直覺。

存在的問題：程式碼冗餘（如空格符、tab符、換行符）；檔案大小增加；容易出現縱向捲軸。

橫向書寫特點：

最大化的利用了空間，單屏內能顯示更多，減小了縱向滾動條出現的幾率，能夠快速捕獲較多的資訊。

減少了檔案大小，省去了不必要的空格、換行等。

橫向書寫方便分塊以及註釋，便於查看CSS結構，選擇符一目了然。當今顯示器正朝著越來越大，越來越寬發展，基本上一行內可以顯示完全。

加快寫CSS速度，不用每次敲換行和tab，並且減少拉動捲軸的次數。

如果是活動頁，不用作壓縮處理。使用CSS optimizers 來優化CSS是提倡的，但是使用橫向書寫，基本上不存在多餘的空格和換行，因此可以不用壓縮，這樣效率和能力都會得到提高。

方便閱讀和尋找相關結構。程式碼編輯器對同行數定位做的都比較好，因此我們要解決的是如何快速縱向定位目標。橫向書寫時選擇符縱向對齊，再加上

.class_name_2 .class_name_2_1 .class_name_2_1_1的選擇符層次分明，因此很容易定位到目標。

在調試小Bug的時候就可以直接打開CSS更改，不用再打開firebug去找模組。

橫向書寫，是基於CSS選擇符的寫法，層次容易對比，更利於模組化。對整體CSS規劃有好處，後期維護成本低。

便於不同版本的CSS程式碼比較。

存在的問題：書寫過密，進而影響閱讀。這種弊端顯而易見，但只要優化做到家，這種狀況就會很少。

儘管對於現如今的頻寬來說，網頁檔案那僅以K為單位的大小實在是微不足道，但如何將這以K來計算的網頁文件精簡到最小還是網頁設計師們應該考慮的問題之一。而橫向書寫省去了不必要的空格、換行等，大大減少了檔案大小。

我們不能說哪種書寫是對的，至於具體採用哪種寫法依個人選擇，當然改變習慣可能會影響一個人的工作效率，那我們提倡的是：提交的CSS樣式文件是經過程式碼格式化的，而這個工作可以完全交給DW等工具，我們只要點擊一下，整個文件就會像我們想像的那樣呈現出來。這樣的程式碼看起來很舒服，修改容易，團隊成員在後續交接也會變得更順利。

推薦：《css影片教學》

以上是css橫著寫還是豎著寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！