1.簡單組織（見習級）

projectName
├─css
|  └style.css

優點：簡單，單一文件，適合一些簡單項目。

缺點：過度集中，沒有模塊化，無法適應大型項目。

2.公共組織（見習級）

projectName
├─css
|  ├─index.css
   └base.css

優點：抽取公共樣式，適合一些小中型項目。

缺點：重用代碼低，沒有模塊化，無法適應大型項目。

3.頁面集中組織（見習級）

projectName
├─css
|  ├─about.css   └index.css

優點：按頁面組織，集中存放在css目錄中，適合一些中小型項目。

缺點：重用代碼低，沒有模塊化，無法適應大型項目。

4.頁面分布組織（見習級）

projectName
├─page|  ├─index
|  |   └index.css
|  ├─about
|  |   └about.css

優點：按頁面組織，分布存放在對應目錄中，針對性管理頁面樣式，適合一些中小型項目。

缺點：重用代碼低，沒有模塊化，無法適應大型項目。

5.分離插件（框架）與源碼組織（見習級）

projectName
├─css
|  ├─index.css|  ├─plugins
|  |    └jquery.timepicker.min.css
|  ├─libs
|  |  └bootstrap.min.css

優點：分離插件（框架），區分第三方與本項目的樣式，適合一些中小型項目。

缺點：重用代碼低，沒有模塊化，無法適應大型項目。

6.組件組織（資深級）

projectName
├─css
|  ├─page
|  |  └index.css
|  ├─layout
|  |   ├─desktop.css
|  |   └moblie.css
|  ├─common
|  |   ├─footer.css
|  |   └head.css

優點：抽取組件樣式，重用代碼高，組件模塊化，適合一些中大型項目。

缺點：引入過多的css標簽，不適合小型項目，使用會過於繁瑣。

7.精細組件組織（資深級）

projectName
├─css
|  ├─page
|  |  └index.css
 
|  ├─layout
|  |   ├─desktop.css
|  |   └moblie.css
|  ├─common
|  |   ├─footer.css
|  |   ├─head.css
|  |   ├─tab
|  |   |  └tab.css
|  |   ├─button
|  |   |   └button.css

優點：更加細化抽取，功能組件樣式， 重用代碼很高，組件模塊化，適合一些中大型項目。

缺點：引入過多的css標簽，不適合小型項目，使用會過於繁瑣。

8.預後處理組件組織（宗師級）

projectName
├─scss
|  ├─vendor
|  |   ├─font-awesome-sass
|  |   |         ├─font-awesome.scss
|  |   |         ├─_animated.scss
|  |   |         ├─_bordered-pulled.scss
|  |   |         ├─_core.scss
|  |   |         ├─_fixed-width.scss
|  |   |         ├─_icons.scss
|  |   |         ├─_larger.scss
|  |   |         ├─_list.scss
|  |   |         ├─_mixins.scss
|  |   |         ├─_path.scss
|  |   |         ├─_rotated-flipped.scss
|  |   |         ├─_screen-reader.scss
|  |   |         ├─_stacked.scss
|  |   |         └_variables.scss
|  ├─partials
|  |    ├─page
|  |    |  └index.scss
|  |    ├─layout
|  |    |   ├─desktop.scss
|  |    |   └moblie.scss
|  |    ├─common
|  |    |   ├─footer.scss
|  |    |   ├─head.scss
|  |    |   ├─button
|  |    |   |   └button.scss
|  ├─modules
|  |    ├─funtion.scss
|  |    ├─mixins.scss
|  |    ├─reset.scss
|  |    └variables.scss

優點：更加細化抽取，功能組件樣式， 重用代碼很高，組件模塊化，解決引入過多的css，適合一些中大型項目。

缺點：不適合小型項目，使用會過於繁瑣。

PS:具體問題具體分析，合理的組織css目錄有利於提高開發效率，便於版本叠代。

淺談我所見的CSS組織風格