目次一覧
状態:-
閲覧数:1,470
投稿日:2020-03-06
更新日:2020-03-16
CSS至上主義を改める ／「@charset "utf-8"」を記述しない ／ id名 class名
セレクタを「可能な限り短く」指定する ／ 単位 ／ 色指定
セレクタを「可能な限り短く」指定する ／ 単位 ／ 色指定
CSS至上主義を改める ／「@charset "utf-8"」を記述しない ／ id名 class名
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
セレクタを「可能な限り短く」指定する ／ 単位 ／ 色指定
セレクタを「可能な限り短く」指定する
可能な限り、先祖セレクタを使用しない
先祖セレクタを除去する
| 具体例 | △ | 〇 | 改善内容 | 備考 |
|---|---|---|---|---|
| 1 | p.tag{ |
.entrylist-metatag-txt |
・セレクタ要素名を削除 ・class名「tag」が短くて重複する可能性があるため、より「一意な名称」へ変更 |
- |
| 2 | ul li{ |
.global-navigation-li |
・先祖セレクタを削除 ・class名をHTML階層が分かる「一意な名称」へ変更 |
- |
単位
「rem」「%」使用を推奨
比較一覧表 ／ 個人的評価 ／ 注意点
値0は常に「0」と記載
| △ | 〇 |
|---|---|
#hoge{ |
#hoge{ |
色指定
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名 を、全プロジェクトで意識的に統一しようかと