CSS布局中有什麼不好的習慣？

01-05

ul不放心，一定要div&>ul
大家先float再說
元素結構不合理，沒關係，用margin/padding來調，就像一堵牆造歪了，用填充水泥的量來達到垂直的效果

width: ???px

height: ???px

如今，設置 width 和 height 是非常不好的習慣。

請盡量加 min 或 max。

第一，盡量用最簡單的最少的規則去控制

第二，能用css控制的，不要用js去控制

第三，如果不考慮低端瀏覽器的兼容性的話，可以多使用css3新特性去布局

第四，class的命名要有規則，一級二級三級之間清晰明了都樣式表就能大致清楚頁面結構

第五，盡量使用低級別選擇器拒絕使用id選擇器

第六，可以用一用一些css預處理軟體

暫時想到的是這些大的原則還有有些技巧性具體案例再慢慢補充

1. 操之過急，為了快速應對當前任務肆意妄為

隨意命名 class name
為了當前 UI 效果編寫不恰當的 CSS 屬性（不靈活，兼容性不強，只能適應於當前狀態）

為了快速完成任務，以及實現當前任務的 UI 效果，我們會產出不恰當 class name，以及編寫不易於維護或者不靈活的 CSS 屬性。這對同一項目的其他開發人員（或者不久後的自己）在重構或者維護 CSS 時造成不必要的麻煩。要抱著一顆同理心，時刻想著未來某一天自己審視這些代碼時會造成的影響。

2. 濫用嵌套選擇器

濫用嵌套選擇器 { .a .b .c }，缺乏對頁面內容的結構化/組件化。尤其當下 CSS 編譯語言的興起（LESS，SCSS, SASS），往往濫用它們的「嵌套」特性，儘管嵌套特性讓代碼看起來更有組織以及富有邏輯性，但它同時也產出的大量的代碼。

更可怕的是，不恰當的嵌套導致我們的 CSS 無法跨項目應用。如：你要在其他項目或本項目的其他地方應用 .c ，這時候你必須得為在它的父級上應用 .b ，以此類推。

儘可能將樣式結構化/塊化（BEM 方法論：BEM - Block Element Modifier），每個塊相互獨立，不依賴於另外的塊。

3. 為了 class name 足夠簡短，產出無法理解的 class name

縮寫的例子就不一一列舉了，相信大家或許都有過這樣的做法（我也不例外），這樣的做法會導致項目開發的其他人員（或許不久後的你自己）看到相應的 class name，根本無法理解。這樣只能打開 F12 查看樣式或者查看 css 的相應值才能推斷出該 class name 的用途。

4. 對於解決特殊問題的黑科技(hack)代碼段或屬性不加以注釋

為了實現某些效果，它們比較複雜或者較為特殊，我們需要寫一些不常見的 CSS 代碼片段或個別屬性，例如（在不藉助 JS 的幫助下，僅僅用 CSS 來實現固定比例並且具有響應式的圖片模塊），我們編寫的一些 CSS 屬性是較不常見的（用 padding 屬性再賦予一個百分比數來固定比例）。

如果不對特殊場景下的 CSS 代碼片段加以注釋，其他人將對此代碼塊無法理解，因為它們特殊/不常見，在維護或者重構 CSS 的時候，可能誤刪它們。

5. 避免使用 tag 或 id 作為選擇器

為了簡潔、快速，我們不為該 DOM 節點添加 class name，而是直接用 tag name 或 id 作為選擇器編寫 CSS 屬性，例如 ul li {...} ， #id {...}

Tag name 影響的 DOM 範圍將非常廣泛，一個項目中，重複的 tag 隨處可見，而且通常情況下它們的樣式不完全相同，例如垂直布局的 ul 和水平布局的 ul。

Id 選擇器的優先順序是非常高的，使用 id 直接打破了選擇器的扁平化，從而影響編寫 CSS 的信心和把握。

6. 使用兼容性不高的 CSS 屬性

近期火熱的 flex，grid 都為 CSS 布局迎來了巨大的突破，使用它們很容易實現我們要想的效果。但是在使用它們之前，跟 boss 們溝通一下「咱的產品要支持到 IE 的啥版本」。

建議在使用較新的 CSS 屬性時，查看它們的兼容性，可以去 W3C，或者 http://caniuse.com/

CSS發展到今天，實現布局的方案太多了：

古老的table布局，千萬不要覺得有了div,table就應該退出歷史了，該用的時候還是需要用的，比如數據表格
float，
position
display:table
flexbox
grid

當然還有shapes之類的實現一些藝術性的布局。

上面是一些布局實現方案，那至於什麼是不好習慣。那就要看自己的CSS功底了，雖然CSS簡單，但其中還是有一些細節的，比如有float的地方，不應該有display:block；比如有flex的容器，子元素不應該有float的出現之類。那麼怎麼注意這些細節呢？一是規範文檔，二是經驗。

其中最為重要的是在合適的地方採用合適的布局（那是因為在CSS中條條大道都可通羅馬，不信你試試）

.a .b .c {}

首先你要確定用哪種方式去做布局，（大漠老師在上面說了很多方式
不好的習慣來自於你隨心所欲的去寫代碼，一個好的 style-guide 很重要，我推薦我們的 ElemeFE/style-guide
Review 自己寫好的代碼，在其中能夠找到可以改進的地方去完善，那麼你就會提高
個人覺得：不管是 Post-CSS、Sass、Less 都是很棒，前提是你能夠正確的使用它
重複的樣式，可以抽出來，避免代碼過於重複太多

其實一個好的習慣有很多。但是我覺得最重要的一點是「嚴格要求自己」因為這樣才會讓你變得更好

有多少人為了避免層級問題就不假思索的直接寫了 z-index=999？實際上這個值幾乎不用超過 2 就能解決所有問題。

一言不合就加 !important

1.很多人也都說了，命名的不規範，一定要按照功能來命名，而不是表象。比如表示錯誤的紅色要命名為error而不是red

2.div的濫用。上次給部門小同學看代碼，發現div的布局寫的比傳統的table的代碼還多，這就不行了。再比如能用ul解決的非要外層加個div。

3.class的濫用。比如ul li {}能解決的，非要在li上又加個class

4.頁面整個架構沒研究好就下手，導致了後期的修修補補，這種情況特別不好，表面上是修好了，但是可維護性非常低。

5.當然建議使用更高瀏覽器兼容的css3，可以實現更多原先只能由圖片來實現的效果，但是有很多客戶群只用ie核心，甚至只支持ie低版本，所以寫css的時候要兼顧兼容性，做好後最好在各版本瀏覽器上看看，盡量做到周全。

6.時間允許的話盡量寫注釋。這是利己利人的好事。

1. 由於英文不精，class的命名上，語義無法表達到位是常有的事。取名偏模塊類還是單項個性化類，又是頭疼的問題，用了通用模塊類，卻時常需要後增額外類名以確保設置個性化的樣式，從而導致class屬性節點超長。

2. 由於強迫症，時常添加無意義的樣式以確保上下一致美化。

3. 貪圖便捷濫用float而不採用inline-block等屬性。

4. 不從根源解決瀏覽器兼容問題，貪圖快，直接HACK。

頁面div和class濫用，文檔沒有結構化。項目中依賴庫較多，很多庫一些功能在項目中都沒什麼用。

不要有事兒沒事兒的加權重

盡量減少迴流重繪

1。用的名字看不懂

2。一個注釋都沒有

3。沒用的div加太多