浅谈我所见的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目录有利于提高开发效率，便于版本迭代。