CSSの苦手意識を克服するためにやったこと

CSSがとても苦手です。ここ数日、CSSが苦手な理由とその対策について色々と考え、対策を試してきました。結果的に以前よりもCSSに対する苦手意識をある程度克服することができたのでその方法を記しておきます。

結論

CSSに必要な周辺知識の整理、ツールと情報の使い方を見直しました。具体的には次の3つです。

マークアップしながらスタイリングをしない
DevTools(デベロッパーツール)を使えるようになる
公式ドキュメント、リファレンスを読む

あくまでも個人の見解なのでもっと良い方法があればむしろ教えて頂きたいです！

マークアップしながらスタイリングしない

当たり前のことなのかもしれませんがマークアップしながらスタイリングをしない方が良いです！

マークアップとスタイリングを同時に作業することのデメリット

今までは無意識的にマークアップとスタイリングを同時に作業してしまっていることが多かったです。同時に作業してしまうことで次のようなデメリットを個人的には感じました。

不必要なタグ(div、span)が増える
アウトラインを意識したマークアップが疎かになる
異なる作業を並行に進めるので作業効率が悪い

正しくマークアップされたHTMLはsectionやarticle等で構造化されているのでdiv を使う頻度が減ります。公式リファレンスにもdiv はできるだけ使わない事を推奨しています。

他の要素が適切でない場合、著者は最後の手段の要素としてdiv要素を検討することを強く推奨する。div要素の代わりにより適切な要素を使用することは、読者に対してより良いアクセシビリティと著者に対するより容易なメンテナンス性につながる。

引用: HTML Standard div要素

マークアップとスタイリングの同時作業しないための対策

CSSを書く前にまずは正しく構造化しされたHTMLを書くことを優先するべきです。そして、HTMLを触る条件はを次の2つに限定することで無意識的な同時作業を防止できると思います。

スタイル追加を目的としたclass やid の追加
スタイル追加を目的としたdiv やspan要素の追加

あやふやなHTMLをマークアップしながらCSSを当てるのではなく、マークアップとスタイリングをそれぞれしっかり分けて作業することが重要だと感じました。

マークアップからスタイリングまでの作業順序

僕は次のような流れでCSSを書くまでの作業を進めるように決めました。スタイリングまでの各作業を良い感じに分業にすることができると思います。

表示するコンテンツをHTMLタグで囲わずにベタ書きする
セクション要素(sectionやarticle等)を使い、アウトラインを意識してマークアップ
HTML 5 Outliner でアウトラインを確認
マークアップしたHTMLをできるだけ崩さないようにCSSを当てる

もしかすると普段からHTMLやCSSを書いている人からすると当たり前の流れかもしれないです笑

特別なことは何も行っておらず「正しくマークアップされたHTMLに対してCSSを当てる」という方針で流れを決めました。

DevTools(デベロッパーツール)を使えるようになる

DevTools(でべロッパーツール)が使えるようになるとCSSが楽しくなります。

DevToolsの熟練度 = フロントエンドの熟練度な気がするので出来るだけ早い段階で使えるようになっておいて損は無いと思います。ちなみに僕は最近までDevToolsを殆ど使いこなせておらず、嫌いなツールの1つでした笑

DevTools は少しでも使い方が分かってくるとCSSを含めたフロント全般の情報を手軽に見ることができるので開発時に非常に役立つ強力な助っ人になるので出来るだけ早い段階で使えるようになることをおすすめします。

個人的には次の2つをやってみるとDevToolsを使うことへのハードルが下がり、結果的にCSSへの苦手意識が軽減すると思います。

最低限の設定とショートカットを覚える
Workspaces機能を使ってブラウザ上でCSSを当てる

Workspaces機能を使えるようになるとブラウザとエディタ間を移動しながらコーディングしなくて良くなりますし、リロードせずにスタイルをリアルタイムで確認できるのでめちゃくちゃ楽になります！僕のようなCSSが苦手な人こそ使うべき機能だと感じました。

公式ドキュメント、リファレンスを読む

最近ようやくRubyの公式ドキュメントは読むようになりましたが、恥ずかしながらHTMLとCSSの公式ドキュメントはこれまで見たことすらありませんでした。

HTML/CSSに関する情報は非常に多く、技術記事等を参照すればとりあえずは形になるので正直なところ僕には必要性すらあまり感じていませんでした。しかし、HTML/CSSに関しても公式ドキュメントやリファレンスを読む大事さを最近になってやっと理解できるようになってきました。

公式ドキュメントを読むようになってストレスが減った

構造化をちゃんと意識してHTMLを書いたり、見たことのないCSSのプロパティ名を調べる場合は公式ドキュメントや信頼できるリファレンスを参照した方が結果的にストレスが減ると思います。公式ドキュメントを参照するようになって次のようなメリットを感じました。

正しい情報を探すまでの時間が短くなった
「本当に正しい情報なのかな？」という不安が減った

個人的には「参照元の情報が正しいのか？」ということを判断する手間と時間を削減できることが精神的なストレスの軽減に繋がっていると感じました。

開発時の情報収集の時間は手が止まってしまうので無意識的に焦りが出てしまうので、できるだけ短い時間で情報収集を終わらせたいと考えていました。しかし、情報収集の際は技術記事等の気になるページを片っ端から無数のタブで開き情報収集していましたが、公式ドキュメントを見ようとはしていませんでした。

技術記事等から得た情報を公式ドキュメントで正しい情報なのか確認をすることもせず、ただ闇雲にコードを書いていたことが大きな間違いだと気付くのにだいぶ時間が掛かってしまいました。結果的に古かったり間違った情報だった事に後々気付き修正を重ねることをしていたので時間も掛かり、正しい知識が身に付いていなかったと思います。

公式ドキュメントを読むようになってくると情報収集へのストレスも解消され、ちょっとずつですが正しい知識が身に付いてきていると感じています。こちらの記事には公式ドキュメントやリファレンスを読むことがなぜ大事なのかとても分かりやすく解説されているので一度読んでみることをおすすめします！