どうも、昨日はじめてテキーラを飲んだよっしぃーです。

cssについて勉強がある程度進んだのでまとめてみました。

私は基本的にBEMをベースにスタイルを作っていきます。（ベムって？)

簡単に言うと

  1. ものを入れるカゴ（block）、
  2. 商品が入っている袋(modifier)、
  3. 袋に入っている商品(element)

です。

形は：

[ block–modifire__element ] 例：　[ btn–circle__bold ]

なぜこのような形にするかというと、
一度使ったcssを他のところに再利用することでコスパをあげようぜ！ってことですね。

あとはどのスタイルがどのような役割があるのか、

他のスタイル（例：

.bold{
    font-weight: bold;
}
.block > .bold{
    border-weight: bold;
}

のように、うっかりぶつかってしまわないためですね。

上記の例だと「線を太くしたつもりが文字も太くなった！」みたいな

というのがBEMなわけですが、
私は最近このガイドに沿いつつ、少し追加のルールを設けています。

１．PageSlug-Block–modifireまたはPageSlug-Block__element

２．必ずBlock–modifire以上、またはBlock__elementにし、単体で「.class」をする場合
.block–modifire以上　.class　のようにする。

１の例は「top-information–article」みたいな
１本線はそのページ専用という区別をしています。

他のページでも複数回出てきた場合、頭の[top-]を[sample–]などに変えて、他に回すことができます。
そういったことがあるので、基本的には「top-information–article__text」のように４列にしないようにしています。

あまり長すぎると可読性も悪いし打つの大変だし、html,cssともに大きくなりますし。

２はよく使うのが記事のタイトルやサムネイル画像のときです

例
html

<div class="news--contents">
<h1 class="title">タイトル！</h1>
<div class="thumb">
        <img src="hogehoge.jpg" alt=""></div>
<p class="meta">HOGEHOGE</p>

</div>

css

.news--contents{}
.news--contents .title{}
.news--contents .thumb{}
.news--contents .meta{}

細かい調整などで使いやすくなります。
クラスの入れ子を利用してわかりやすく整理できます。

あとこの方法を守れば一つ文字でスタイルがぶつかる可能性はかなり少なくなります。

と、最近の私のcssガイド（？）を書いてみました。

あと私が勉強で使った本、サイトを少し紹介。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

はい、大変お世話になりました。
cssの予測性、保守性、再利用姓、拡張性を基準に普及されているCSSフレームワークの説明、新しい提案、なぜそのようにCSSを組むのかが書かれています。

私はKindle版を買ったのですが、Kindle版はスキャニングした本なので、少々読みにくい箇所がちらほら・・・。
返品交換できるなら本を買いたいですね(-_-;)

勉強になる（参考になる）サイト様

さいごに私が最近考えているのが、boostrapなどcssを入れるだけでカンタンにレイアウトやデザインができる利便性があるのですが、
いかんせんhtmlがclassで溢れかえることが多くなっている気がします。

cssでhtmlタグにスタイルを書くのはあまり勧めませんが、だからといって全てclassをふる必要はないと思います。

なにごとも加減が一番ですかねぇ。