HTML
CSS
CSS3
CSSDay 11

CSSを楽しく書く技術

突然ですがみなさん、CSS楽しいですか?

最近、「CSSはつらい」「CSSはうんち」みたいな記事とかつぶやきとか多い気がします。

たしかにCSSのよくない部分もあったりしますが、僕はCSSが好きなのでできるだけ楽しくCSSを書きたいなーと思っています。

そこで、今回はCSSを楽しく書くためのポイントをまとめました。

AltCSS使う

まあこのご時世、CSS直接書いてる人なんていないと思いますけど。AltCSS使いたいですよね。
PostCSSでもSassでも良いと思います。僕はStylusが好きです。

stylusの悪いところはドキュメントが不親切なところですね。
エラーでハマってGitHubのissueを読み漁ることもしばしば…

自動化する

楽しく書くためには余計なことには気を使わないのが一番です。
プロパティの順番とかprefixとかは自動化しちゃいましょう。

CSScomb
プロパティの順番をいい感じにしてくれるツール

Autoprefixer
Web版もある

Lintツールを使う

Lintのルールに沿ってコーディングするだけで体裁の整ったCSSが書けるようになります。書きながらコードをチェックするのはとても大変なので、ツールに任せてしまうのが良いですね。
やはり適度にルールがあったほうが良いコードが書けます。

stylelint

小さく作ってみる

僕はウェブサイトのCSSを書くときも、ボタンとかフォームとかの共通で小さいパーツからスタイルを考えるようにしています。
コンポーネント指向を意識しているというのもありますが、ページを上から実装していくとmarginのもたせ方とかが場当たり的になってしまって、後から書き直すことが多かったというのもあります。

パーツから全体へ視点を広げていくことで、無理のないCSSを書くことができると思います。

コードを公開する

これよくできたな!って思ったらコードを公開してみるのもいいと思います。
個人的にはCodePenが好きです。

コードを公開することでフィードバックがもらえたり、新しい発見があったりしますしね。
良いことばかり!

楽しいCSSライフを送りましょう!