ホームページ作成するなら「CSS設計の教科書」で基礎を勉強しよう

CSS設計の教科書

今からホームページ作成を学ぶのであれば、
「1冊ですべて身につくHTML&CSSとWebデザイン入門講座」もおすすめ。

独学だったからこそ読んでおきたい

HTMLやCSSなど、独学で勉強して数年。
昔は、<font color=red>赤色</font>などと書いてましたが、
今はCSSで書くのが当たり前になりました。

しかし、覚えたての時は、文字を赤くするだけなのに、
10行目に.aka{color:red}
100行目に.red{color:red}
と、同じ赤くするクラスを量産してました。

今はいい本があります。
「CSS設計の教科書」という本です。おすすめ。

2019年現在では若干古い書籍になりますが、
CSS設計を勉強するには、十分な内容だと思います。
※FLOCSSの詳しい書籍（PDF）は「柴犬でもわかるFLOCSS」をご覧ください。

ソースコードは短い（cssファイルの容量が少ない）方が読み込みが短いからいい！
と先輩やネットの情報を取り入れ、クラス名なども付けずに、h1〜h6やpなどのHTMLタグに直接CSSを指定してました。

div.decoru h1 {}
div.decoru p {}
div.decoru div {}

しかし、この書き方はページ速度を落とすものだと気づきました。

CSSは左から右を読んでいるわけでなく、右から左を読んでます。
つまり、div.decoru divの場合、全てのdivから、div.decoruを探しているのです。
これは時間かかります。

あと、このdiv.decoruのdivを指定するのもやめました。
同じスタイルであれば、divではない場面でも使う事があるからです。

span.red {color:red}
strong.red {color:red}

と、無駄なことをしてました。

cssファイルを開いた時「!important」が並んでいた場合、
そのCSS設計はすでに崩壊していると言っても過言ではないでしょう。
また、htmlタグにstyleを直接書かれている場合も同様です。

同じ手段で変更する事しかできなくなるのです。。。悲しい。

本書には、SMACSSやらBEMやら、聞いたことない言葉が出てきます。
どれを使うかしっかり読んで適切なのを選びましょう。

クラス名のルール（命名規則）なんかも作っておくとよいでしょうか。
btnなのかbuttonなのか。

そして、とにかく似た構成（例えば新着記事のリスト）や、似た色（#333、#424242）のものは統一、使い回す。
できるだけその場でしか使わないスタイルを減らす。に限ります。

ページ速度については、グーグルが下記のように発表しているようです。

「完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる」
「表示速度が1秒から7秒に落ちると、直帰率は113%上昇」

ページ速度というのは大切です。
ワードプレスはプラグインいれると、CSSが無駄に入ってくるので、
自分で手がつけられるところは気をつけていきたいです。

運営コストを考えなければ、ファーストビューを構築しているCSSだけ取り除いて、
headの中に書き込むのも手です。