2020年4月13日

いろいろなcss命名規則

HTML/CSS 学習

この記事は1年以上前に投稿された記事です。情報が古い可能性があります。

共同作業時や過去の自分を見返した時に混乱しないように。

cssの基本

  • 半角英数
  • 記号は「-」（ハイフン）「_」（アンダースコア）のみ
  • 数字からはじめない（認識されない）
  • 空白スペースを入れない

そもそも↑が守れないとcssとして機能しない。

○○ケース

キャメルケース

2つめの単語の頭文字を大文字で書く。すべての単語の頭文字を大文字で書くことは「アッパーキャメルケース」と呼ぶ。
大文字が「らくだのこぶ」のように見えることからキャメル（=英語で「らくだ」の意）らしい。

ケバブケース

単語を「-」（ハイフン）でつなぐ。WordpressやBootstrapで採用されている。確かなソースはないが、ハイフンでつなぐことが串刺しのように見えるのでケバブ（=肉を串に刺して焼く中東の料理）らしい。

スネークケース

単語を「_」（アンダースコア）でつなぐ。アンダースコアが地を這う蛇のようにみえるからスネークかなきっと。

代表的な設計規則・思想

それぞれの具体的な詳細は長くなるのでさわりだけ。

OOCSS

http://oocss.org/

Object Oriented CSSの略。Yahooの開発者である Nicole Sullivan が提唱。オーオーシーエスエス。
cssに Object Oriented = オブジェクト指向の考え方を取り入れている。「構造と見た目を切り離す」ことをベースにしている。

BEM

http://getbem.com/

Block、Element、Modifierの3つの要素の頭文字から。この3つをクラス名につける。ベム。妖怪人間ではない。

例： `block__element–modifier`

SMACSS

http://smacss.com/ja

Scalable and Modular Architecture for CSS。cssの種類をベース、レイスト、モジュール、ステート、テーマの5要素に分類する。スマックス。

SUIT CSS

https://suitcss.github.io/

Style tools for UI components。ComponentベースなのでReactなどのUI設計と相性が良いらしい。日本語読みはスーツシーエスエスで良いのかな（ググってもカタカナ表記見つけられなかった）。

FLOCSS

https://github.com/hiloki/flocss

OOCSS、BEM、SMACSS、SuitCSSのいいとこ取りをした設計思想。UIパーツを「Foundation」「Layout」「Object」の3つのレイヤーに分け、「Object」をさらに3つの子レイヤーで構成されている。

何がベストか

開発体制や好みや個人思想によるので1つに絞ることはできませんが、設計思想を知っておくとチームで共有しやすかったり、初期デザインの段階である程度コーディングのことを考えながらデザインできたり、無駄なルールづくりや後々の仕様変更にふりまわされにくくなるというメリットがあります。
行きあたりばったりではなく、設計思想をふまえたコーディングを心がけましょう（自戒）。

関係ないですが「アンダーバー」は和製英語って最近しりました…中学か高校の情報の授業では「アンダーバー」と習った気がするぞ。

参考