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

コーディングルール

目次一覧

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

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

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

　閲覧数:319　投稿日: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


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

　閲覧数:313　投稿日: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
2024/4/26 8:12 更新
週間人気ページランキング ／ 4-19 → 4-25
順位 ページタイトル抜粋 アクセス数
1 16進数カラーコード ／ 2進数 23
2 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 14
3 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 13
4 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 12
5 RGB ⇔ Lab | 色変換(色) 9
5 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 9
6 Design 0 8
6 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 8
7 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 6
8 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 5
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
9 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 4
10 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 3
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 3
10 「群青色」「瑠璃色」「ウルトラマリンブルー」の違い 3
10 「bgcolor」「background-color」「background」の違い | CSS 3
11 HTML5でiframeスクロールバーを表示しない方法が不明 | HTML5(HTML) 2
11 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 2
11 2進数 ／ Binary Number 2
11 鉄道会社毎のカラーコード | カラーコード(色) 2
2024/4/26 1:01 更新