瀏覽器解析了頁面程式碼然後需要將其渲染成頁面，因此有一個渲染引擎。如果你想做一個網頁，那麼就要透過程式碼去描述這樣一個渲染規則讓瀏覽器的渲染引擎渲染出來 UI 的東西，最早其實是用 HTML 來做這件事情的，比如一段紅色文字：

這樣的描述規則非常簡單、語義化，但是有個問題就是 UI 展現和內容混合在了一起，因此這種描述規則很難適應複雜的 UI 介面描述，而且非常難維護。比如頁面上出現了多段大紅色加粗字型，每一段你都要加上這些標籤，而且每次修改樣式的時候，你都需要把每一處都進行修改。早期螢幕比較小，也不在乎什麼設計，只要有內容就好了。但是後來由於網際網路的發展，資訊量變大，螢幕變大變清晰，頁面內容非常複雜，維護這樣的東西就變得十分蛋疼。為了解決這種問題，W3C 在後面的 xhtml、html5 等規範逐步廢除這些附帶樣式描述的標籤，專門創造了一種 DSL 來專門描述網頁的樣式，那就是 CSS。CSS 就是專門告訴瀏覽器渲染引擎要怎麼渲染的語法描述，比如把某一段帶有 error class 的 dom 變成紅色：這樣一個頁面上，只要 DOM 帶有 error class 那麼渲染引擎就把這段樣式附加到內容上面渲染出來。樣式和內容分離帶來了巨大的效率提升，比如某些頁面使用橙色來描述 error 報錯資訊，它只需要把這個 CSS 的 color 值換成 orange 即可，不需要去改動內容的東西。美觀的靜態網頁又支撐了幾年網際網路的發展，但是新技術的產生（Ajax 等）讓頁面承載更多互動功能變成了可能，可以透過 JS 來控制頁面某個模組的展示和消失以及位置等，這些互動效果底層的實現其實還是 JS 通知渲染引擎去做的，為此渲染引擎為 JS 擴充套件了一系列操作它的 api，比如把 class 為 error 的第一個 DOM 的顏色變成紅色：====回到你的問題，你覺得 CSS 和 JS 重疊的部分太多了。其實不然，不要把 CSS 理所當然的想成 UI 本身，CSS 只是描述 UI 的專用手段，你用 HTML、JS 仍然可以描述，只是不那麼高效和好用。CSS 可以輕鬆的完成簡單動畫，而 JS 卻需要大量計算位置等，是因為對於 CSS 來說大量的計算不需要你來寫了而是瀏覽器內部實現了，（你懂得原因）同樣動畫 CSS 比 JS 實現渲染效能要好。其實 CSS 早期也有 CSS 表示式 這種技術期望能實現部分 JS 的效果，不過幸好還是分離開廢除了。JS 更專注的是功能互動邏輯，但具體的頁面效果反饋還是需要操作渲染引擎實現，除了直接操作之外，更常用的是換一個 class 讓渲染引擎重新讀取對應的 CSS 來重繪頁面。所以 JS 的 DOM 只是 JS 的一部分 API 而已，並不是全部，還有很多東西需要你繼續去探索。