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组织风格
原文地址：https://www.cnblogs.com/Sroot/p/7575409.html