主に自分がやらかしたのを書いています。
こういうのもあるよ！などがあれば、編集リクエストください。
設計のアンチパターン
そもそもCSS設計がされていない
何が起こるか
- 少し変更するためだけに大量のHTML/CSSを読まないといけなくなる
- 変更の影響箇所が把握できず、1ヶ月前の変更で崩れた箇所が発見されたりする
- クラス名が重複する（もちろん重複していることには気づかない、stylelint?何それ状態）
- 新しいCSSをどこに書けば良いのかわからない
どうやって回避するか
- １文字目を書き始める前にCSS設計をする
- 事前にディレクトリ構成を決める
stylelintが導入されていない
何が起こるか
- 詳細度がバラバラになり、
!importが大量に書かれる - タグにスタイルが定義されている箇所が多くなり、HTMLを修正するとデザインが崩れる
どうやって回避するか
- stylelintを導入し、エディタで使えるように設定する
- Sider(旧SideCI）を使う
命名規則がない
何が起こるか
- クラス名が属人化する（ハイフンの個数やアンダーバーの個数が書く人によって違う）
- 新しいクラス名を作るときに緊張する（重複しているかどうか確認しないといけなくなる）
どうやって回避するか
- BEMを使う（stylelintでBEMを強制することもできます）
対象ブラウザが決まっていない
何が起こるか
- リリースした後に「動かないんですけど」が発生する（※業務系アプリの場合は要注意）
- 使って良いCSS/JSが分からない
- 最終確認をする人のパソコンでだけ動かない（ブラウザが違う、パソコンが古い...etc.）
どうやって回避するか
- 対象ブラウザをGitHubリポジトリのWikiなどに書いておく
モバイルファースト、デスクトップファーストが決まっていない
何が起こるか
- メディアクエリのパターンが多くなる
- 特定の範囲でデザインが崩れる
どうやって回避するか
- 使用するメディアクエリをGitHubリポジトリのWikiなどに書いておく
1ファイルに全てのCSSが書かれている
何が起こるか
- エディタが重くなる
- ほとんど全ての変更がコンフリクトする
どうやって回避するか
- Sass(SCSS), PostCSSなどを使ってファイルを分割する
コーディングのアンチパターン
normalize.cssなどが導入されていない
何が起こるか
- ブラウザごとに対応しないといけない箇所が大量に発生する
どうやって回避するか
- normalize.cssを使う
- CSSフレームワークを使う
box-sizingが全称セレクタで書かれていない（賛否あると思います）
何が起こるか
- paddingを使うとデザインが崩れる
- box-sizing: border-box;が大量に現れる
どうやって回避するか
-
* { box-sizing: border-box; }を書く
LVHAが守られていない（:link,:visited,:hover,:active）
何が起こるか
- なぜか
:activeのスタイルがきかない
どうやって回避するか
- LOVE and HATEで覚える
プロパティの継承が使われていない
何が起こるか
- font-size, colorが大量発生する
どうやって回避するか
<div class="article__meta">
<span class="article__published">2018-06-14</span>
<span class="article__author">投稿者</span>
</div>
.article__meta {
font-size: 12px;
}
色が変数で管理されていない
何が起こるか
- 使われている色が把握しにくい
- 何色にすれば良いのか分からなくなる
- 色が増えすぎる
どうやって回避するか
colors.scss
$color-gray-3: #333;
$color-gray-6: #666;
$color-gray-9: #999;
$color-gray-c: #ccc;