軽量なlow-level css Basscss
http://www.basscss.com/
名前から、normalize的な薄いcssかなと思ったら思いのほか色々書いてあった。
デザイン要素が薄めで、使い回しやすいモジュールがそろったライブラリ。
bootstrapはコテコテでやだなーって時使うといいのかな〜
OOCSS的なアプローチで、スタイルシートを書いてるかのようなclass名。
Base
https://github.com/basscss/basic/blob/master/index.css
headingタグに対して、共通のweight、line-height、marginを指定して、
font-sizeをremでそれぞれ指定してるのが面白かった。
こういう書き方、あとからみてわかりやすい。
addons
currentcolor
https://github.com/basscss/addons/blob/master/modules/btn-outline/index.css
.btn-outline,
.btn-outline:hover {
border-color: currentcolor;
}
baseとなるモジュールで、色は currentcolor
で指定。
なるほどーって感じ。
https://developer.mozilla.org/ja/docs/Web/CSS/colorvalue#currentColorkeyword
http://caniuse.com/#feat=currentcolor
おお、もう普通に使える。
variables
https://github.com/basscss/addons/blob/master/modules/darken/index.css
まず、同じ役割のclass群の単位で、ファイル自体を分けて管理しているのファイル数が増えてしまうけど、わかりやすい。
gulpのタスクごとにファイルを分けているような感じ。
また、主に使用する先である各モジュールのところで変数指定しておくのが面白い。
変数名がclass名と紐付いているので、どこにあるのかもあまり複雑にならない。
こうやって使うだけなら、なんで変数にしてるん??? と思うけど、たぶん、あとから上書きできるようにするためだな。