ポートフォリオを作成していますが、classの命名が杜撰だったため統一性が薄れ、メンテナンス性が低くなってしまいました。
命名における基本ルールについて、改めて勉強したことを自身と同じ初学者向けにまとめました。
一目で理解できる名前を英語で命名する
要素の性質が理解しにくい名前は、メンテナンス性が低くなります。
例えば、class名「１」「２」「３」・・・などと全て番号で命名してしまうと、把握するのに時間がかかり編集作業に無駄が増えます。
「title」「menu」「btn」・・・などの方が、可読性が高く後々編集しやすいです。
極力短い名前で命名する
気をつけなければ、クラス名は長ったらしく読みにくいものになってしまいます。
使用する単語は、極力簡単で短いものにすると読みやすくなります。
例えば、「顧客」という言葉を英語で表現すると「customer」になりますが、似た意味で良いなら「user」の方が短く済みます。
レイアウト上の意味ではなく、機能上の意味を表した命名をする
例えば、赤字で強調したいテキストがあるため、class名を「txt-red」と命名しました。
しかし、後々青字に変更したり、太字や下線にするなど、レイアウトは後々変更する可能性があります。
そうなるとclass名も変更する必要が生まれますし、放置すると可読性は低くなります。
この場合のclass名は、「txt-attention」などと機能面を表す命名をすることで、破綻するリスクを回避できます。
命名規則パターンを遵守する
上記を守っても、パターンに統一性がなければ可読性は薄れていきます。
個人開発なら自分ルールを作成しても良いですが、ほとんどの場合はチームで通用する命名規則を習得する必要があります。
代表的な命名規則は3つあり、「OOCSS」「BEM」「SMACSS」とあります。
どれを選べば良い？
機会があればまとめたいと思いますが、既に様々なサイトで分かりやすくまとめられているので、詳細は調べてみてください。
それぞれメリットデメリットありますが、最もメジャーで使用しやすいのはBEMです。迷ったらBEMが良いと思います。
OOCSSの考え方の方が個人的には好きですが、まずはBEMを使いこなしてからかなと思いました。
SMACSSは、OOCSSとBEMの発展版なので、いきなり手を出すのはハードルが高いかなと感じました。
最後に
様々な考え方があるので、決まった正解はないようです。
命名規則の学びの導入として、参考になれば幸いです。