「OOCSS」とは別の考え方？ | 「命名規則(コーディングルール)」カテゴリー

クラスの名前空間

　状態:試行錯誤履歴 　閲覧数:3,066 　投稿日:2013-07-07 　更新日:2019-10-03

「カプセル化」や「相互汚染の予防」目的の「親セレクタ利用」では、HTML修正が入ったときの変更に弱い
→クラス自身に名前空間を持たせる

.widget-title { }

.widget-sidebar { }

HTML上でクラスを見た人に、その目的が何であるかをすぐに伝えるべき
・クラスはもはやCSSのためだけに利用するものではない

JavaScriptのフックとして機能させる、特徴検出（フィーチャーディテクション）のためにHTMLに追加される、自動テストで使われる、など

おすすめ
・スタイルを持たないすべてのクラスに接頭辞をつける
・JavaScriptのためにjs-を、Modernizrのためには.supports-を使う

順位	ページタイトル抜粋	％
1	「OOCSS」とは別の考え方？	87
2	遠近グリッドはCS3にはないの？	31
3	OOCSS	30
4	「兄弟要素の兄要素を選択するCSSセレクタ」は存在しない	28
5	「CSSプロパティ」書く順番	28
6	「PhotoShop CS3」　と、「Vieas」　の違い	27
7	SVGの色指定は、「枠線 stroke」と「内部 fill」の2種類	24
8	「Fireworks CS3」は「SVG」出力不可	24
9	SCSSは良いことばかりではないかも	24
10	検索エンジンなら画像掲載はOKなの？	24
11	「東京都」のカラーコード取得は難しい	24
12	「Photoshop CS3」で、レイヤーを他のPSDへコピーする方法	24
13	HSLとHSVの違い	24
14	CSSで出来ないこと	24
15	「CSSキーフレームアニメーション」実行後のCSS設定	24
16	私の「Google Chrome」設定	24
17	ChromeでCSSを確認する4つの方法	23
18	「ボタン」と「テキストリンク」の使い分け	23
19	>表記がおかしいときは？	22
20	Photoshop CS3 「全てのメニュー項目を表示する」	22
	2026/6/08 22:21 更新

順位

ページタイトル抜粋

％

2026/6/08 22:21 更新

順位	ページタイトル抜粋	アクセス数
1	キャラクター無料作成ジェネレーター／ FLASH ／オンラインサービス \| イラスト参考(デザイン)	5
1	「属性」「プロパティ」「アトリビュート」の違い \| CSS	5
2	RGBの種類／ビットカラー \| RGB(色)	4
3	HSLとHSVの違い \| 色変換(色)	2
3	画像縦横比の問題 \| 画像	2
3	全体基準となるhtmlタグへのfont-size指定案	2
3	「東京都」のカラーコード取得は難しい \| カラーコード(色)	2
3	SeaMonkey 2.7.2	2
3	RGB ／ 24ビットカラー	2
3	鉄道会社毎のカラーコード \| カラーコード(色)	2
3	金融機関ブランドカラー／コーポレートカラー \| カラーコード(色)	2
3	RGB ⇔ Lab \| 色変換(色)	2
3	縦横比が16:9となる整数値の組み合わせ	2
4	画面キャプチャ 2017 年 \| Chrome 拡張機能	1
4	メニュー他サイト調査 \| メニュー(UI)	1
4	RGB → HSL 変換式／最大値基準	1
4	RGB → HSL 最大値基準／ RGB 33, 150, 243 → HSL 206.6°, 89.7％, 54.1％さ	1
4	「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 \| Chrome 拡張機能	1
4	方式2.色相H0～1 ／ CSS Color Module Level 3	1
4	CopyTabTitleUrl(Chrome 拡張機能) カテゴリー	1
	2026/6/8 5:05 更新

順位

ページタイトル抜粋

アクセス数