制作現場でのコーディング手法を学べる本2冊

先日初めて制作を担当させていただいたサイトを納品したが、見た目こそカンプ通りに仕上げることが出来たが、ソースコードの方はお世辞にもきれいとは言えない。Class名や画像名にはあまり規則性が無いし、余白の設定なんかもあっちはmargin-top、こっちはmargin-bottomと行き当たりばったりだ。SASSを導入したものの、やれたこととしては、ネストの活用くらい。

もっと効率的なコーディングを行いたいなぁと思っていたんだけど、我流で考えるよりも、制作現場のやり方を学んで真似させていただこうということで、CSS設計に関する本を2冊購入した。数日かけてじっくり読んだが、結論から言うと、どちらも超良書だった。

最強のCSS設計

https://www.amazon.co.jp/dp/B01MZDTPSS/

1冊目はかの有名な株式会社LIGの堀口さんという方が執筆された本で、OOCSS、SMACSS、BEMについての概念と、ケーススタディを使ったそれぞれの活用方法についての解説が主な内容である。それ以外にも汎用クラスの使い方などに関するティップスなども。

この本の中で一番良かったのが
「Sassに合わせたカテゴライズとディレクトリ構成」という内容。

master.scssと各scssファイルに分けて、cssの記述は用途別に各scssファイルに分けて書いていく手順について解説されているのだが、これがめちゃくちゃ分かりやすかった。制作会社はこうやってCSSを設計していくんだね。もう目からウロコが落ちまくりました。

フロントエンド専門制作会社が教える速く正確なWeb制作のための実践的メソッド

https://www.amazon.co.jp/dp/B071YQ86MF

2冊めはコーディングファクトリーというそれこそコーディングを生業とするチームの方々が執筆された本で、「最強のCSS」よりも情報量としては、体感1.5倍くらい。制作全体のフローやディレクションのコツなどについても細かく説明があるが、今回参考にさせていただいたのはチャプター2の「コーディングガイドライン策定」

その中でも「Classの命名方法」について学べたのが一番の収穫であった。要素をレイアウトとモジュールに分けて、それぞれを内容によって更に細かく分ける手順が詳しく解説されていた。

我流で考えるよりも真似てしまった方が早いと思う

Class名はどうやってつけたらいいのか?ディレクトリー構成は何が正しいのか?画像のファイル名はどう命名すべきなのか?初心者では考えつかないことが多い。こういったことは変に悩まずにプロの方たちのやり方をそのまま踏襲するのが良いと思う。

上記2冊ともまだ「内容を知った」程度で、きちんと理解し、実務に活用していくにはまだまだ時間がかかると思う。じっくり向かい合っていきたい。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です