これから記述するのは個人のこだわりに近い細かい話です。
もし共感してもらえる部分があれば大変嬉しいです！
【こんな方にオススメ！】
・CSSの記述について他の観点を知りたい方
・自分の書いているコードにいまいち納得いかない部分がある方
もしかすると何かのヒントになるかもしれないので一度読んでいただけると嬉しいです！
CSSを記述する時のこだわり
個人の感覚によるこだわりが多くなると思います。
なので共感してもらえたら嬉しいですし、そうでない方は1つの意見として捉えてください。
HTML要素とCSS命名がずれるのが気持ち悪い
個人的にHTMLタグと命名にずれが違和感を感じます。
どのようなプロパティーが設定されているかによりますが、私ならdivではなく直接ulにclassを当てられるようにモジュールを切り出す、スタイルを変更などで調整します。
下記は極端な例ですが…。
- <div class="article-list">
- <ul class="article-list-item">
+ <ul class="article-list">
- <li></li>
+ <li class="article-list-item"></li>
</ul>
</div>
.article-list {
border: 1px solid #ccc;
&-item {
padding: 8px 12px;
}
}
CSSの命名でtextは使いたくない
〇〇-textというclass名を利用することがあると思います。
classをつけスタイリングしているならそのテキストには明確な役割があるはずだと考えています。
にもかかわらず「text」と命名されてしまっていることに違和感を感じます。
<div class="card">
<div class="card-header"></div>
<div class="card-body">
- <p class="card-text"></p>
+ <p class="card-title"></p>
</div>
</div>
// テキストと命名している割にはリッチにスタイリングされている例
.card-text {
font-size: 18px;
line-height: 1.5;
color: red;
position: relative;
&::before {
content: '';
position: absolute;
}
}
// 逆にclassを定義するほどでもない例
.card-text {
font-size: 12px;
line-height: 1.5;
}
どうしても意味を持たせられないような要素ではない場合は、汎用的に利用するために作ったクラスをマルチクラスで当てることでデザインを実現させます。
<div class="card">
<div class="card-header"></div>
<div class="card-body">
<p class="text-small line-height-small"></p>
</div>
</div>
.text-small {
font-size: 12px;
}
.line-height-small {
line-height: 1.5;
}
ショートハンドは便利だが、一方でわかりにくい
ショートハンドは楽で便利なので積極的に使っていくことに異論はありません。
margiは上、右、下、左の時計回りに指定するシンプルなショートハンドなので積極的に利用する方針で問題ないと思います。
// 冗長的な例
.margin {
margin: 5px 5px 5px 5px;
margin: 5px 0 5px 0;
margin: 5px 10px 20px 10px;
}
// ショートハンドを使った例
.margin {
margin: 5px;
margin: 5px 0;
margin: 5px 10px 20px;
}
下記のコードを見てbackgroundのどのプロパティーが何を指定しているか瞬時に判断できた人はいるでしょうか？
私はわからなくなる時があるので調べて確認します…。
.background {
background: url('/test.png') top left / 50px no-repeat #ddd;
}
backgroundプロパティーはショートハンドで書くと何が指定されているかわかりづらい点から冗長的ではありますがショートハンドで記述するのは控えたいと考えています。
.background {
background-image: url('text.png');
background-position: top left;
background-size: 50px
background-repeat: no-repeat;
background-color: #ddd;
}
backgroundプロパティーをショートハンドで記述する場合はposition / sizeの順番を守らないと正しくスタイルが当たらない点も注意が必要です…
あと「/（スラッシュ）」で区切ることも忘れなく。
順番やカテゴリーはまとまっていた方が見やすいと思っている
そこまでこだわらんでも…というポイントですが個人的にはプロパティーごとにまとまりが合った方が見やすいと思っています。
// まとまりがない
.title {
font-size: 2rem;
background-color: #602a08;
color: #fff;
padding: 8px 12px;
font-weight: 700;
line-height: 1.3;
width: 100%;
}
// まとまりがある(要素外側から内側にプロパティーを書いていくイメージ）
.title {
// コンテンツの大きさlayout系、大きいカ所の指定を上の方に
width: 100%;
padding: 8px 12px;
background-color: #602a08;
// text系のプロパティーをまとめる
color: #fff;
font-size: 2rem;
font-weight: 700;
line-height: 1.3;
}
上記の例だとtextに関する設定をカテゴライズして、バラバラになっていたのをまとめて下に記載しています。
引用符はシングルで！
本当にどっちでもいいのですが、シングルの方が見やすいな…と思っているぐらいです。
.content {
content: "";
background-image: url("text.png");
position: absolute;
top: 50%;
left: 50%;
}
.content {
content: '';
background-image: url('text.png');
position: absolute;
top: 50%;
left: 50%;
}
ちなみにHTMLはGoogleがダブルクォートを推奨しているので引用符はダブルにしています。
まとめ
あまりにも独創性が高いこだわりは個人だけにとどめておく方が良いと思いますが、命名の気持ち悪さとか見やすさは誰かが混乱することになるのでこだわっておいた方が良いと考えています。
チーム開発の時は個人の感覚をすり合わせて全員でコーディング規約を作り直すことがあっても良いと思います。
共感や意見があればぜひ教えていただきたいです！
また、こんなこだわりがある！などあればぜひコメントで教えてください！