1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HTML/CSSのclass命名基本事項

Posted at

ポートフォリオを作成していますが、classの命名が杜撰だったため統一性が薄れ、メンテナンス性が低くなってしまいました。
命名における基本ルールについて、改めて勉強したことを自身と同じ初学者向けにまとめました。

##一目で理解できる名前を英語で命名する
要素の性質が理解しにくい名前は、メンテナンス性が低くなります。
例えば、class名「1」「2」「3」・・・などと全て番号で命名してしまうと、把握するのに時間がかかり編集作業に無駄が増えます。
「title」「menu」「btn」・・・などの方が、可読性が高く後々編集しやすいです。

極力短い名前で命名する

気をつけなければ、クラス名は長ったらしく読みにくいものになってしまいます。
使用する単語は、極力簡単で短いものにすると読みやすくなります。
例えば、「顧客」という言葉を英語で表現すると「customer」になりますが、似た意味で良いなら「user」の方が短く済みます。

レイアウト上の意味ではなく、機能上の意味を表した命名をする

例えば、赤字で強調したいテキストがあるため、class名を「txt-red」と命名しました。
しかし、後々青字に変更したり、太字や下線にするなど、レイアウトは後々変更する可能性があります。
そうなるとclass名も変更する必要が生まれますし、放置すると可読性は低くなります。
この場合のclass名は、「txt-attention」などと機能面を表す命名をすることで、破綻するリスクを回避できます。

命名規則パターンを遵守する

上記を守っても、パターンに統一性がなければ可読性は薄れていきます。
個人開発なら自分ルールを作成しても良いですが、ほとんどの場合はチームで通用する命名規則を習得する必要があります。
代表的な命名規則は3つあり、「OOCSS」「BEM」「SMACSS」とあります。

どれを選べば良い?

機会があればまとめたいと思いますが、既に様々なサイトで分かりやすくまとめられているので、詳細は調べてみてください。
それぞれメリットデメリットありますが、最もメジャーで使用しやすいのはBEMです。迷ったらBEMが良いと思います。
OOCSSの考え方の方が個人的には好きですが、まずはBEMを使いこなしてからかなと思いました。
SMACSSは、OOCSSとBEMの発展版なので、いきなり手を出すのはハードルが高いかなと感じました。

最後に

様々な考え方があるので、決まった正解はないようです。
命名規則の学びの導入として、参考になれば幸いです。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?