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目录有利于提高开发效率,便于版本迭代。