(私の)CSSコーディングルール

コーディングルール

目次一覧

　状態:- 　閲覧数:923 　投稿日:2020-03-06 　更新日:2020-03-16
CSS至上主義を改める ／「@charset "utf-8"」を記述しない ／ id名 class名

セレクタを「可能な限り短く」指定する ／ 単位 ／ 色指定

CSS至上主義を改める ／「@charset "utf-8"」を記述しない ／ id名 class名

　閲覧数:393　投稿日:2019-10-12　更新日:2020-03-12

CSS至上主義を改める


他ページでも使用する場合のみ、CSS使用
そのページでしか使用しない場合は、HTMLへStyleを直書

「@charset "utf-8"」を記述しない


HTMLもCSSも UTF-8 で保存していて、HTML側で文字コードの宣言をしていたら、CSS側では不要
・ほんっとにはじめてのHTML5とCSS3：外部CSSの読み込み

id名 class名


短い名称はなるべく避ける
「navi」など「ありがちな短い名前」を付けると、後でgrep検索した際に結果が多く表示されてしまい、困ることになる

区切り文字
ハイフン
.h2-entry-title{}
.global-navigation-ul
.global-navigation-li


セレクタを「可能な限り短く」指定する ／ 単位 ／ 色指定

　閲覧数:387　投稿日:2020-02-07　更新日:2020-03-16

セレクタを「可能な限り短く」指定する


可能な限り、先祖セレクタを使用しない
先祖セレクタを除去する
具体例 △ 〇 改善内容 備考
1 
p.tag{

  color:blue;

}
 
.entrylist-metatag-txt

{

  color:blue;

}
 ・セレクタ要素名を削除
・class名「tag」が短くて重複する可能性があるため、より「一意な名称」へ変更		 -
2 
ul li{

  color:blue;

}
 
.global-navigation-li

{

  color:blue;

}
 ・先祖セレクタを削除
・class名をHTML階層が分かる「一意な名称」へ変更		 -

単位


「rem」「%」使用を推奨
比較一覧表 ／ 個人的評価 ／ 注意点

値0は常に「0」と記載
△ 〇 
#hoge{

  position:absolute;

  left:0px;

  top:50px;

  width:220px;

  padding:0px 0px 0px 30px;

  z-index:2;

}
 
#hoge{

  position:absolute;

  left:0;

  top:50px;

  width:220px;

  padding:0 0 0 30px;

  z-index:2;

}

色指定


1.可能な場合は、名前付き色(Named Colors)を使用する
body{

  color:blue;

}


2.可能であれば、3文字の色コードを使用する
〇
body{

  color:#fff;

}


△
body{

  color:#ffffff;

}


3.値は小文字で記述する
〇
body{

  color:blue;

}

body{

  color:#fff;

}


△
body{

  color:BLUE;

}

body{

  color:#FFF;

}



・CSS 「id」「class」名 に関する調査履歴 1
・CSS の class名 と id名 を、全プロジェクトで意識的に統一しようかと

CSS管理効率化のために

(私の)HTMLデザインコーディングルール



類似度ページランキング
順位 ページタイトル抜粋 ％
1 (私の)CSSコーディングルール 81
2 (私の)HTMLコーディングルール 67
3 (私の)HTMLデザインコーディングルール 59
4 コーディングルールのための命名規則 48
5 フォーム要素に対する(私の)CSS適用ルール 42
6 CSS3で背景色にグラデーションをつける 33
7 グラデーション練習 32
8 Chromeデバッグする際CSSが()で表示される 29
9 サイトにプログラムコードを貼り付ける preタグのCSS 27
10 ドキュメントルート外のCSSファイル読込。～ 2018年 27
11 Chrome コンソール画面で CSSの:hover 適用スタイルを確認 27
12 CSSで画像をロールオーバー 27
13 CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する 26
14 背景CSS シームレスパターン 26
15 モバイルデザイン6 ／ フォーム 25
16 Chromeをインストール出来ない 24
17 遠近グリッド はCS3にはないの？ 24
18 「ヴィンテージ」画像フィルタ実行例 24
19 色モデルイメージ図 24
20 コンソールエラー ／ ブラウザ間差異 24
2025/3/10 20:14 更新
週間人気ページランキング ／ 3-3 → 3-9
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 7
2 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 6
2 RGB ⇔ Lab | 色変換(色) 6
3 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 5
3 このエントリーの結論 ／ 変更するまで ／変更後 5
3 鉄道会社毎のカラーコード | カラーコード(色) 5
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
4 色モデルイメージ図 | 色変換(色) 3
4 24ビットカラーにおけるHLS要素範囲 ／ 最小値 ～ 最大値 3
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
5 G'MIC | GIMP 系(ソフトウェア) 2
5 16進数カラーコード ／ 2進数 2
5 「bgcolor」「background-color」「background」の違い | CSS 2
5 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 2
5 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
    		• 2
    5 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 2
    5 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 2
    6 「OOCSS」とは別の考え方？ | 命名規則(コーディングルール) 1
    6 効果を打ち消すスタイルシート | CSS 1
    6 2系(Bootstrap) カテゴリー 1
    2025/3/10 1:01 更新