淺談我所見的CSS組織風格

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目錄有利於提升開發效率，便於版本迭代。