Where to put CSS files

I have always tried my best to follow Uncle Bob's Clean Architecture in every piece of code I write. The main thought is that dependencies should point towards higher level entities and busines rules instead of frameworks. It follows that when someone opens a project for the first time, the intent of the software should be obvious.

The one on the left would communicate more what the software does.

This seems obvious enough from a Philosophical standpoint but Software Engineering should not be Dogmatic. So let's focus on more practical things. Going about it would take hours so I'd like to mention only one thing.

I hate Scrolling!

If we group components that are used together in the same package/directory, it is very easy to navigate when making changes to multiple files because they're all in one directory.

What about Styles?

Surely this is not the status quo in front-end applications. Not just web, but also native mobile apps have a separate folder for styles and other resources. It has been that way ever since I can remember. I personally believe that styles should be near the components that uses them, but it is not productive to challenge every established standard, so at some level we have to conform. This sucks, I know.

Fortunately, Angular 2 styleguide suggests a project structure that promotes creating cohesive components.

Angular is one of the most reputable frontend frameworks and is a very opinionated one at that, so this approach to software should catch on. We still have a long way. But as far as I'm concerned, this is a win!