CSSを書いていて、もやもやしたら

「なんか効率悪いような気がするなー」、「これさっきも書いたけどなー」、「なんかしっくりこないなー」ってことないですか？

そんなときは、CSS設計を考えてみてはいかがでしょうか。

CSS設計

CSSを書いていて感じるもやもやを解決できるものです。

過去に書いたCSSやこれから書くCSSがちゃんと活かされ、自分の意図が無駄になりづらくなります。
これは言い換えると無駄なコードが少なくなるということが言えると思います。

Web技術の勉強会「HTML5ビギナーズ」の運営に携わっているのですが、そこで「Web制作者のためのCSS設計の教科書」の著者である谷さんのFLOCSSの登壇をきいて、もうちょっとちゃんとやろうとFLOCSSでCSSを書くようになりました。だんだん慣れてきて使えば使うほど「なるほどなー」が思うことが増えました。

クローズドのCSS設計の勉強会を開催

自分の考えたものではないけど活用できるものは共有しようということで、「Web制作者のためのCSS設計の教科書」をその名の通り教科書としてクローズドのCSS勉強会を開催しています。個人的にこの本を読むのは2周目。ただ1周目にすみずみまで読んだというわけではなかったので改めてしっかり読むことができるのとすでに忘れていることがあるので良い復習になっています。

10月末から週1回のペースで、それぞれの担当を決めて教科書に書いていることを自分なりに発表していくスタイルで、現段階の進捗はBEMまで進みました。schooに堀口誠人さんが講師をしているBEMの動画があったので一旦教科書は止めて動画をみんなで観ていたりとちょと寄り道したりしています。

この勉強会を通じて思ったり感じたことは

教材の「Web制作者のためのCSS設計の教科書」は良い本
ただ書くだけならCSSは本当に簡単で、自分が簡単なことしかやっていなかったんだなと改めて反省
参加した人はそれぞれ自分や他人の書いたCSSにもやもやしていた

書くこと自体は簡単で、シートの記述の下に継ぎ足せばすでに効いているスタイルを上書きすることができるのでとりあえず作業自体はなんとかなるところがCSSのメリットでありデメリットでもあります。とりあえずできるところが、感じたもやもやをいつの間にか忘れ去せていく…そんな気がします。

もやもやしたときにやること

体系だった教科書のおかげで、自分だけでなく書籍を買ったたくさんの人のもやもやを解決することができただろうと思います。現在進行中のクローズドの勉強会のメンバーのもやもやも解決できているはずでしょう。しかしそもそも自分を含めてやっておいたほうがよかったことや、今後やっていこうと思うことを書き留めると

解決策はすぐ浮かばなかったとしても、とりあえず何にもやもやしたのかを記録しておく
もやもやを再現してみる
じっくり何がもやもやするのかとその解決策を考えてみる

まぁ、これはCSSに限らずですが。。。
こういうプロセスをやっていくときっとビギナーから卒業できるはずで、そしてこういうことをちゃんとできる人がレベルアップしたり、有用なものをつくったりしているんだろうなーと。

で、やっとですがCSS設計でまずは意識したいざっくりとした大事なこと

要素に依存しないクラスを使ったセレクタを書くこと
セレクタの階層を深くしないこと
自分なりの命名ルールをつくること

まずはこれを意識してCSSを書きましょう。
小規模なものはこれだけでいけると思います。

そして、もっと体系だっている構成案があるので、それを勉強して実際に使ってみること。
例えば、以下のようなものがあります。

OOCSS
SMACSS
BEM
FLOCSS

少しずつ慣れていくためにはOOCSSから順番にやっていくのがいいと思います。
これも教科書通りの順番ですが。こういうところでも「CSS設計の教科書」の学びやすさを感じます。

自分を成長させるもの

実際につかって体感するということと、どこかでアウトプットすることがよいのかなと。ちょっとえらそーにクローズドのCSS設計の勉強会をしていると書きましたが、これも結局は自分のためでもあるのです。（有用なものは共有しようというのは嘘ではないですよ！）