On the style of CSS organization I have seen

1. Simple organization (Apprentice level)

projectname├─css|  └style.css

Pros: Simple, single file, suitable for some simple projects.

Cons: Excessive concentration, no modularity, inability to adapt to large projects.

2. Public organizations (apprentice level)

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

Pros: Draw public styles for some small medium-sized projects.

Cons: Low-reuse code, no modularity, and inability to adapt to large projects.

3. Page centralized organization (apprentice level)

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

Advantages: Organized by page, centrally stored in CSS directory, suitable for some small and medium-sized projects.

Cons: Low-reuse code, no modularity, and inability to adapt to large projects.

4. Page distribution organization (Apprentice level)

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

Advantages: Organized by page, distributed in the corresponding directory, targeted management page style, suitable for some small and medium-sized projects.

Cons: Low-reuse code, no modularity, and inability to adapt to large projects.

5. Separation plug-in (frame) and source organization (apprentice level)

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

Pros: Separate plug-ins (frames), differentiate between third-party and this project style, suitable for some small and medium-sized projects.

Cons: Low-reuse code, no modularity, and inability to adapt to large projects.

6. Component Organization (senior level)

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

Pros: Extract component styles, reuse code high, module modularity, and fit in some medium and large projects.

Disadvantage: The introduction of Too many CSS tags, not suitable for small projects, the use will be too cumbersome.

7. Fine component Organization (senior level)

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

Pros: More granular extraction, functional component style, high reuse code, modular modularity, suitable for some medium and large projects.

Disadvantage: The introduction of Too many CSS tags, not suitable for small projects, the use will be too cumbersome.

8. Prognosis Management component organization (Guru level)

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

Advantages: More granular extraction, functional component style, high reuse code, modular module, to solve the introduction of excessive CSS, suitable for some medium and large projects.

Cons: Not suitable for small projects, the use will be too cumbersome.

PS: Concrete analysis of specific problems, reasonable organization of CSS directory is conducive to improve the development efficiency, easy version iteration.

On the style of CSS organization I have seen