CSSの設計手法

■代表的な設計手法

OOCSS
　オブジェクト指向のような設計手法
　Bootstrapのように各UIに統一した名前をあらかじめ決めておかないと破綻しやすい。

BEM
　「.Block__Element--Modifier」という命名ルールに従いクラス名を決めます。

SMACCS
　スタイルをBase, Layout, Module, State, Theme の ５つに分けて考えます。

MCSS
　CSSモジュールをBase、Project、Cosmeticの３つのレイヤーに分けて考えます。

FLOCSS
　CSS設計のいいとこ取り

CSS in JS
　CSSをJavaScriptのオブジェクトにして扱う

Scoped CSS
　Firefox以外ではサポートされていない



参考
http://uxmilk.jp/43386

SassとSASSとSCSSの違いについて

■Sass、SASS、SCSSの違い

SASSとSCSSはSassを書くための書き方です。
SassがCSSを簡単に書くための手段、といったような感じです。



参考
http://uxmilk.jp/38084

■SASSとSCSSどっちで書いたほうがいいか

SCSSはSASSの後に登場した記法ですが、こちらの方がCSSとの互換性があり、最近ではこちらがメジャーなようです。
一方、SASSはSassのもともとの記法であり、Rubyライクな書き方ができるようです。



参考
https://ferret-plus.com/6233
https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe