CSSの設計をするときに参考になる記事を集めてみた

このエントリーをはてなブックマークに追加

CSSの設計をするときに参考になる記事を集めてみた

CSSは書くのは簡単です、でも運用していくのはとても大変ですぐに破綻する言語です。そんなCSSにならないためのとーってもためになる記事をご紹介したいと思います。

CSSについて

極論言うとCSSを書くこと自体は簡単ですよね。正直、CSSを書くだけなら少し勉強すればできますし、飲み込みの早い方であれば一ヶ月もしないうちにサイトを作ることができるくらいにはなります。

というのもシンプルなコードをつらつら書いていけばいいんですもんね。

p{
	color: #f00;
}

というように、どこを、どんな風に変えるかっていうのを書いていけばCSSでHTMLに対してスタイルを割り当てられます。
CSS?なにそれ?ってかたはこちらを見ていただくといいかもしれません。

CSSの設計の重要性

CSSはシンプルで簡単であるがゆえに問題も起こりやすいんです。

例えば

  • 同じようなコードが複数箇所ある
  • クラス名が被ってる
  • スタイルの詳細度問題

他にもありますが、サイトを運用していると問題が起きやすくなります。特に複数人で一つのコードを見ているときや、大規模なサイトであればあるほど問題が生じやすくなります。要はCSSが破綻してしまっている状態ですね。

こういったCSSの破綻が「起きにくくなる」ようにすることが大事になってきます。「起きない」としなかったのは、正直な話絶対に破綻しないというのは難しいからなんです。

コードを触る人が増えれば破綻するリスクは高まりますし、サイトの改善や修正などもあります。リニューアル時には綺麗に設計して書いたCSSのコードもなにもしないで改善や修正でコードを書いていればいずれは破綻します。

CSSを書くうえでもっとも基本となるのは

  • 予測しやすい
  • 再利用しやすい
  • 保守しやすい
  • 拡張しやすい

というのがいいCSSコードだと言われています。さらにSMACSSやOOCSSなどCSSの設計としていろんな考え方や手法があり、それらを基本としてCSS設計の重要性を勉強しておくことはサイトを運用するにあたりとても大事ですね。

大事なことはちゃんとしたルールを明確にすることではないのかなと僕は思っています。複数人いる場合にはそのルールを共有することが大事なのではと。それでももしかしたらいつかは破綻してしまうと思います。ですが、かなり長いあいだ運用しやすいCSSにすることができるのではないでしょうか。

代表的なCSSの設計方法

代表的なものとしてSMACSSOOCSSBEMがありますね。

SMACSSによるCSS設計 – Qiita

http://qiita.com/matsui-a/items/9b9188904d160a3ec223

http://qiita.com/matsui-a/items/9b9188904d160a3ec223

SMACSSをわかりやすく紹介してくれています。

[CSS] Object Oriented CSSを学んで綺麗なコードを書く – YoheiM .NET

http://www.yoheim.net/blog.php?q=20141201

http://www.yoheim.net/blog.php?q=20141201

OOCSSならこれ。

MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号

http://blog.ruedap.com/2013/10/29/block-element-modifier

http://blog.ruedap.com/2013/10/29/block-element-modifier

hiloki/flocss

https://github.com/hiloki/flocss

https://github.com/hiloki/flocss

CSSの教科書の著者、谷さんのFLOCSS。実際に、これで設計しているサイトを運用したことありますが、とてもいい設計だと思います。

CSSの設計にとっても役立つ記事

破綻しにくいCSS設計の法則 15 – Qiita

http://qiita.com/BYODKM/items/b8f545453f656270212a

http://qiita.com/BYODKM/items/b8f545453f656270212a

CSSの設計について考えるはじめの一歩|社員ブログ|株式会社Qript

http://www.qript.co.jp/blog/technique/3358/

http://www.qript.co.jp/blog/technique/3358/

昨今のCSS設計事情からみるCSS設計のあり方とは | HTML5Experts.jp

https://html5experts.jp/hiloki/14372/

https://html5experts.jp/hiloki/14372/

cssの設計を考えるにあたり参考にした設計思想 | アライドアーキテクツのクリエイターブログ

http://creator.aainc.co.jp/archives/7263

http://creator.aainc.co.jp/archives/7263

CSS設計するときにためになるスライドショー

なんでCSSすぐ死んでしまうん

http://www.slideshare.net/hayatomizuno/css-41084761?ref=http://creator.aainc.co.jp/archives/7263

http://www.slideshare.net/hayatomizuno/css-41084761?ref=http://creator.aainc.co.jp/archives/7263

大規模サイトにおける本当は怖いCSSの話

http://www.slideshare.net/in0in0/css-23708309?related=1

http://www.slideshare.net/in0in0/css-23708309?related=1

ちゃんとCSSを書くために – CSS/Sass設計の話

http://www.slideshare.net/hiloki/a-good-css-and-sass-architecture?related=2

http://www.slideshare.net/hiloki/a-good-css-and-sass-architecture?related=2

今必要なCSSアーキテクチャ

http://www.slideshare.net/MayuKimura/css-25547100?related=3

http://www.slideshare.net/MayuKimura/css-25547100?related=3

モダンなCSS設計パターンを考える

http://www.slideshare.net/hiloki/modern-cssarchitectureqcon?related=5

http://www.slideshare.net/hiloki/modern-cssarchitectureqcon?related=5

終わりに

今回はCSS設計の基本と参考になる記事をご紹介しました。先ほども書きましたが、破綻しないCSSなんてそうそう無理です(笑)ただ、破綻しているCSSを運用し続けるのはめちゃくちゃ大変です。

どのCSSの設計方法でもいいと思いますが、方針をしっかり決めてルールを明確にして共有していくことがとても大事です。そのための一歩となればいいなと思い記事にしました。

ではでは良きCSSライフを。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ