「OOCSS」とは別の考え方？

コーディングルール ＞ 命名規則

クラスの名前空間

　状態:試行錯誤履歴 　閲覧数:3,014 　投稿日:2013-07-07 　更新日:2019-10-03
「カプセル化」や「相互汚染の予防」目的の「親セレクタ利用」では、HTML修正が入ったときの変更に弱い
→クラス自身に名前空間を持たせる
.widget-title { }

.widget-sidebar { }


クラスに接頭辞をつける


HTML上でクラスを見た人に、その目的が何であるかをすぐに伝えるべき
・クラスはもはやCSSのためだけに利用するものではない
JavaScriptのフックとして機能させる、特徴検出（フィーチャーディテクション）のためにHTMLに追加される、自動テストで使われる、など

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

OOCSS

コーディングルールのための命名規則



類似度ページランキング
順位 ページタイトル抜粋 ％
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/2/28 1:18 更新
週間人気ページランキング ／ 2-20 → 2-26
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 18
2 「bgcolor」「background-color」「background」の違い | CSS 5
2 RGBの種類 ／ ビットカラー | RGB(色) 5
2 RGB ⇔ Lab | 色変換(色) 5
3 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
4 画像縦横比の問題 | 画像 3
4 効果を打ち消すスタイルシート | CSS 3
4 色モデルイメージ図 | 色変換(色) 3
4 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
4 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
5 画面キャプチャ 2022 年 | Chrome 拡張機能 2
5 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ | CSS 2
5 フォントアイコン表示不具合の原因は重複読込＋α | フォント 2
5 「Font Awesome」で「ダウンロードしたSVGを直接表示」する方法 2
5 Chrome ブラウザで画像の DataURI を取得 | Google Chrome(ブラウザ) 2
5 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 2
5 ｢レイヤー」＋「レイヤー効果」をコピーして新規psdにペースト | Photoshop 2
5 「Fireworks」後継として「Gravit Designer」を使用していくことを一度は決定したが、2022 年時点で入手可能なソフトウェアは日本語入力未対応　 | Gravit Designer(ソフトウェア) 2
5 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 2
2026/2/27 5:05 更新