2016 10 3

軽量な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名と紐付いているので、どこにあるのかもあまり複雑にならない。
こうやって使うだけなら、なんで変数にしてるん??? と思うけど、たぶん、あとから上書きできるようにするためだな。