CSS 有哪些反人類的地方？

01-15

目前遇到的幾個
1. 盒模型的border和padding
竟然會增加div的寬度和高度

2. 沒有直接設置垂直居中的方法
vertical-align只能在特殊情況下使用
line-height耦合度又太高
難道只能
position:absolute;
left:0;top:0;right:0;bottom:0;
margin:auto;
嗎？
還沒找到更好的方法。。。

3. 多個塊margin疊加會產生的各種情況
最簡單的一種就是大的margin吃掉小的
4. E:first-child等的選擇器為什麼E要使用子元素而不是父元素？
5. px竟然不是邏輯上的像素，而是假定設備的像素長度。(不知道怎麼描述了)
你們遇到過哪些？

你寫的幾個並不足以說明 CSS 反人類，比如說：

盒模型的border和padding 竟然會增加div的寬度和高度

的確在很多場景下默認盒模型不太直觀，但是現在你這樣 normalize 一下就解決掉了：

*, *::before, *::after { box-sizing: border-box; }

而且 content-box 有的場景下還是有用的，比如當你更關注容器內的尺寸而不是外部尺寸時。

沒有直接設置垂直居中的方法 vertical-align只能在特殊情況下使用 line-height耦合度又太高難道只能 position:absolute; left:0;top:0;right:0;bottom:0; margin:auto; 嗎？還沒找到更好的方法。。。

垂直居中的確複雜一些，但是方法也有好多了好吧……再學習學習吧，送你一篇Centering in CSS: A Complete Guide。

多個塊margin疊加會產生的各種情況最簡單的一種就是大的margin吃掉小的

這是 feature，謝謝。

E:first-child等的選擇器為什麼E要使用子元素而不是父元素？

這說明你沒有理解選擇器的原理，E &> :first-child 才是你需要的。

px竟然不是邏輯上的像素，而是假定設備的像素長度。(不知道怎麼描述了)

長度單位的確挺坑的，但如果 px 完全按邏輯上的像素，那麼同樣尺寸的屏幕如果解析度差別很大，那麼 px 在設計中就沒太大參考價值了，我們可能會創建另一個表達「差不多長度」的單位。

當然，我覺得「反人類」的地方還是有的，不過我總結下來最主要就是：

語法太弱，缺少抽象的機制。比如寫起來不支持嵌套，直接寫 CSS 很容易在選擇器中出現各種重複，非常不利於維護。抽象機制的缺失導致無法精確表達設計意圖，在開發中造成大量冗餘且丟失語義。

其他複雜特性裡面，我覺得最難熟練應用的莫過於 vertical-align 了。我用這個來實現行內元素的垂直對齊，基本都是每次上來查——查完一知半解去試——最後放棄治療無恥地改用 margin-top——下次再查，這樣一種循環……關於 vertical-align，我也給一篇最完整的介紹吧：Vertical-Align: All You Need To Know

這個問題真回答不出來。在我的感覺里，CSS一直都是友好的，哪怕是當年的IE5之類的，我都覺得是一種幸福，加上這些年的變化，使用CSS已經比以前幸福多了。只不過反不反人類都無所謂了，寫CSS沒錢途

的確，我覺得是 css 一開始不提供垂直居中方案就最重大的反人類。

雖然後來人們發明了無數 hack 來解決這個問題，固定高度，無固定高度的各種寫法，甚至 css 自己都不好意思了，給出了彈性盒模型的解決方案，但這個無足以挽回我們之前寫在 IE 里的那些 hack 代碼。不過還好，畢竟不支持 flex 布局的那些個瀏覽器已漸漸沒落。

存在即合理，等你用久了你會發現很多屬性是迫不得已這樣設計的，每一個規範都是無數的人進行過無數次討論的。再久一點你會發現這樣設計還是很合理的。

我覺得 CSS 唯一反人類的就是全局作用域，選擇器一樣，就會被任意覆蓋掉了，容易衝突。然而這也是 CSS 的一個很重要的特性。糾結。

CSS 的確有（或者曾經有）一些不好用的地方，但題主說的這些並不是。

空白居然是選擇符

.a .b 和 .a.b 居然不同

感覺最主要的坑是css命名污染的問題（所以執行css規範很重要）

1. 盒模型的border和padding 竟然會增加div的寬度和高度

有一個叫做box-sizing的屬性可以解決這個問題，將盒模型設為：border-box

2. 沒有直接設置垂直居中的方法vertical-align只能在特殊情況下使用 line-height耦合度又太高難道只能position:absolute;left:0;top:0;right:0;bottom:0;margin:auto; 嗎？還沒找到更好的方法。。。

水平垂直居中的話，實現方案有很多種（不下四種）：flex，position+margin:auto，vertical-align+display，position+transform

3. 多個塊margin疊加會產生的各種情況最簡單的一種就是大的margin吃掉小的

是個特性，不過利用BFC能夠解決這個問題

4. E:first-child等的選擇器為什麼E要使用子元素而不是父元素？

可以用 parentElement &> :first-child

說點個人的理解：E:first-child這種是同時滿足選擇器，需要滿足E的同時，也是父元素的第一個節點。本身:first-child是個偽類選擇器，偽類選擇器相當於給滿足條件的節點加上first-child這個類，是可以獨立使用的，而E的加上則是進一步限制了選擇範圍（同時也增加了選擇器的特殊性）

@顧軼靈已經說得很清楚了，我再粗略地補充幾句吧。

1. 盒模型的border和padding 竟然會增加div的寬度和高度

盒模型還談不上反人類，只是可能把 border-box 設為默認值會更符合多數人的習慣，bootstrap 就是這麼做的。

3. 多個塊margin疊加會產生的各種情況最簡單的一種就是大的margin吃掉小的

margin 重疊屬於特性，原因應該是為了讓段落排版看起來更舒服自然。

4. E:first-child等的選擇器為什麼E要使用子元素而不是父元素？

只要了解什麼是偽類選擇器，什麼是偽元素選擇器，就好理解多了。顧名思義，偽類(單個冒號:) 就相當於普通的類選擇器，是作用於當前元素本身的，而偽元素(雙冒號::)則作用於選中的元素。

拿偽類 :first-child 和偽元素 ::first-letter 作為例子，p:first-child 下定義的樣式規則都作用於 p 元素本身，可以看作是給第一個 p 元素添加一個類 .first-child；而 p::first-letter 下定義的樣式規則作用於 p 的第一個字母(相當於把第一個字母當成一個單獨的元素)，對 p 本身的樣式沒有影響。

關於這個比較坑的一點就是前期(CSS3之前)沒有把偽類和偽元素的定義區分開來，導致現在很多人還在寫 :before、:after。

像嵌套和作用域可以用預處理器和相關構建工具達到類似的目的，缺點就是一不注意 build 出來的體積就大了好多。

其他反人類的地方暫時想到兩點。

多行文本省略... 好久沒寫 CSS 了，請問已經2017年了，相關的方案出來了嗎？
z-index... 倒不是說設計上有什麼大問題，就是在與很多其他屬性搭配的時候坑好多，反正我掌握不了，該死的 stacking context。

有想到其他的再補充吧。

css最反人類的地方是ie各種不支持！！！

!important居然不是not important？

我覺得瀏覽器大戰就很反人類了

題主說的那些都是 feature，這樣設計是有原因的。

個人認為設計不太好的地方主要有這兩條：

color 居然指的是字的 color。私以為應該改為 font-color，類似 background-color，border-color 等等。

-webkit-text-size-adjust：瀏覽器不應該關心所謂最小字體應該是多小，管的太多了。（所謂右派程序員）

沃卡，這麼簡單易懂的東西還反人類啊。按這個邏輯，Javascript 的回調地獄，豈不是仇視人類了？ C 的最引以為傲的宏，豈不是與人類不共戴天了？ Lisp 裡面的括弧，呵呵，我都沒語言形容了

圖片和文字不垂直居中，vertical-align一點卵用都沒有

原生:沒有繼承，不支持變數

垂直居中最簡單可以transform :translateY(-50%)

vertical-align 沒有之一。。。

然後就是對於瀏覽器的統一規範化問題一個css非得寫4,5種格式。。。

還有就是flex布局雖好但是也會存在這樣那樣的兼容問題

不過好在一切都在進步～～

css寫了好久咯，貌似沒發現什麼反人類的地方。

題主說的好像也沒有太反人類。

不是CSS反人類，而是解析它的引擎反人類...

我就奇怪垂直居中為什麼沒人提align-items，反正flex布局挺好用的，css一直在進步，反人類的是瀏覽器碎片化問題啊。