css中縱向書寫和橫向書寫的特點有哪些

這篇“css中縱向書寫和橫向書寫的特點有哪些”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“css中縱向書寫和橫向書寫的特點有哪些”，給大家總結了以下內容，具有一定借鑒價值，內容詳細步驟清晰，細節(jié)處理妥當，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內容吧。

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結構決定，從而實現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

不同的css寫法有不同的優(yōu)勢，比如在開發(fā)時，css豎著寫，按規(guī)范編碼，格式縮進，一是代碼可讀性強，二是容易調試；在上線時，css讓橫著寫，可以用gulp或grunt等構建工具編寫腳本，優(yōu)化css縮小css體積，使生成代碼變橫的。

css橫著寫還是豎著寫？

開發(fā)：豎著寫，按規(guī)范編碼，格式縮進，一是代碼可讀性強，二是容易調試

上線：用gulp或grunt等構建工具編寫腳本，優(yōu)化css縮小css體積，生成代碼變橫的

拓展：

縱向書寫特點：

每個CSS屬性獨立一行，一般不會出現(xiàn)換行或橫向滾動條。

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

屬性段落間有縮進，保證了代碼的整潔，層次清楚，符合編程語言代碼規(guī)范，修改更加直觀。

存在的問題：代碼冗余（如空格符、tab符、換行符）；文件大小增加；容易出現(xiàn)縱向滾動條。

橫向書寫特點：

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

減小了文件大小，省去了不必要的空格、換行等。

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

加快編寫CSS速度，不用每次敲換行和tab，并且減少拉動滾動條的次數(shù)。

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

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

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

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

橫向書寫，是基于CSS選擇符的寫法，層次容易對比，更利于模塊化。對整體CSS規(guī)劃有好處，后期維護成本低。

便于不同版本的CSS代碼對比。

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

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

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

感謝你的閱讀，希望你對“css中縱向書寫和橫向書寫的特點有哪些”這一關鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領會，快去試試吧，如果想閱讀更多相關知識點的文章，歡迎關注億速云行業(yè)資訊頻道！