Web制作者のためのCSS設計の教科書を読みました。

CSS設計について学ぶ

仕事で自分以外の書いたCSSを見る事が多いのですが、書き方は本当に様々です。またそれらの調整の容易さも書き方で変わってくることを実感しました。それをふまえ自分のCSSの書き方は正しいのか?CSS設計を学ぶべきではと考えはじめこの本を読む事にしました。なおかつセールだったのでタイミングもよかったです。

kindleは主にiphoneのkindleAppで読んでいます。テキスト的な本は小さい画面では読みにくいのでkindleで買わないほうがいいと考えていましたが、こちらはkindleでも問題なく読む事ができました。

メンテナブルでありつづけるためのCSS設計 from 拓樹 谷

作者の谷 拓樹さんのスライドです。これだけでも参考になりますが、本書ではサンプルコードなども多くより詳しく書かれています。

本書で学んでから使用しているもの

FLOCSS

様々な手法がありますがそれぞれの良いとこどりな感じの設計手法です。

詳しくは https://github.com/hiloki/flocss

命名規則にMindBEMdingを採用しています。始めはBEMって長ったらしくて気持ち悪かったんですけどすぐ慣れました。

もっと早い段階で読んでおきたかった

webを学びはじめた時からCSSの明確な書き方ってあるのだろうかと思いながらも表示上問題ないように書いているだけで後々になって書き方失敗したな…と感じることが多くありました。独学での書き方になってしまっていっていたのです。本書を読んでCSS設計が必要な理由を知り、その手法を知ることで明確なCSSの書き方の考え方が見えた気がします。なんというかCSSの書き方に対してのモヤモヤがスッキリした感じです。

これからwebの勉強をはじめる段階で読むには早過ぎますが、ある程度cssのレイアウトでwebサイトを構築できるようになった段階で読んでおきたかったです。なのでその段階の方やチームでcssを扱う方には是非読んでいただきたいです。

ただこれらの設計方法を用いれば全て上手く行くというわけでもありませんしすぐに導入することも難しいかもしれません。答えが書いてある訳ではありませんが本書を読んでCSSの書き方の考え方を知ることは重要であると感じました。

Web制作者のためのCSS設計の教科書