漸進增強

請參考 Wikipedia 漸進增強文件及 Progressive enhancement is still important。

開發範例

第一步：使用正確的 HTML 元件寫出最基本且立即可用的功能。

<form action="/signup">
  <fieldset>
    <label for="username">使用者名稱</label>
    <input type="text" id="username" autocomplete="username">
  </fieldset>
</form>

第二步：加上需要的 CSS classes。

<form action="/signup">
  <div class="fields">
    <fieldset class="fieldset">
      <label for="username" class="field-label">使用者名稱</label>
      <input class="field-input" type="text" id="username" autocomplete="username">
    </fieldset>
  </div>
</form>

第三步（若有需求）：選擇性用 selector （範例使用 [data-auto-check]）加上想要的 JavaScript 附加功能。

<form action="/signup">
  <div class="fields">
    <fieldset class="fieldset">
      <label for="username" class="field-label">使用者名稱</label>
      <input data-auto-check class="field-input" type="text" id="username" autocomplete="username">
    </fieldset>
  </div>
</form>

<script>
  document.querySelector('[data-auto-check]').addEventListener('input', ...)
</script>

用這樣的開發模式，即可確認在 CSS 或 JavaScript 沒有讀取成功的狀態下，使用者仍然可以操作網站。並在 CSS 或 JavaScript 正常的狀況下，讓使用者用有最佳的體驗。