この投稿でわかること
- 「Web制作者のためのCSS設計の教科書」１章・２章の概要
- エンジニア初心者が感じていること
どんな本？
画像参照）Amazon
ABOUT
タイトル 「Web制作者のためのCSS設計の教科書」
作者 谷拓樹
どんな人に 初心者エンジニア、学び直したいと考えている人に
読んだきっかけ
勉強をスタートするにあたりおすすめされた本です。
始めたばかりの新人エンジニアがまず理解しておくべきことがわかる本になっていますし、これから先立ち返って読むにもいい本となっています。
この本を読んでわかること
本の表紙にもあるとおり、修正しやすいCSSの設計方法について理解が深まる内容となっています。
全部で７章構成となっており、CSSの設計とは？基本として理解しておくことって？コンポーネント設計は？など、将来を見据えたウェブ制作ができる人材を目指すにあたって、心得ておくことが詰まっています。
（個人的意見ですが、本の中身の色合いやデザインがとても好み♡）
私が学びを得た3つのこと
1.「見た目通りに作って終わり」は３流以下
現在は静的コーディングの練習を行なっています。モデルとなるWEBサイトを仕様書を見ながら、同じように作成していくという作業です。
最初こそ、「デザインカンプと同じになった！できたぞ！」と意気揚々とメンターに提出していましたが、たくさんのレビューが。見た目的な指摘ももちろんですが、構造がぐちゃぐちゃになっていたり、要素セレクタを繋げて指定していたり、全くもって次に修正に入る人のことを考えていませんでした。
WEBサイトというのは、運用していくというのが大前提です。新しい情報を追加したり、不要になった箇所を削除したり、ずっとそのままの状態で置いておくということはまずないです。
修正に入る人が自分であっても他の誰かであっても、０から作り直さないと追加・修正ができない状態では、本当の意味で作成ができたとは言えないのです。
WEBサイトを見る人のこと、修正に入る人のこと、それらを考えた設計をしていくことの大切さを改めて感じることができました。
2.急がば回れ
急いでいたり焦っていたりする時って大体何かを忘れたり、失敗してしまったりしませんか？私は本当によくあります。CSSの設計も同じなんだなと思いました。
というのも、クラスを指定しなくても、要素を並べていけば、ぶっちゃけCSSの指定ってできてしまいますよね。
完成を急いて見やすい構造を作る作業を省いてしまうと、後から修正が入ったとき、HTMLも変えて〜、CSSも変えて〜と大変になります。また、先に作成する構造を確認せず、上から順番に作っていくと、最後に大幅に修正が必要になった、なんてことも初心者の時は起きがちじゃないでしょうか。
結局、いいものを作るには最初に時間をかけて土台を丁寧に固めることが大切なんだと思います。そうすることで最初の進みは遅いようでも、結局ゴールに辿り着くのは早く、成果も大きくなります。
3.構造が複雑になっていく前に詳細度は知っとけ
今現在はトップページのサイト制作を勉強で行なっているだけですが、案件に入るようになれば、それだけで終わるなんてことはほとんどないでしょう。
構造が深くなっていくにつれ、CSSのルールセットをコンポーネント(*1)にすることが重要になってきます。その前に詳細度(*2)をしっかりと理解しておくのが大切だと感じました。
なぜかというと、CSSを指定しても適用されないのはこの詳細度が関係してきます。デバックの際に適用する箇所が見つけられず、無理やり!inportantで適用していくとCSSの破綻に繋がってしまうからです。
セレクタに依存せず、修正しやすい構造を意識していきたいです。
用語について
コンポーネント
意味：部品、構成要素。
Web開発において汎用性や独立性を高めた仕様や設計を持つものを指す。
→どこか別の場所に入れたり、位置を変更したりなど再利用できること前提で作られた要素のこと。
詳細度
複数のCSS宣言が競合した場合、どのスタイルが優先されるかを定めたブラウザのアルゴリズム。
→スタイルを指定するときにどのスタイルが優先されるのか、細かい取り決めがあり、セレクタ・要素それぞれに優先度がありつつ、組み合わさることによってより複雑化している。
まとめ
設計やアーキテクチャの話では建築に例えられる文言がいくつかあります。そこで私が共感したのが、「構造がしっかりしていない建築は、いくら見た目が綺麗であっても、それはすばらしい建築と言えるのか」ということです。
外見の美しさだけでなく、内部構造も整え、土台がしっかりとした美しさを常に忘れず、エンジニアとして勉強を積んでいきたいです。
