CSSのベストプラクティスを考える

[heki-dm]

CSSのベストプラクティスを考える

CSSでデザインをする上でどのように構築するべきかを考える。

• リセットCSSは何を使うべきなのか
  • normalize.css
  • sanitize.css
• global.cssには何を書くべきなのか

[orifice365]

命名規則について

クラスの命名規則を決める

OOCSS、BEM、SMACSS（、TailwindCSS）などが有名。
場合によって使い分けるのがよい。
個人的にはOOCSSとSMACSSのいいとこ取り+ちょっとTailwind踏襲+独自ルールとしている。

命名規則を決めるにあたって

1. 汎用的なクラス名はNG

重複が起きたりどこのスタイルかわからなくなったりするため具体性と意味を持たせる。
厳格さは好みだが、第三者がCSSのみを見てどこを装飾しているのかわかるくらいだといいんじゃないかなと思う
個人的には（〇〇についての）-（どういうコンポーネント）にしていた（club-modalとか、index-buttonとか）

2. 単語を定義しておく

どの単語がどういう立ち位置にあるのか決めて表などにしておくとわかりやすい（独自ルール）。
例えば箱の大きさを決めておくなど
個人的には container > wrapper > box > item で、

クラス名	説明
-container	sectionのような大きな括り
-wrapper	ある同一の要素の集まりが入る箱
-box	最小コンポーネントが1個〜数個入っている箱
-item	listのような列挙形式の要素のひとつとして

（もちろんcontainerの下に直接boxが来てもよい）
HTMLは以下のようになる。

<div class="index-button-wrapper">
    <button class="index-button"></button>
</div>

参考：Qiita/[CSS設計]わたしはクラス名でもう悩まない[BEMベース]

3. 使い回しを考える

どうにか共通部分を作れないか考える（OOCSS的）。

<div class="index-button bg-red”></div>
<div class="index-button bg-green”></div>
<div class="index-button bg-blue”></div>

ユニークではないコンポーネント、モジュールはまとめてcommon.cssに書いておく（Tailwind踏襲）。reset.cssの延長とも言える。

a {
    color: #ff9400;
    text-decoration: underline;
}

4. 状態変化

状態変化のスタイルについてはクラス名を「.is-〇〇」にする（SMACSS的）
例）.is-error .is-active .is-locked
状態変化するタイミングでこのクラスを付け外しする。
CSSでは「何がどのような状態の時」としたいため、

.send-button.is-error{
   background-color: red;
}

のように指定する。
ただ、例外として

.is-hidden{
    display:none;
}

はよく使うし共通部分に書いておく。どんな要素でもhiddenはhiddenなので。

単位の使い方を考える

プロパティ別に決める

個人的に、font-sizeはrem、画面サイズによって変わるものはvw、幅いっぱいは100%、それ以外の固定値はpx管理、というふうにやっていた（例外はいくつかあるが）。

Reset.cssについて

個人的おすすめ

destyle.cssで全て消すのが一番よい。destyle.css

理由
・いろいろなところにデフォルトのスタイルがかかっているため、「Figma通りにスタイル当ててるはずなのになんかズレる」が起こる
・ブラウザ間でデフォルトが違うため見た目を重視する・統一感を持たせるのならば独自のスタイルを当てた方がよい
メリット
・全てが自由、全てが思い通り
・どうせ上書きするし結局上書きしていくよりも一から書いたほうが早い
デメリット
・どうしてもCSS記述量は増える
・UIに関わるinputタグのフォーカスやaタグの色なども消えるので、見逃さないよう意識し自分で設定しなければいけない

チェックボックスとかラジオボタンとかはそのまま使うから消したくない！っていうのであればdestyle.cssからチェックボックスの部分を除くなどすればよい。
……がおすすめはしない
・ブラウザ間のデフォルトの違いによ理、「Chromeのプレビューでいい感じだけどSafariで見たらなんか違う！」みたいなことになる
・あまりにも簡素なため他をちゃんとデザインするんだったら浮く
・少しでもスタイルをいじりたいんならまっさらの状態からスタイリングした方が楽
というのがあるので。

UIライブラリ

ブラウザ間の差はWebデザインの敵、デフォルトに頼るよりはshadcn/uiなどUIライブラリとか使う方が断然良い。

common.css（global.css）

何を書くか

• 変数定義
• headerやfooterなど複数ページ共通のコンポーネントに対するスタイル
• .is-hiddenなど共通の状態変化に関するスタイル
• 上でも述べたようにユニークではないコンポーネント、モジュール（reset.cssの延長）

余白の優先順位

gap > padding > margin

marginについて

marginは意図せぬ重なりが起こることがある。

box-sizing: border-box;の要素はborder, paddingを大きさに含むがmarginは含まない。これにより親要素からmarginがはみ出し予期せぬ挙動を起こすこともある。
し、そもそも親要素の余白を子要素のスタイルに任せるのは合理的ではないと思う。
という理由からできるだけmarginは使わない方針にしている。

gapについて

「いくつかの要素の間に同じ幅の余白をつけたい」というとき、親要素にdisplay: flex;やdisplay: grid;をつけて並べ、gap: 〇〇px;をつけるのが一番綺麗で簡単（paddingでもできなくはないのだが）

ちょっとレイアウト変更するぞという時もflexやgridの方が柔軟。
であるのでgapを使えるときは使ったほうがいろいろとよい。

imgタグの扱い

直接スタイルを当てない

imgに直接widthやheight、paddingなどのスタイルはつけない方がよい。
アスペクト比が変わったりはみ出したりが予期しないところで起こる、imgに限らずだが終了タグがないので擬似要素がつけられない、デフォルトがインライン要素であるのでスタイルが当てづらい、などの理由がある。

imgだけを入れるdivを作り、そのdivに対してサイズや装飾などを当てた方が思い通りの挙動になる。

img {
   width: 100%;
   height: auto;
}

とそれ以外スタイルは当てないと固定してもいいくらい。

vwの扱い

vwの特性

画面いっぱいにしたいなら横はwidth: 100%;、縦はheight: 100vh;を使うこと。
width: 100vw; とするとスクロールバーを含む含まないがあるようでこちらが思っているような横画面いっぱいという状態にはならない（ブラウザにもよるが）。

レスポンシブにおけるvwのよさ

レスポンシブデザインを使う時にはvwはとてもありがたい存在。親要素のサイズによらず画面幅で要素のサイズを決められるので「%指定したら要素極端に小さくなっちゃった」みたいなことはなくなる。
ただ親要素が%で子要素がvwなどとしてしまうと子要素のはみ出しや意図せぬ折り返しになる可能性があるのでvwを使うならvwだけで統一するのが良いかもしれない。

基本Figmaはpx管理なのでFigmaとの互換・計算も簡単。Aが画面の何%で、BがAの何%で、CがBの……ってなると大変だが、vwだと参照先がひとつなので分かりやすいし柔軟性も高い。

デメリットとしては割り切れない時に「83.33333vw」みたいになるところ。ただレスポンシブのサイトを見ているとこれを採用してるところも多いし、ピクセルパーフェクトは目指さなくていいと思っているので。

ボタンとか小さい要素はpxの方がよい。
コンポーネントによっては「〇〇px以上推奨」というようなものもあるため。
ただ1920pxのデスクトップと1280pxのデスクトップだとかなり見え方も変わってくるので時と場合により判断するのがよいかもしれない。

%やvwを採用するのであればmin-widthを必ずつけること！

vhの使い方

vhの仲間にはdvhやsvhなどもあるので場合によって使い分けるのがよさそう。

メディアクエリ

モバイルサイズとデスクトップサイズでレイアウトを変えるために@mediaを使うのであれば、モバイルサイズのスタイルを標準に書き、@media以下にデスクトップサイズを書くのが最近の通例とされている。
端末別のサイト閲覧数は大抵モバイルが一番多い、モバイル標準とすると記述量が少なくなることが多い、などの理由がある。最近はモバイルファーストの考え方が浸透してきている、というのも大きな理由ではある。

単にサイズが変わるよ、なら上の方法で良いのだが、gridをflexに変えるだとかレイアウト上で大きな変更がある場合、共通部分だけを標準のスタイルで書き、@media（モバイルサイズ）と@media（デスクトップサイズ）を書く方がスッキリする。

詳細度

セレクタの詳細度を意識する。
順番よりもセレクタの詳細度が高い方のスタイルが適用されるので、詳細度を考えずに適当に書くと「CSS書いたのに適用されてない」みたいなことが起こる。
基本、詳細度は0-1-0で書く。
詳細度 - CSS: カスケーディングスタイルシート | MDN

ネストするのであれば物理的に入れ子にした方が見やすく重複も減るのでよい。

.box{
    display: flex;
    gap: 8px;

    .item{
        width: 32px;
        background-color: #fff;
    }
}

そして混乱のもとになる!importantはできるだけ使わない。
以上のように詳細度を意識することで再利用性の向上、競合の防止につながる。

中央寄せ

上下左右中央寄せは従来

.hoge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% -50%) ;
}

もしくは

.hoge {
    position: absolute;
    inset: 0;
    margin: auto;
}

という書き方が一般的であったが、gridが普及した今、display: grid;+place-items: center;(+place-content: center;)での中央寄せが良いとされている。
メリットとしてはコードが簡潔ということに加え、transformの自由度が上がるところにある。

動きのアニメーションをつけるときtransformを使うことが多いのだが、transform: translate(-50% -50%)が指定されている場合もうtransformは使えない（上書きされてしまうため）、もしくはcalc(-50% + 〇〇px)のような回りくどい書き方をしなければいけない。
gridにしてしまえばその心配はなくなる。

参考：最短2行。上下左右中央揃えにはCSS Gridが一番ラク

その他細かいこと

bodyにbackground-colorを必ず指定すること！

普通にブラウザで見る分には問題ないのだが、iPhoneのTwitterアプリからリンクを踏んで飛んだとき、つまりTwitterアプリ内でサイトが開かれたとき、Twitterのbackground-colorがblack（ダークモード云々に関わらず）のせいで色を指定していない範囲の背景が真っ黒になってしまう、もし文字が黒なのであれば何も見えない。実際体験して気づいて焦った。こうなっているサイトを他に見かけることもしばしばある。

bodyのbackground-colorは画面上部・下部までスクロールした際一瞬見える余白の色にもなるので、カラフルにすればおしゃれにもなる。

要素の”大きさ”を気にする（サイズじゃなくて）

例えばpタグの中にdivタグを入れない、spanタグの中にpタグを入れないなど。HTMLは進化しているので正しく表示されるが、見かけ上良くない。SEOにも良くない（らしい）。

pxについて

基本pxは8px単位で、小さいものは4px単位でおく。

subgridが便利

カードのようなレイアウトを作りたいとき、subgridを使うと綺麗に揃う。

flexとgridは便利

floatやtableは扱いづらいのでできるだけ入れない。レイアウトはflexとgridでどうにかなる。

図形や装飾

図形や装飾は思ったより複雑なものでもCSSで作れる。画像はできるだけ置きたくない。もしiconなど置くようであればSVGがよい。

再利用性を考える

見かけOKならコードなんでもいいは良くない、詳しくは：X / kskwtnk

インタラクティブコンテンツ

ボタンやリンクなどHTMLのinteractive contentsはそれ自体のスタイルやbox-shadow、ホバー時のカーソル変化、色変化などで"アクティブである"ことをちゃんと見せる。