こんにちは、だいちゃんです。

コーディングしていると、その人の癖みたいなものが出ちゃいますよね。

今回は僕のCSSの癖を紹介します。もちろんこの書き方は一個人の癖なので、ベストであるとは限りませんし、来月には違う書き方になっているかもしれませんw

ルール1：リセットCSSを導入する

ブラウザにはデフォルトである程度スタイルが適用されています。問題なのは、そのスタイルがブラウザによって異なる点です。例えばChromeだけ見ながらコーディングを行った場合、別のブラウザで見た時に崩れたり意図しないデザインになっていたりする可能性があります。

それを防ぐため、ブラウザがデフォルトで掛けるスタイルを均したり、掛からないように上書きしたりするリセット系と呼ばれるCSSを導入しています。

つい最近までは ress.css という、ある程度のスタイルは活かしつつプレーンな状態にするものを入れていましたが、殺しきれていないスタイルがあったりしたのと、結局 ress.css によって適用されたスタイルを上書くことが無意味に感じるようになりました。

そこで、最近は html5doctor.com Reset Stylesheet を利用することが多いです。box-sizingの指定がないので、下記だけ書き足して利用しています。

*, *::before, *::after {
    box-sizing: border-box;
}

ルール2：bodyとinnerで枠組みを作る

大枠であるbodyと、コンテンツの枠としてinnerというクラスを作り、それらの幅を指定します。

サイズはデザインによりけりですが、bodyがmax 1980px、innerがmax 980pxで作成することが多い気がします。

body {
    width: 100%; max-width: 1980px;
    margin: 0 auto;
}
.inner {
    width: 100%; max-width: 980px;
    margin: 0 auto;
}

横幅MAXで背景色入れたい時とかは body の max-width を指定しません。

ルール3：remを愛する

サイズを指定する際 rem という単位を愛用しています。 em という単位もあるので紛らわしいですが、 rem はルート（HTML）のフォントサイズ＝1rem として作用するため、ページ内どこで使っても同じ大きさになります。（em は親要素に依存します）

pxやvwもそれぞれ便利な単位なのですが、僕がremを使う理由は、レスポンシブ・デザインを組むときに有用だと感じてるからです。

pxは絶対値なので画面幅に依存しません。どの画面サイズで見ても同じサイズなのは良いことのように聞こえますが、小さな画面で見た時は相対的に大きく見えてしまうデメリットがあります。
逆に、vwだけで組んでしまうと、画面サイズに依存するため、大きな画面で見ると必要以上に大きくなってしまいます。

一方のremは、ルートのHTMLのフォントサイズに依存するため、 自分でコントロールしてpxとvwのハイブリッドを生み出すことが出来ます。

html {
    font-size: 10px;
}

@media screen and (max-width: 640px) {
    html {
        font-size: calc(10 / 640 * 100vw);
    }
}

僕は基本上記の指定にしています。

こうすることで、 1rem = 10px になるため、デザイン通りの見た目にしやすくなります。また、メディアクエリーで640px以下の時は画面幅を絡めて計算するようにしているので、見た目を崩さずに縮小させることが出来ます。

remは、フォントサイズだけでなく、 width, height, margin, padding, ...などなどいろんな場面で使えるので重宝しています。例えば、24pxのマージンを与えたい場合は

.hoge {
    margin: 2.4rem;
}

とするだけで、各画面サイズで最適な大きさで表示されます。

ルール4：セクションごとにまとめて書く

HTMLに装飾をつけるのがCSSの使命なので、HTMLと連動しているのが本来の在り方かなと思っています。（Bootstrapとかは逆にCSSにHTMLを合わせていくみたいなイメージを持っています。）

なので、HTMLのセクションタグごとにCSSも区切りを入れて、このエリアのスタイルはこの辺だな、とアタリを付けられるようにしています。

また、ページ全体に関わるもの（ボタンとか）は common 、ページの骨格に関わるものは base などの見出しをつけて区切るようにしています。

/* BASE
------------------------------ */
html {
    font-size: 10px;
}
body {
    width: 100%; max-width: 1980px;
    margin: 0 auto;
}
.inner {
    width: 100%; max-width: 980px;
    margin: 0 auto;
}

@media screen and (max-width: 640px) {
    html {
        font-size: calc(10 / 640 * 100vw);
    }
}



/* COMMON
------------------------------ */
.btn {
    margin: 1rem auto;
}

@media screen and (max-width: 640px) {
    .btn {
        margin: 2rem auto;
    }
}

また、ルールってほどでもないですが、基本的にブロックとブロックの間には隙間を入れず（例の html, body, .innerの並びのように）、メディアクエリの前に1行スペースを開けるようにしています。セクションとセクションの間は3行開けています。

ついでにいうと、プロパティとコロン（：）の間はスペース無し、コロンと値の間は1つスペースを入れています。

ルール5：似たプロパティは横に並べる

CSSって縦に長くなりがちですよね。

なので似たプロパティは横並びに指定しちゃいます。

.hoge {
    font-size: 2rem; font-weight: bold;
    background-image: url("../img/image.jpg");
    background-size: auto; background-repeat: no-repeat; background-position: center;
}

ショートハンドを使えば解決するので、少しずつ覚えようとは思うのですが、よく忘れてしまってついついこのような書き方をしてしまいます。

読みやすく、わかりやすく書けるように...

コンピュータと人間が双方にわかりやすい書き方が一番だと思うので、別の人が手を加えることになってもわかりやすい記述にしてあげる思いやりを大切に意識していきたいです。

というか、何事にも思いやれる人になりたいです。はい。