CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
Post on:2024年7月11日
CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか?
BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。

Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。

単語はテーマ別にグループ化されています。
まずはAction(アクション)、動作や操作を表す単語群です。

Collection(コレクション)、は、包含とグループ化を表す単語群です。
box, component, group, separetor, wrapperなどよく使う単語がまとめられています。

Comparison(比較)は、同等の類似性を表す単語群です。
これもよく使用すると思います。light, dark, min, max, solid, fluid, empty, fullなど対になる単語です。

Numeration(数え方)、は、順序、優先順位、乗算を表す単語群です。
first, secondは増えても簡単ですが、primary, secondaryは増えると悩むかもしれません。single, double, tripleの次はquadrupleです。

Relation(関係)は、2つ以上のものの関連性を表す単語群です。
親と子のparent, childやsiblingはよく使うと思います。

Nature(ネイチャー)は、自然界の単語群です。

Art(アート)は、構成を説明する芸術用語の単語群です。
レイアウトや構成に関する単語は、役立ちそうです。

Theatre(シアター)は、状態を説明する演劇用語の単語群です。
プロジェクトの名前にこういう単語を使用していたことがありました。

Music(ミュージック)は、ペース、音量、配置などを説明する音楽用語の単語群です。

Architecture(アーキテクチャ)は、物体の内部や周囲の空間を説明する建築用語の単語群です。

Fashion(ファッション)は、物の大きさを表すファッション用語の単語群です。

Publishing(パブリッシング)、は、デジタルで出版されたものを表す出版用語の単語群です。

sponsors