多くの人は CSS を書く際に Sassや Less、PostCSS などのプリプロセッサを使用して書いていると思う。そしてそのような場合 main となるファイルは @import を使った以下のようになると思う：
@import object/button.css
...
@import component/button.css
...@import のおかげで大きな一枚のファイルではなく役割によってスタイルを分割できるようになった。これはとても便利な機能だと思いう。
ちょっと話はかわってフレームワークの話、 CSS には Bootstrap を筆頭に大変多くのフレームワークが存在してる。それがやっていることはそれほど変わらず見た目が少しちがうだけ。できたらいろいろなフレームワークのいいとこを @import してスタイルを楽に作りたいなと。つまり node_modules のように CSS を export して使うところでいい感じに import するっていうのでいいかなと。
フレームワークにはそれぞれ独自の命名規則があって一部フレームワークにしてしまうとそこだけ他の命名規則と異なってしまって管理しにくいものになってします気がする。（違うかな？）でもすべての人に同じような命名規則使って書いてということできない。そこで無理やりそれぞれが好む命名規則に変更できるばいいかなと（簡単にできない気がする）例えば Bootstrap フレームワークを main ファイルで import してつかうところで @extend して以下のようなコードになる：
/* Bootstrap をインポートしてるのが前提 */
.orignal-btn {
@extend .btn;
// 自分のルールセット
}うーんこれでもやりたいことはできる。ただどうなんだろう。使いやすいかな？なにを拡張しているのかは上のコードみたいに書いてある方わかりやすいからなにか必要だと思う。なんか名前空間あったほうがいいかな？
.original-btn {
@extend .bootstrap-btn /* <- 目印 */
}