Grouping resource files by their extension is very trivial:

src/main/webapp
	/css
		product.css
		order.css
	/img
		product-icon.png
		product-selected.png
		order-icon.png
		order-packaged.png
		order-shipped.png
	/js
		product-effects.js
		order-effects.js

But why repeat what we already know from the file name? Use directory name to tell something about your business:

src/main/webapp
	/product
		product.css
		product-icon.png
		product-selected.png
		product-effects.js
	/order
		order.css
		order-icon.png
		order-packaged.png
		order-shipped.png
		order-effects.js

Imagine a bookstore, where owner arranged books on shelves by color of their covers. This arrangement was easy to do and in a way is logical, but does it help the customers? Grouping by subject is more beneficial to bookstore customers, they can find a specific book about the subject they are interested in.

In our world the files that are changed together, should go together. And usually we work on vertical slices of the system, like the look and feel of product page, or the behaviour of the order form.

W. Gdela