JavaScriptからCSSを隔離する

ある要素のスタイルをJavaScriptで変更する必要があるとき、CSSクラスを操作するのが最善です。
メンテナブルJavaScript ―読みやすく保守しやすいJavaScriptコードのための作法』より。

Styleを使って複数のプロパティを変更している次のようなコードは悪い例です。

// Bad
element.style.color = "red";
element.style.left = "100px";
element.style.top = "100px";

良いコードは、CSSでクラスを定義しておき、要素に対してそのクラスを追加します。

// Good: Natice
element.className += "reveal";

// Good: HTML5
element.classList.add("reveal");

つい、手を抜いてしまい、JavaScriptでstyleを編集してしまうことがありますが、後で大変になります。
CSSに対して疎結合になるように、つねに意識したいです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください