Web真相: CSS不是真正的程式設計

發表於2017-10-05

每隔幾個月就會出現一篇文章表明:CSS並不是真正的程式語言。以程式語言的標準來說,CSS過於困難。使用這門語言會很有創造性:

人們對CSS有一些強烈的情愫。

— Dave Rupert (@davatron5000) [September 18, 2017]

來自於:pic.twitter.com/dDspAM8i2F

事實確實如此,CSS不同於傳統的程式設計,且具有缺陷,同任何標準化程式語言相比,使用起來都更為困難。這是由於CSS被設計為一種描繪介面的方式,而不是以程式設計形式實現該介面,例如Canvas的API。CSS的設計初衷就不同於傳統程式語言。

CSS為使用者上網時遇到的一些複雜且未知的東西建立介面,這個設計初衷是很棒的。我在2017年的GOTO Amsterdam大會上詳細講述了CSS和JavaScript的區別(CSS vs. JavaScript: Trust vs. Control

作為一名CSS開發者,你相信使用者代理(大部分情況下指的是瀏覽器)會表現正確的行為。你無法控制CSS發生的時機,但同時你也無需擔心效能、渲染時間和響應的具體細節,因為這些細節是由瀏覽器開發者和瀏覽器所處作業系統決定的。不過很棒的一點是,CSS允許你在其應用的地方修改這些重要的細節。如果你使用JavaScript來建立介面或動畫,你不僅需要做更多深入細緻的控制,還要確保一切都能正常工作,否則可能會阻塞頁面的正常顯示。使用CSS就意味著放棄控制,而去花更多的時間建立友好的響應式互動介面。使用者可能會搞亂你的介面設定,但CSS可以為你規避這種情況。

使用CSS開發不同於傳統模式,並不需要迴圈、條件和變數。但CSS正朝著這個方向發展,Sass作為CSS的擴充套件語言,引入了變數,為CSS未來的發展奠定了基礎。但CSS最需要的不是語法糖,而是你要清楚使用CSS所描繪的介面是什麼。其次,如何確保你使用CSS編寫的介面是足夠靈活的,以至於使用者無法觸發頁面的錯誤也不會無法訪問頁面。當你理解了HTML並使用CSS來控制它的樣式時,你能夠減少很大的程式碼量。

你的使用者們的忠誠度依賴於所在的技術平臺,如果你不打算建立友好的互動來提升使用者體驗,增加使用者的留存度,CSS可能並不適合你。CSS被設計為一種“寬容“的語言,當你的一些程式碼無法起作用時,CSS也不會報錯。因此,漸進增強是很棒的設計。你無需擔心因新增了一行不支援的程式碼而出錯,解析器會跳過它不支援的屬性。當遇到錯誤時,JS解析器會中斷解析並且丟擲錯誤資訊,而CSS解析器會忽略這些錯誤並繼續解析。這對於想要知道錯誤資訊的開發者來說會很奇怪,但是卻讓你從需要使用if來包含各種情況、相容所有可能使用的瀏覽器這一狀況下解脫出來。如何對按鈕使用漸變效果?首先,定義一個背景色,然後在下一行設定背景為漸變。如果瀏覽器不支援漸變效果,它依舊會渲染出一個正常的按鈕,只不過背景不是漸變而已。在這個過程中,你根本無須擔心瀏覽器是否支援漸變。

由於對CSS的設計目的不瞭解而產生了錯誤認知,才導致出現了很多“CSS不是真正的程式設計”的觀點。如果你想要完全控制一切,比如介面、甚至精細到畫素的話,請不要使用CSS。相反,如果你想要構建一個包羅廣泛、多種多樣的頁面,CSS是個很好的工具。編寫CSS需要站在使用者的角度考慮,設計擁有良好互動的頁面,提升使用者體驗,但這並不是說你把一個Photoshop生成的圖片放到頁面就好了。使用CSS構建頁面需要不同於後端語言的技術棧,其次,作為維護者、編寫者的心態也要發生轉變。

不管怎麼說,輕視CSS開發者、將他們視為非純正開發者,這種傲慢的想法略顯荒謬。尤其是在你甚至都沒花時間瞭解CSS的設計目的是什麼,以及它目前驚人的發展速度。

從另一方面來說,CSS本不是也不應該是任何問題的解決方式。例如,你可以建立帶有陰影的畫素,但同時也會對瀏覽器渲染引擎帶來渲染壓力。

對我來說,CSS就是Web的一部分;對有些人來說,CSS的語法顯得很奇怪,以至於讓他們覺得是另一種程式語言。不過這些年來,隨著CSS的發展,它的價值毋庸置疑。在未來很長一段時間,CSS應該也不會消失。因此,如果你不喜歡使用CSS,那就和會使用的人合作開發網頁。如果你的上司要求你使用CSS,儘管我們沒有技術文章或刊物,但是我們有相關的專案和CSS開發者能幫助你。

與其討論“CSS是否有缺陷,需要被替代”的問題,不如以一種積極健康且不同於以往的角度討論CSS:

  • CSS可以做什麼,它有什麼不足
  • 有哪些過去需要其他技術才能實現的,而現在CSS就可以做到的事情,以及如何應用
  • 如何編寫可維護的CSS
  • 你能夠做什麼,來使CSS開發者的開發過程更簡單、容易?
  • 我們使用哪些CSS hack,為什麼不應該再用它們
  • 我們可以做什麼來讓CSS這門語言變得更好、更豐富?

相關文章