WordPressのテーマ編集をしたらHTMLとCSSの命名が大切と実感した(☝ ՞ਊ ՞)

他の人が書いたWordpressのテーマを編集しています。

事前に予想したよりも上手く作業がすすまず、多くの時間がかかってしまいました。

なぜこのような状況に陥ったのかを考えました。

WordPressのテーマはHTML、CSS、JavaScript、PHPや画像ファイルで作られています。

使われている言語が多いためどこがボトルネックなのかを整理して考えました。

HTMLについて

HTMLは普通に書かれているように見えます。タグはHTML5タグなどが利用されています。一見特に問題がないように見えます。

CSSについて

CSS PreProcessorはLessが使用されています。ボクとはSassが好みですがLessもSassとほぼ同じです。作業中のCSSは一見問題無いです。ボクはこのようなクラス名のCSSファイルを何度か見たことがあります。ウェブ制作会社がよく使っているようなCSSクラス名をしています。

他に気になったのは、CSSの行数がやや多いのではないかということです。WordpressのLessを使用していて4000行近い行数は普通なのでしょうか。CSSがやや膨れている感じはしたもののこの段階ではよくわかりませんでした。

JavaScriptについて

WordPressのテーマ内に書かれているJavaScriptコードは一般的に少ないです。jQueryが使用されていました。

PHPについて

固定ページやページ内で使用されるelementsがファイルに分かれていました。ページ内がコンポーネントごとに分けれてきちんとファイルに分割されている印象があります。

問題をみつける

問題は一見それぞれはそこそこまともに見えるにも係わらず、実際にメンテしてみると更新に大幅に時間がかかってしまうことです。

しかし

しばらくしてHTML&CSSの再利用性が悪いことに気づいてきました。PHPで分割されていると思っていた箇所が分割されていなかったり、ループで記述されていればHTMLを再利用できる箇所が重複で記述されています。

デザインが同じコンポーネントをほかのページで再利用しようとするとCSSのデザインが崩れてしまいます。

どうすればいいか

HTMLのマークアップをしっかりして、クラス名を綺麗に命名するのがいいと思います。HTMLのマークアップとクラスが厳密であればHTMLとCSSが肥大化せず再利用しやすくなります。jQueryを使っていればJavaScriptでアクセスするDOMがわかりやすくなります。

つまり、HTMLを組んでクラス名を厳密にすることが大事です。それが全てじゃないかと思いました(☝ ՞ਊ ՞)

日記

Posted by pugiemonn