目次一覧
状態:-
閲覧数:992
投稿日: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 |
|
|
・セレクタ要素名を削除 ・class名「tag」が短くて重複する可能性があるため、より「一意な名称」へ変更 |
- | ||
2 |
|
|
・先祖セレクタを削除 ・class名をHTML階層が分かる「一意な名称」へ変更 |
- |
単位
「rem」「%」使用を推奨
比較一覧表 / 個人的評価 / 注意点
値0は常に「0」と記載
△ | 〇 | ||
---|---|---|---|
|
|
色指定
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名 を、全プロジェクトで意識的に統一しようかと