はじめに
私は現在、とある施設のWebサイトを作成しております。
コーディングは私でレビューは別の方にお願いしているのですが
私自身、まだまだ知識・技術ともに未熟でさまざまな指摘を受けます。
そこで指摘されたことを忘れないようにするためにこの記事を書きました。
ページごとにCSSファイルを分ける
ページが複数がある場合、ページごとにファイルを分けて書きます。
わかりやすくなり修正の際に特定のクラスを探すのが容易になります。
また、レビューする方の負担も減ります。
よく使う設定は変数に定義する
文字色や背景色など、よく使うものは変数に定義しておきます。
$main-bg-color: #〜〜〜〜;
$main-font-color: #〜〜〜〜;
$main-border-color: #〜〜〜〜;
/* 例 */
.h1 {
color: $main-font-color;
}
.table {
border: 1px solid $main-border-color;
}
同じ内容のクラスが複数あるときは共通クラスとしてまとめる
同じ内容のクラスが複数ある場合、共通クラスとしてまとめます。
また、共通クラスも1つのCSSファイルにまとめておきます。
ここではtable1とtable2の背景は同じ色なのでクラスの汎用性を高めるためにも
bg-color-greenといったクラス名でまとめます。
.table1-bg-color {
background-color: green;
}
.table2-bg-color {
background-color: green;
}
.bg-color-green {
background-color: green;
}
適用場所・対象が具体的なクラス名を付ける
クラス名を.top-colorにした場合、topというのがどこを指しているのか曖昧です。
そのため、より具体的なクラス名にします。
ファーストビューのことを指しているなら.first-view、
トップページを指しているなら.top-page など何に当てているのかわかる名前にします。
ほかにも見出しの色だと .heading-color、アイコンだと.icon-facebookなど。
!importantはできるだけ使わない
CSSには詳細度というものがあります。
同じ要素に対して複数の宣言が行われている場合、詳細度が高い宣言が適用されます。
例えば、pタグに対してclassでスタイルを当てた場合とidで当てた場合だと
idの方が詳細度が高いのでidで定義したスタイルが適用されます。
<p id="color-red" class="color-blue">
#color-red {
color: red;/* このスタイルが適用されます。 */
}
.color-blue {
color: blue;
}
しかし、スタイルの最後に!importantを追加すると詳細度を無視して!importantがあるスタイルが優先されます。
!importantを多用すると、スタイルの優先順位がわかりづらくなり修正も難しくなります。
使わないと解決できないようなところ以外では使わないようにします。
#color-red {
color: red;
}
.color-blue {
color: blue !important; /* このスタイルが適用されます。 */
}
参考：
コンポーネント化する
色やサイズなどを他でも使えるように1つ1つのクラスに分けるということも重要ですが、
1つにまとめてコンポーネント化することも重要です。
例えば、円形の図でサイズとポジションを指定する場合、2つクラスを作るのではなく
.circleというクラスにまとめます。
要素に当てるクラスが多くなるとクラスをつけ忘れたり、
また、別ファイルに定義しているクラスだと探す手間もあります。
メンテナンスの観点からクラスを定義していく必要があります。
.circle-size {
font-size: 2rem;
}
.circle-position {
position: absolute;
top: 5%;
left: 5%;
}
.circle {
font-size: 2rem;
position: absolute;
top: 5%;
left: 5%;
}
まとめ
これが初投稿となります。普段、学んだ内容はメモに取っていますが単語や一文だけで適当です。
しかし、記事を書くとなると文脈なども意識して書くため学んだ内容を整理することができました。
これからも学んだ内容の整理のために記事を書いていきたいです。
この記事の内容で間違いなどがございましたら編集リクエストまたはコメントで教えていただければ幸いです。