CSS書くときは気をつけて。これだけはNG。

CSS書くときは気をつけて。これだけはNG。

ペンギンくん

ちょっと、聞いてよ!
どうしたの?

ねこ

ペンギンくん

最近、WEBサイトの修正のお仕事をしたんだけど、その時のコードがぐちゃぐちゃですごく困ったんだ。
それは大変だったね。
そういう時のために普段からある程度のコーディングルールに沿って書かないとね。

ねこ

ペンギンくん

でも実は僕も、どんな風にコーディングするのがいいのかよくわかってないんだ。
じゃあ今から、誰でも実践できそうなコーディングのコツを教えるね。

ねこ

はじめに

今回は僕が個人的に意識しているコーディングルールについてお話しようと思います。

ターゲット
・HTML / CSSを勉強したい人
・簡単なコーディングができる人
・CSS設計を勉強したい人

いいコードの定義とは

結論から言うと、「良いコード」 = 「CSS設計」を守れたコードのことです。「CSS設計」とは、良いコードを書くために生まれたコーディングルールみたいなものだと思ってください。

では、CSS設計について簡単に説明しますね。

CSS設計の定義

  • 予測しやすい
  • 再利用しやすい
  • 保守しやすい
  • 拡張しやすい

これらは、Googleのスーパーエンジニアの人が「CSS Architecture」という文献に提唱したものです。

それぞれの意味を引用しますね。

予測しやすい

予測可能な CSS とは、ルールが期待通りに動作することを意味します。ルールを追加したり更新したりしても、意図していない部分に影響を与えることはありません。滅多に変更しない小規模なサイトでは、これはそれほど重要ではありませんが、何十ページ、何百ページもある大規模なサイトでは、予測可能な CSS は必須です。

https://philipwalton.com/articles/css-architecture/

簡単に言えば、クラス名を見たらその要素がどんな働きをしてるのか、分かりやすいクラス名を書こうねってことです。

HTML
<ul>
  <li class="news-title">タイトル</li>
  <li class="news-title">タイトル</li>
</ul>
<div class="btn">もっと見る<div>

例えば、上のようなクラス名だと「これはNEWSのタイトルなんだな」とか「これはボタンだな」とか、誰でも分かりますよね。

再利用しやすい

CSS のルールは、すでに解決済みのパターンや問題を再コード化することなく、既存のパーツから新しいコンポーネントを素早く構築できるように、抽象化され、分離されたものでなければなりません。

https://philipwalton.com/articles/css-architecture/

何回も使うようなスタイルやパーツは、共通化しておこうねってことですね。

先ほどのコードの例で言うと、btnクラスは、いろんなところに使いまわすことができそうですね。

btnクラスをベースに他のバリエーションも作れそうです。

HTML
<div class="btn btn-small">もっと見る<div>

保守しやすい

新しいコンポーネントや機能をサイトに追加、更新、再配置する必要がある場合、既存の CSS をリファクタリングする必要はありません。コンポーネント X をページに追加しても、その存在だけでコンポーネント Y が壊れてしまうことはありません。

https://philipwalton.com/articles/css-architecture/

小難しくて分かりづらいですが、既存のサイトに新しい要素を加えてもデザインが崩れないようなコードを書こうねってことですね。

 拡張しやすい

サイトのサイズや複雑さが大きくなると、通常はメンテナンスのための開発者が必要になります。スケーラブルな CSS は、一人でも大規模なエンジニアリングチームでも簡単に管理できることを意味します。また、サイトの CSS アーキテクチャは、膨大な学習曲線を必要とせずに簡単にアプローチできることを意味します。今日、CSS に触れているのはあなただけだからといって、いつまでもそうであるとは限りません。

https://philipwalton.com/articles/css-architecture/

これまた難しいですね。要するに1ページのサイトが100ページのサイトになっても書き直さなくて良いコードを書こうねってことですね。

NGルール

以上を踏まえて、コーディングする時のNGルールを押さえていこうと思います。まずは何がダメなのか知っておくことで、あとで余計なコストがかからなくて良いんじゃないかなーと思います。

style属性を使わない

HTML
<p style="font-size:16px;">テキスト</p>

style属性を使うと、

  • 再利用性がない
  • CSSファイルで変更ができない
  • レスポンシブ対応もできない

などのデメリットばかりなのでNG

要素にスタイルはあてない

seciton {
  padding: 100px 0;
}
p {
  font-size: 16px;
}
.header p {
  color: #fff;
font-weight: bold;
}

要素にスタイルを使うのはNG

  • 保守性がない
  • 1つのスタイルだけ変更したい時に、他の要素も影響される
  • pタグをh2タグに変更した時などに、CSSを書き直す手間がかかる

プラウザごとのデフォルトのCSSの差をなくすために使うならOKですが、基本的にNG

idセレクタは使わない

#header {
  width: 100%;
  height:  80px;
  background-color: #fff;
}
  • idは同じ名前を使えないので、再利用性がない
  • idは詳細度が高く、スタイルが優先されるので上書きできない

!importantは使わない

#header {
  width: 100%;
  height:  80px!important;
  background-color: #fff;
}

極端な例ですが、idセレクタのスタイルに!impotantなんて使ってしまうと、CSSを上書きしたい時(レスポンシブ時)の変更が絶対できなくなりますよね。なのでNG。

分かりにくいクラス名を使わない

HTML
<p class="a-text">テキストテキスト</p>
<p class="lg-y"></p>
<div class="btn">ボタン</div>

「btn」くらいならこれはボタンだなってわかるんですけど、「a-text」ってなんのテキストなの?ってなりますし、「lg-y」に至っては何の要素なのか全くわかりません。なのでなるべく、誰が見てもわかりやすいクラス命名を推奨。

[SCSS]ネストは孫要素まで

.header h1 {
 font-size:  30px;

  nav ul {
    display: flex;

    li {
      margin-left: 12px;

       a {
          color: #333;
          font-weight: bold;
       }
    }
  }
}

ネストが深いと、単純に見にくいというのもありますが、「レンダリング速度の低下」の原因にもなります。

簡単にいうと、ブラウザがCSSを探す時に、「headerクラスを探して、h1要素のnavのulのliのa要素」みたいにすごく遠回りしてしまうので、サイトを表示するスピードが遅くなるんですね。

それに上のようなコードだと、まずHTML要素に修正が入った時にCSSにも修正を加えなければいけないので、クラスを使った方がいいですよね。

おわり

ペンギンくん

こういうルールを守れば、見やすくて、修正案件の時にも手間が少なく修正できそうで良さようだね。

NGルールと書いてますが、どうしても迫られて使わざるを得ない時もあると思いますので、その時はバンバン使っていってください笑。