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

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

2015年10月13日
コーディング系
CSS

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

Contents

CSSについて

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

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

p{
	color: #f00;
}

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

2015年07月16日

初心者必見！WordPressで0からブログを作ってみよう！CSSの入門編

次回に引き続きブログサイトを作ってみます。前回でHTMLでマークアアップすることができました。そして今回はCSSで文字の色を変えたり、レイアウトしたりとスタイルを適用してみましょう。

記事を読む

CSSの設計の重要性

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

例えば

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

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

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

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

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

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

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

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

代表的なCSSの設計方法

代表的なものとしてSMACSSやOOCSS、BEMがありますね。

SMACSSによるCSS設計 – Qiita

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

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

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

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/

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

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

hiloki/flocss

https://github.com/hiloki/flocss

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

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

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

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

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

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

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

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

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

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

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

終わりに

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

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

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

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

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

今すぐフォローしよう！

@102_designさんをフォロー

「イチマルニデザインブログ」web制作に役立つ情報をお届けするブログ

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

CSSについて

CSSの設計の重要性