CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames

CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか?

BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。

CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames

Classnames

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

サイトのキャプチャ

Classnames

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

サイトのキャプチャ

Action -Classnames

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

サイトのキャプチャ

Collection -Classnames

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

サイトのキャプチャ

Comparison -Classnames

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

サイトのキャプチャ

Numeration -Classnames

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

サイトのキャプチャ

Relation -Classnames

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

サイトのキャプチャ

Nature -Classnames

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

サイトのキャプチャ

Art -Classnames

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

サイトのキャプチャ

Theatre -Classnames

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

サイトのキャプチャ

Music -Classnames

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

サイトのキャプチャ

Architecture -Classnames

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

サイトのキャプチャ

Fashion -Classnames

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

サイトのキャプチャ

Publishing -Classnames

sponsors

top of page

©2024 coliss