我從 2000 年初那會開始用 CSS 了。在那之前，我們一直用表格加 GIF 圖來設計網頁布局，CSS 出現(xiàn)之后我們終于走進了“文明社會”。從此 CSS 成了我最喜歡的編程語言，而回顧它這么多年來的發(fā)展，有一件事是肯定的：CSS 不再是當初的樣子了。我們在 2003 年編寫的 CSS 跟 2013 年總有很大區(qū)別，而如今又一個十年過去，我們如今編寫的 CSS 比之前更強大、但也更加復雜。
當然，CSS 的進化絕非一蹴而就。就如同 Web 一樣，CSS 也是逐步演進，最終成了今天的樣子。大家還記得第一次用上 box-shadow、background-size 還有 border-radius 時的興奮之情嗎？對，這就是 CSS 前進路上的一個個腳印。
不知道大家有沒有關注今年在阿姆斯特丹舉辦的 CSS Day 大會，我看了現(xiàn)場直播，而且明顯感覺這次跟以往不同。CSS 此番迎來了一系列根本層面的變化，甚至有種到了技術奇點的意思。也就是說，CSS 由此分成了 2020 年代前與 2020 年代后兩大階段。想要選定某個元素的父元素，但瀏覽器本身又不支持解析 CSS？沒關系，現(xiàn)在可以直接用:has()。想根據(jù)容器大小調整元素，又擔心可能造成無限循環(huán)？別擔心，現(xiàn)在可以用容器查詢和隨附的新長度單位。這些功能都對 CSS 乃至整個 Web 平臺做出了有益且大家睽違已久的補充。與其他現(xiàn)代功能（例如自定義屬性、min（）、max（）、clamp（））以及關鍵字大小調整（例如 min-content、max-content 和 fit-content）相結合，我們就能打造出前所未有的靈活組件和強大布局。總而言之，我們如今理解和編寫 CSS 的基本方式已經發(fā)生了根本性轉變。
除此之外，標志 CSS 進入新時代的其實是另一個更大、更加根本性的轉變：
多年以來，設計師必須經歷一場艱難卓絕的斗爭，才能打造出高質量的網站成果、把自己的想法真正在瀏覽器當中呈現(xiàn)出來。與此同時，諸如“我真的很抱歉，但您的設計無法用 CSS 實現(xiàn)”每天都被前端開發(fā)者們無奈地說出。設計師設想中的漂亮構圖雖然備受好評，但對于 CSS 這種仍在發(fā)展的語言來說顯得太過先進。誰能理解并克服 CSS 中的種種局限甚至說“怪癖”，誰才有望開發(fā)出殺手級的出色網站。
于是乎，設計師們吸取一教訓，開始創(chuàng)建兼容性更強的布局，比如幾乎全部使用 12 列平均網格。這明顯就是開發(fā)平臺本身的不足所導致。
想在 Figma、Adobe XD 或者 Sketch 等主流設計工具中模擬并設計出一個能充分發(fā)揮 CSS 網格潛力的布局？做不到。想通過取色器等工具在 OKLCH 等廣色域色彩空間中定義某種顏色，從而在現(xiàn)代屏幕上呈現(xiàn)出更加鮮艷自然的色彩？不可能。想要模擬流體排版，根據(jù)窗口或容器大小動態(tài)縮放字體，并像在 CSS 中使用 clamp() 那樣定義最小值和最大值？不可能。或者說定義一種備用字體，在默認網絡字體無法加載時立刻頂上？還是不可能。是的，目前市面上任何一種設計工具都已經跟不上 CSS 的發(fā)展。在這個新時代，CSS 上只需幾行就能輕松實現(xiàn)的功能，反而在設計端找不到對應的選項。設計工具成了前端開發(fā)中的新瓶頸。
在去年的一場演講中，我曾提到應該解決設計工具和 CSS 間差距越拉越大的問題。從自身出發(fā)，我們能做的也只有密切協(xié)作、推出更多原型設計，讓更多人能在網頁設計和開發(fā)的交叉點上工作。但這一切并不容易，而且都需要時間。有些團隊已經展開了探索，并以新的、協(xié)同度更高的方式荼。但對大多數(shù)人而言，打破舊習慣顯然不是易事。
總體而言，我希望看到人們對于 CSS 在設計過程中的認知和作用得到扭轉，將瀑布式流程末尾的樣式演示工具變成早期設計決策中的核心工具。如此一來，熟悉使用 CSS 進行原型設計和 Web 組件構建的設計師將更具價值。作為設計工程領域的自由職業(yè)者，我對這一點充滿信心。
在 CSS Day 的演講上，曾有人問現(xiàn)在的設計師到底要不要學 CSS。而專家 Heyton 給出的答案是：CSS 已經成為一種設計工具、一種達成目的的手段，一種可供探索和使用的素材。更重要的是，它成為一種可供思考和決策的工具，開始步入設計舞臺的最中央。
“我是按設計工具來學習 CSS 的，這就是我對設計的理想。設計代表著一種思維過程……它非常抽象，反映的是我們嘗試成就某事的路徑。在路徑當中，我們需要借助各種各樣的工具。這種工具可能是 Figma，可能是 Photoshop，也可能是 CSS。”
這就是新 CSS，有史以來最強大的 Web 設計工具。只有用好 CSS，我們才能發(fā)揮平臺上的現(xiàn)代功能；只有將 CSS 引入設計，我們才能建立起能靈活適應不同環(huán)境、不同內容類型的設計方案；也只有使用新 CSS，我們才能真正打造出優(yōu)雅高效、簡潔有力的真 Web 成果。正如 Heyton 所言：“我不知道到底該不該用 CSS，但它肯定值得一用?！?
