CSS 方法論

用程式化方法撰寫更乾淨的 CSS。

排名

輸出
滿意度滿
興趣興
使用程度使
知道知

滿意度、有興趣、實際使用、有聽過比例的排名。

少於 10% 聽過的技術不算在內。每個比例的根據：

  • 滿意度： 還會再用 / (還會再用 + 不會再用)
  • 有興趣：想要學 / (想要學 + 沒興趣)
  • 實際使用：(還會再用 + 不會再用) / 全部
  • 有聽過：(全部 - 沒聽過) / 全部

逐年體驗

輸出
百分比%
數量Σ

技術的逐年調查意見概要。

不會再用
沒興趣
還會用
有興趣
沒聽過

BEM

Atomic CSS (Utility-first CSS)

OOCSS

SMACSS

ITCSS

只有 1 年資料的技術不算在內。

區分正面/負面

輸出

這張圖表以中間軸線往兩旁分為正面（想要學、還會再用）vs 負面（沒興趣、不會再用）的體驗。

長條的寬度代表答題者知道某技術的數量。

BEM
完成百分比： 80.9% (9302)
完成百分比： 80.9% (9302)

輸出
百分比%
數量Σ

2019

2020

不會再用
沒興趣
還會用
有興趣
沒聽過

Atomic CSS (Utility-first CSS)
完成百分比： 81.1% (9323)
完成百分比： 81.1% (9323)

輸出
百分比%
數量Σ

2019

2020

不會再用
沒興趣
還會用
有興趣
沒聽過

OOCSS
完成百分比： 81.1% (9325)
完成百分比： 81.1% (9325)

輸出
百分比%
數量Σ

2019

2020

不會再用
沒興趣
還會用
有興趣
沒聽過
我們詢問 CSS 社群成員，分享「年度精選」

我的 2020 精選：The CSS Cascade

With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade.

我們詢問 CSS 社群成員，分享「年度精選」

Sacha Greif

這份調查的作者

SMACSS
完成百分比： 81.2% (9331)
完成百分比： 81.2% (9331)

輸出
百分比%
數量Σ

2019

2020

不會再用
沒興趣
還會用
有興趣
沒聽過

ITCSS
完成百分比： 81% (9313)
完成百分比： 81% (9313)

輸出
百分比%
數量Σ

2019

2020

不會再用
沒興趣
還會用
有興趣
沒聽過

CUBE CSS
完成百分比： 81.1% (9317)
完成百分比： 81.1% (9317)

輸出
百分比%
數量Σ

2020

不會再用
沒興趣
還會用
有興趣
沒聽過

其他工具
完成百分比： 0.9% (99)
完成百分比： 0.9% (99)

輸出
百分比%
數量Σ

此分類裡的其他工具。（自由填答）

整體愉悅感

輸出
百分比%
數量Σ

開發者目前對於此分類的整體現況是否開心？程度從 1（非常不開心）到 5（非常開心）。

推薦資源

Scalable Modular Architecture for CSS (SMACSS)

CSS architecture expert Jonathan Snook shares his experience building large sites with large teams to make your CSS more maintainable using his SMACSS methodology.
感謝贊助我們的伙伴！ 深入瞭解。
« 前一項： CSS 框架後一項： CSS-in-JS »
Charts built with Nivo. 存放在 Netlify。
有問題？發現臭蟲？請填寫 Issue。 Join us on Discord.
Press option/alt to enable translator mode.