- 読み込む順番
宣言位置は、必ずファイルの先頭でなければならない。
理由:
@charset "utf-8";複数ファイルがあるとその分だけlink要素を記述することになり、それらに対してHTTP リクエストがされ、読み込みが発生するので遅くなる。
- どのくらい影響があるのか
- 1つのファイルに集約するということだが、ファイルサイズがめちゃくちゃ大きくなる場合は
構造が把握しやすくなるらしい。 SCSSなんかで書けない場合に良さそうだけれど、まあ見にくい。
/* 親要素 */
#footer {
clear: both;
padding: 20px 0;
}
/* 子要素 */
#footer address {
font-size: medium;
}中央寄せ、右寄せ、左寄せ、回り込み解除など、汎用的に使うスタイルは、独立したク ラスとして定義しておく。 それらをスペースで区切り組み合わせて使う。
.center {
display: block;
margin: 0 auto;
}
.right { float: right; }
.left { float: left; }
.clear { clear: both; }<div class="sidemenu right"></div>import.cssなんかで分割したファイルを@importし、それをhead要素のlink要素で読み込 む。HTMLがすっきりとし、CSSファイルが増減した場合、HTMLを編集することなくCSSの みの変更だけで済むということがメリットとして挙げられる。
@importは、必ずスタイルの前に記述する必要がある。
@import url("path to css file");
@import url(path to css file); /* 引用符は省略可 */
@import "path to css file"; /* urlは省略可 */