CSS設計中的錯誤大整理!

如果有人發明時間機器,那應該將這些

錯誤糾

正,不然可把前端程式猿們給還慘了。大家一起看看都有哪些CSS規則應該完善。

CSS設計中的錯誤大整理!

Css 程式碼

white-space: nowrap 應該 white-space: no-wrap

並且不應新增換行符行為 white-space

vertical-align不應該適用於表格單元格。相反,CSS3對齊屬性應存在於級別1中。

vertical-align: middle應該text-middle還是x-middle因為它不是真正在中間,這樣的名字會更好地描述它做什麼。

應該計算百分比高度,fill-available而不是在自動情況下未定義。

表佈局應該是理智的。

Box-sizing應該是border-box預設的。

background-size一個值應該複製它的值,而不是預設第二個值auto。同上translate()。

background-position和border-spacing(所有2軸屬性)應首先採用* vertical *,以匹配4方向屬性margin。

類似的4值短序margin應該逆時針方向(因此內聯起始值在塊起始值之前)。

z-index應該呼叫z-order或者depth應該只對所有元素起作用(就像在flex專案上一樣)。

word-wrap/ overflow-wrap不應該存在。相反,overflow-wrap應該是‘white-space’上的關鍵字,如nowrap(no-wrap)。

永遠不應允許盒子的頂部和底部邊緣自動摺疊在一起,因為這是所有邊緣摺疊邪惡的根源。

邊緣部分崩潰而不是奇怪的規則來處理最小/最大高度?

表(與其他非塊一樣,例如flex容器)應該形成偽堆疊上下文。

該currentcolor關鍵字應該有一個破折號current-color。

應該有一個可預測的顏色命名系統,而不是任意的X11名稱。

border-radius本來應該的corner-radius。

當設定相反的偏移屬性(例如,左+右)時,絕對定位的替換元素應該伸展,而不是開始對齊。

hyphens應該呼叫該屬性hyphenate。(這是hyphens因為XSL:FO人反對hyphenate。)

rgba()並且hsla()不應該存在,rgb()並且hsl() 應該獲得可選的第四個引數(並且alpha值應該使用與R,G和B或S和L相同的格式)。

後代組合應該是»和間接兄弟組合應該是++,所以選擇者的ascii藝術之間有一些邏輯關係

在*-blend-mode效能應剛去過的*-blend

unicode範圍的語法應與CSS的其餘部分一致,如u0001-u00c8。

Unicode範圍不應該有自己的標記化或令牌處理的單獨的微合成語法。標記化駭客需要使選擇器(例如,u + a)處理作為unicode範圍標記的事物,或使unicode範圍處理其他大範圍的標記(數字和維度有和沒有科學記數法,識別符號,+)都很可怕

font-family應該要求引用字型名稱(就像來自“外部” CSS的所有其他值一樣)。處理不帶引號的字型名稱的規則使解析變得font愚蠢,因為它需要font-size消除歧義的值。

對於彈性基礎與寬度/高度的關係,Flexbox應該不那麼瘋狂了。也許:如果寬度/高度是auto,使用flex-basis; 否則,堅持寬度/高度作為不靈活的大小。(這也使得最小/最大寬度/高度行為超出了通用定義。)

:empty應該是:void,並且:empty應該選擇僅包含空格的專案在規範中修復,等待實現檢查Web-compat 。。。

table-layout: fixed; width: auto 應該導致具有固定佈局列的填充表。

“文字方向”應該具有upright初始值(給定“寫入模式”的最新更改)。

@import規則要求(a)始終命中網路,除非您指定快取頭,並且(b)為每次匯入構造新的CSSStyleSheet物件,即使它們是相同的。它應該有更積極的基於URL的重複資料刪除並允許共享樣式表物件。

選擇者有可怕的未來證明。我們應該拆分頂級逗號,只忽略未知/無效段,而不是整個事件。

:link應該一直有:any-link語義。

的flex速記(和flex-shrink和flex-growlonghands)應該接受fr單元,而不是裸露數字來表示撓曲餾分。

display應該呼叫該屬性display-type。

該list-style屬性應該叫marker-style,並list-item更名為marked-block或東西。

‘text-overflow’屬性應始終適用,而不是依賴於 overflow

line-height:應計算到等效的行高:,以便它有效地繼承百分比而不是長度

::placeholder應該::placeholder-text而且:placeholder-shown應該是:placeholder

‘overflow:scroll’應該引入堆疊上下文

size應該是一個簡寫,width而height不是具有不同定義的@page屬性

我們可能應該避免在網格屬性中使用ident混合關鍵字(span),可能使用功能表示法(如span(2))。

CSS中基本上不應該允許註釋(與HTML相比,基本上只允許它們在內容的位置),因為它使得它們在物件模型中基本上不可表示,這反過來使得直接在物件模型之上進行構建編輯不可能

Flexbox中的對齊屬性應該是寫入模式相對的,而不是相對於flex-flow的,因此可以具有合理可理解的名稱,如align-inline- *和align-block- *。