わたしは泥の中にいた
泥の中？
とにかくクズみたいなCSSしか書けていなかった。幸いにも、自分が書いているCSSがクズだということは自覚できていた。
定石がわからなかった。入社してからずっとわからなかった。どうすればきれいなCSSが書けるのか。CSSについて調べたら、メンテナンスがどうとか、CSSは破綻しやすいとかいろいろあるけど、結局どうしたらいいのかわからない。
思い通りの配置にならないとき、ぐぐったら確かにそれっぽいやり方は出てくるけど、いつもその場しのぎで自分でもよくわからないコードを書いている。それにうんざりしていた。
ウェブサイトを作る業務が続いていて、うんざりしていた。CSSよくわからないし、デザインもわからない。正解がないタスクに取り組むのは難しい。PHPだと、処理するのにより良い書き方、とかはわかるけどCSSは何もわからない。下手に時間ばかりかかって、効率が悪い気がする。何もわからないよーってなって、泥の中にずぶずぶといて、泥の中で泥みたいなCSSしか生み出せない。
どうやって抜け出したのか
ぐぐったら正解っぽい結果は得られるけど、結局断片的な情報を統合できずにいた。
だから、本を読むことにした。
『Web製作者のためのCSS設計の教科書』谷拓樹 著だ。
本を読んだ結果
BEMの概念とか、コンポーネントとか、CSS設計のいろいろを学んだ。
idは基本的に使わないほうがいいとか、要素セレクタを省略するとか、場所に依存しないようなCSSを書くのがいいとか、とにかく目からウロコって感じの内容だった。頭の中の霧が晴れていく感じ。
特にブロック、エレメント、モディファイアの概念を知って、CSSの見方が変わった。それに加えて、FLOCSSのレイアウト、コンポーネント、プロジェクトとか、そういう設計の仕方を知ってだいぶ頭の中が整理された。
最初はBEMの概念と、FLOCSSでいうところのプロジェクトとかとの区別が頭の中でできていなくて混乱したけど、BEMは命名の概念であって、FLOCSSは構造の概念だと自分で納得してなんとかうまくいった。
他人の書いたCSSのセレクタ名がよくわからず、特にレスポンシブに対応するためのセレクタがどういう動きをするのかもわからず、それにも消耗してたから、自分でこれから書くCSSについては、そういう混乱がないようにできそうだということが自分の中の希望になった。
配置についての考え方
ボタンみたいなものには幅を持たせない。marginなんかもつけない。
なんて画期的な考え方だろう。レベルが1上がった。
命名規則
わかりやすい命名規則最高。FLOCSSとかだと冗長になりがち、とかいう指摘を見たけど、命名が冗長であることのデメリットがわたしとしてはよくわからない。具体的な命名のほうがわかりやすい。
一般の人はソースコードなんて読まないんだし、パッと見たときに他人が見やすいほうが絶対いい。冗長でいい。
その場しのぎにしないコード
FLOCSSを実践しようと思って、ペラのサイトを作った。配置についてもこれまでとは比べ物にならないほどやりやすかったし、SCSSを使ったから、FLOCSSの概念にしたがってファイルを分けることができたのも良かった。というのも、業務でCSSを加えないといけないときに、どこに書いたらいいのかわからなかったから。
ユーティリティとかで調整して、いい感じにできたと思う。もっと複雑なサイトにだともっと難しさがあるかもしれないけど、かんたんなサイトなら問題なかった。
ただ、またコンポーネントとプロジェクトの区別がよくわかっていない。
おわりに
業務で触ってるCSSはほんとに意味不明で、セレクタにidを使いまくっているせいで、詳細度がわけわからないことになっていて、追加であてたいものもうまくあてられなくてストレスがたまっている。
今回は本をよんで、なんとなく泥の中からは抜け出すことができた。自分がこれから書くCSSは希望のもてるものにしようと心に誓った。
今回の本
