標籤：

為什麼看到有的前端工程師將css每個選擇器里的內容寫成一行?

01-14

之前在工作實習的時候發現一個同事將css選擇器內的所有樣式寫成一行(非壓縮),如下圖

問起原因也沒有得到解答,我以為只是個別情況,因為這樣寫真的好反人類

後來發現有同學和我吐槽他同事也這樣寫,完全無法溝通.....最近又有人和我說碰到這樣寫css的人.

所以好奇為什麼會有人這樣寫?優點是什麼或者原因是什麼?這種情況普遍么?

處女座，忍不住了，說兩句。

如果是你一個人單打獨鬥，怎麼寫都行。但我相信大部分人是參與團隊合作的，所以這種寫在一行的模式存在如下幾點弊端：

1. 不利於生成有效的 diff，這也是最重要的一點，當然如果你還沒有開始使用 Git 等版本管理工具，那快試試吧。

2. 不能快速使用快捷鍵注釋，例如 Sublime Text 中可以使用 Cmd + / 快速注釋一行代碼，無需選中。

3. 人眼左右移動是有很大的局限的，這也是為什麼開發使用的顯示器不是越寬越好，通常開源社區約定俗成的是一行 80 個字元。

所以，想要更好的代碼風格，我們可以細分一下：

  1. 選擇器內只有一個聲明時可以寫在一行。

    這樣可以使得代碼顯得更加緊湊，注意保持空格。

    h1 { font-size: 32px; }

    h2 { font-size: 26px; }

    h3 { font-size: 22px; }

  2. 包含多個前綴的聲明不強制對齊。

    對齊可以交給編輯器或其他工具來解決。

    .selector {
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -ms-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    }

  3. 較長的屬性值推薦放在多行，屬性值開頭保持一級縮進。

    @media
    only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
    only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
    only screen and (-webkit-min-device-pixel-ratio: 2), /* WebKit */
    only screen and (min-resolution: 192dpi), /* 不支持dppx的瀏覽器 */
    only screen and (min-resolution: 2dppx) /* 標準 */
    {
    .selector {

    }
    }

詳見《CSS 創作指南》GitHub - cssdream/css-creating: CSS創作指南

所謂的快速查找的優勢，你應該使用編輯器自帶的搜索或代碼縮略圖功能。例如 Sublime Text 中可以使用 Cmd + P，然後輸入 @選擇器快速查找並定位代碼。

當然如果你已經在使用 Sass 等預處理工具，根本不存在這些糾結。

最後推薦幾個工具：

Sublime Text 建議安裝以下幾個 CSS 相關的插件：

  1. CSS3，比自帶 CSS 語法高亮和提示更加豐富。

  2. SCSS，高亮 SCSS 語法。
  3. HTML-CSS-JS Prettify，快速格式化 HTML/CSS/JS。

  4. Emmet，快速書寫 CSS。
  5. sublime-perfectionist，我自己弄的一個 Sublime 快速格式化 CSS 的插件，擁有更多自定義配置。yisibl/sublime-perfectionist · GitHub

2016-01-25 更新

  1. 鼓勵使用預處理器的嵌套，但最好不要超過三層，否則生成的選擇器層級過深。

  2. 使用預處理器有條件的可以開啟 Source Map，特別是複雜一點的多人項目。

自帶混淆功能的代碼

方便整行注釋？然而注釋和修改某個屬性時痛苦死。

我遇到這樣的源碼是要格式化一下才舒服，代碼壓縮由構建工具來做。

因為顯示器夠大，這樣寫才過癮

一屏全部放下：

也可以縮進換行寫，即便可以把屏幕立起來看，也得翻兩屏多才能看全。

why not?

不喜歡屬性換行的原因是不喜歡看代碼的時候滾滾動條……

一般一個模塊代碼樣式少則幾行，多則十幾行，要是換成換行的，估計就變成至少十幾行，總是上下閱讀累。

另外從左到右閱讀一行代碼習慣了就好，超過一定長度還是會手動換行。

寫一行不好的點就是不好快速肉眼檢索屬性……

其實吧，最終CSS還是需要壓縮的，如果能夠寫出一行能不亂，也算是快達到了電腦的即視感

壓縮應該交給工具去做，我支持這句話。

寫代碼，應該按照規矩，縮進，注釋一步一步來。

偷工減料直接寫成一行不提倡，這是新手的做法，才工作的時候我也是這麼弄的，快速簡便，但是自己維護起來真的要死人：）更別說別人去維護了，我已經改掉了這個壞習慣。現在只要主動寫成一行，我都覺得彆扭。

壓縮歸壓縮，寫歸寫。

我一眼掃過去就知道什麼效果了啊，況且大部分都是寫成模塊的，類似這樣

.a{}

.a .b{}

.a .b .c{}

.a .b .d{}

.a .b .c .d{}

.b{}

.b .c{}

.b .c .d{}

這樣模塊化非常清晰，就是粘貼複製起來都省事的多啊。

豎著來才奇怪呢，一個個間距這麼遠，誰知道你們什麼聯繫，而且及其浪費空間。

這樣寫舒服啊，我就是這麼寫的。至於看著累，你模塊跟模塊之間寫個注釋不就行了。類似：

/* menu */
.menu li{float:left;padding:4px;}
.menu li a{display:block;color:red;background-color:#fff;}

/* left-nav */
.left-nav li{float:left;padding:4px;}
.left-nav li a{display:block;color:red;background-color:#fff;}

(感覺很舒服很清晰啊)

一行一個樣式，一屏幕就幾個選擇器，寫著不累么？

當然，個人愛好，你不喜歡可以先格式化一下嘛。至於說SB么，樓上某位？

至於壓縮代碼，那是上線前過一下grunt的事情，而且壓縮後會把注釋，所有的空格都幹掉的。所以代碼是這樣的就是未壓縮的，手寫出來的。

有可能是用less自動生成的

我是橫著寫的啊，因為

  1. 好通過肉眼看選擇符而知道自己在改哪一塊的HTML

  2. 一般實現某一塊的樣式，這塊樣式也彼此有關聯性，所以彼此有關聯的選擇符放在一起，如果不橫著寫，上下滾來滾去的容易出錯也累啊

我不僅這樣寫，而且寫的時候都是按照從外到內，從布局到文字的順序寫，這樣子寫出來一目了然，找東西也非常方便，不用老是敲回車。

最重要每行一條規則，感覺好浪費屏幕的空間啊。

有人說版本管理中紅了一整行，很難看出哪些地方被修改過，說明對CSS還不夠熟悉，要一個個去找，熟悉的話掃一眼代碼，就能在腦子裡面呈現元素長什麼樣子好嗎

我最開始做前端是這樣子寫，後面寫了一年多換行的方式感覺效率實在太低，於是又改回一行的方式。

而且我寫css的方式是先寫出整個頁面的html結構定好class

然後在CSS文件中寫出所有需要的樣式選擇器：

.a{ }

.a .b1{ }

.a .b2{ }

.a .b2 .c{ }

最後再去填充具體樣式，這樣子我寫到某個模塊，發現父級缺少某些樣式，一眼就能找到需要的位置，不用來回滾動代碼。

並且不同的模塊之間通過注釋或者兩行空白分割，並沒有感覺到非常亂，反而不同的模塊功能一目了然。

==================================

那些說換行對版本管理不友好的，請問你們寫HTML也要換行嘛？？？

&


嗯，你們可以這樣寫html
&

=========================================

正在改一個換行寫的樣式，實在不能忍，尤其是需要上下移動游標時候，簡直就是折磨，橫著移動游標我好歹可以按住ctrl快速移動，上下需要按N次上下箭頭，或者換成滑鼠操作。

所以我還是先寫成一行，完了格式化成分行。

該說顯示器太大還是太小，居然只在意這種細節。

——當然從另一個角度說——

該說項目太大還是太小，可以只需要在意這種細節。

這絕對是壞習慣

難道都不用版本管理么

都寫一行沒什麼，花括弧前後、分號後沒有空格，才叫難受。

其實這個例子，用less的nested rules不知多好…

能說這不是好習慣么。

這樣寫起來是爽是快，可維護起來呢？其他人查找屬性、改代碼會很費勁。

所謂「減小css文件，提高載入速度」的理由也很牽強，不提less或sass，難道寫完的css都不壓縮就直接上嗎？題主是在公司實習不是在自己玩。

所謂「查找方便」的優點更不靠譜，難道查代碼定位是靠肉眼？

所謂「基本功」的問題也不科學，基本功好的人是精簡合理地使用css屬性，不寫冗餘代碼，類似下面這樣，而不是人工壓縮代碼。

如果公司有代碼規範的話，你應該去仔細看看再跟你同事討論，我想大部分應該會像下面這樣：

如果公司代碼規範也要求寫成一行，，，那你就這麼寫吧。。補充下：即便真是如此，還是應該去學好的代碼規範和風格，這也是實習的意義。

呃…

我也是這樣寫的，而且我沒意識到這樣寫會令人討厭。大哭…

我這樣寫的根本原因是為了減少代碼行數，不想打開一個css就要拉很長的滾動條。（這屬於強迫症么？）

提問者問的是為什麼。回答的大多是現在大家的做法。

在sass之類的工具普及很少的時代。這種寫法是很常見的。那種時候寫css不像現在這樣有泛編程概念。寫成一行方便查找，文件小。。

之後的各類後處理工具完善，你再看這樣自然就覺得反常了。不過現在大多數情況下你也不會直接寫css

這沒什麼，我剛開始沒用 gulp 的時候都是這樣寫 css，因為可以節約體積，而且在無法嵌套的原生 css 里，這樣的寫法反而更整齊。

如果你使用 sass，這樣的書寫格式叫做 compact。

掃了一下現有答案，發現喜歡一行寫過去的，都匿名了。難道是怕被說政治不正確嗎？啊哈~

其實，我發現一個現象，大部分前端偏JS的同學喜歡豎著寫，而大部分前端偏CSS方向的同學喜歡橫著寫。

騰訊有個崗位叫『重構工程師』，沒錯，我曾經就是。我以前在騰訊的主要工作內容就是寫HTML+CSS。

以前我們團隊的規範就是要求統一橫著寫。比如這樣：

不僅如此，我們的規範裡面還包含更變態的，寫css時，要先寫布局類css、然後寫表現類css、值比較長的放最後，比如background-image之類的。

想當年，你們在激烈的討論寫js時要不要加分號的問題，我們重構界也在討論css最後一個值要不要加分號。。。囧啊

我個人是比較喜歡一行寫，主要是因為：

1、寫得快。按空格的速度肯定是快過按回車的，因為你的拇指一直都在空格鍵上。

2、看得多。一眼可以看到整個模塊、甚至整個頁面的css代碼，一行寫一個css屬性，滾軸要經常來回滾動，效率太低。

當然，這個還是看個人習慣和團隊風格，喜歡怎麼寫就怎麼寫唄。

再多說兩句，看到很多同學說寫less。看過非常多的同學在寫less的時候，層級套的太深了，和dom結構一樣，一層套一層，簡直沒法看。

我個人不推崇使用less嵌套，原因很簡單：查找不方面。

舉個栗子，如圖，在調試css的時候，經常會先複製chrome的css選擇器，然後到編輯器里搜，如果嵌套了，就沒法快速定位到你要修改的行了。

最後，安利一下我一直在用的css命名規則，嘔心瀝血，多年行業經驗總結： CSS命名之姓氏命名法

推薦閱讀：

※前端開發 全屏向下滾動怎麼設計——豆瓣2015電影案例???
※HTML+CSS有哪些常用的居中方法？
※html布局時，元素塊上下間距，用margin-top還是中間插入一個空元素給定height？

TAG:前端開發 | CSS | 前端工程師 | CSS布局 |