鬆耦合
當你能做到修改一個元件而不需要修改其他的元件時，你就做到了鬆耦合。

將Javascript從CSS中抽離
在IE8和更早的版本，存在CSS表示式。CSS表示式允許你講Javascript直接插入到CSS中，這樣可以在CSS程式碼中直接執行運算或其他操作。如：

    .box {
        width: expression(document.body.offsetWidth + 'px');
    }

CSS表示式包裹在一個特殊的expression() 函式中，可以給它傳遞任意Javascript程式碼。但這對於程式碼維護來說是一場噩夢。IE9不再支援CSS表示式。
2017年3月，微軟宣佈 Edge 瀏覽器將支援 CSS 變數。（詳細可參見阮一峰老師的這篇文章）

將CSS從Javascript中抽離
CSS和Javascript之間清晰的分離是很有挑戰的，這兩門語言相互協作的很不錯，所以經常講樣式資料和Javascript混寫在一起。比如：

    // bad
    element.style.color = "red";
    element.style.left = '10px';

將CSS從Javascript中抽離意味著所有的樣式資訊應該保持在CSS中。當需要通過JavaScript來修改元素樣式的時候，最佳方法是操作CSS的className，比如：

    .reveal{
        color: red;
        left: 10px;
        top: 100px;
        visibility: visible;
    }
    // good(js原生方法)
    element.className += "reveal";

CSS的className可以成為CSS和JavaScript之間通訊的橋樑。任何時刻CSS的樣式都是可以修改的，而不必更新Javascript。Javascript不應當直接操作樣式，以便保持和CSS的鬆耦合。當然有一種使用style屬性的情形是可以接受：當你給頁面的元素作定位的時候，並且通過計算（計算無法再CSS中完成），此時可以使用style.top等等。
將Javascript從HTML中抽離

    // bad
    <button onclick="doSomething()" id="action-btn">Click me</button>

    // good
    function doSomething() {
        // 程式碼
    }
    var btn = document.getElementById('action-btn');
    btn.addEventListener("click",doSomething, false);

下面寫法的優勢在於，函式doSomething() 的定義和事件處理程式的繫結都是在一個檔案中完成的。如果函式名稱需要修改，只需要修改一個檔案。
在HTML中嵌入Javascript的另一種方法就是使用script標籤，標籤內包含內聯的指令碼程式碼，如下：

    <!-- bad -->
    <script>
        doSomething();
    </script>

最好將所有的Javascript程式碼都放入外接檔案中，以確保在HTML程式碼中不會有內聯的Javascript程式碼。

文章內容從《編寫可維護的Javascript》[美] Nicholas C. Zakas著 一書中總結寫出。