Post on 19-Jun-2015
description
こういうクラスが仕様変更を重ねてCSSの随所で誕生。
.messagebox_bold {border-width: 2px;font-weight: bold;
}
.other_box_round_bold {border-radius: 5px;border-width: 2px;font-weight: bold;
}.another_box_round {border-width: 5px;
}
ケース1: 「あ、サイトの随所にあるボックスの線の太さなんだけど、やっぱ3pxにしてくんない？」
.messagebox_bold {border-width: 2px;font-weight: bold;
}
. other_box_bold {border-radius: 5px;border-width: 2px;font-weight: bold;
}.another_box_round {border-radius: 5px;
}
えっと…このクラスとこのクラスか…
.messagebox_bold {border-width: 2px;font-weight: bold;
}
.another_box_round {border-radius: 5px;
}
. other_box_bold {border-radius: 5px;border-width: 2px;font-weight: bold;
}
ケース2:「随所にあるボックスの枠線の角なんだけど、丸みを3pxにしてほしいのね」
.messagebox_bold {border-width: 2px;font-weight: bold;
}
. other_box_bold {border-radius: 5px;border-width: 2px;font-weight: bold;
}.another_box_round {border-radius: 5px;
}
今度はこことここか…
.messagebox_bold {border-width: 2px;font-weight: bold;
}
.another_box_round {border-radius: 5px;
}
. other_box_bold {border-radius: 5px;border-width: 2px;font-weight: bold;
}
でも今度はこうなって、結局修正箇所が多いのは変わらないんじゃないの？
.messagebox.bold {border-width: 2px;
}
.another_box.bold {border-width: 2px;
}
. other_box.bold {border-width: 2px;
}
ざっくり言うと前述のOOCSS記法に対して
さらに「モジュール化」という概念を加えたもの
モジュールごとの管理でどこを修正すれば何が変わるのかわかりやすくなる。
./mod/messagebox.css
./mod/form.css
./mod/navigationlist.css:
./layout/header.css
./layout/navigationarea.css
./layout/content.css
./layout/three_column.css:
./main.css
SMACSSの詳細
日本語・電子書籍版（有料$15）https://smacss.com/ja
英語・Web版(無料)http://smacss.com/
モジュール化で修正は楽になるけど一々mainファイルに統合するの
面倒だよ！
Grunt ?
とにかく色んなものが自動化できるよ！
(例) JS の uglify, 複数ファイルの結合, ファイル変更の監視, …
おまけ
SaSS(SCSS) + Compass
CSSで変数使ったり、ネストできたり、
OOCSSと親和性が高い。Gruntでコンパイルの自動化可能。
.box{
/* box スタイルの記述 */
.inner {/* .box .inner スタイルの記述 */
.deeper {/* .box .inner .deeper スタイルの記述*/
}
}
&.green {/* .box.green スタイルの記述 */
}
}
.box{/* box スタイルの記述 */
}
.box .inner {/* .box .inner スタイルの記述 */
}
.box .inner .deeper {/* .box .inner .deeper スタイルの記述 */
}
box.green {/* .box.green スタイルの記述 */
}
例えば・・・CSS SaSS(SCSS)
$content_width: 960px;
.header_inner {width: $content_width;
}
.nav {width: $content_width;
}
.footer_inner {width: $content_width;
}
::
.header_inner {width: 960px;
}
.nav {width: 960px;
}
.footer_inner {width: 960px;
}
::
例えば・・・CSS SaSS(SCSS)
修正が楽になる！修正漏れが減る！
というわけで…
OOCSSをはじめると良いことあるかも。
ありがとうございました