No need, really, to apologize for what is actually a very good question, and well presented, at that. The compliments could continue, but that would interfere with the science:
Think of practical values. The example on the left gives objects a folder name, and assumes there will be a root file in that folder. It follows that any files that support that folder will be contained, unless, that is, they are global support files, which is moot in terms of explanation; i. e., in a folder on the root, or a file on the root.
The reason I love your left side example is that the url is easy to derive, just link up the directory names in the path:
site root/blog/gems/ # we're assuming a web server in this discourse.
same as,
/blog/gems/
the ending slash always means, index page.
If something is related to a particular subset, then the index page should point to it from that subdir. It follows we wonāt be accepting outside links to those same resources. We keep all interaction within the directory.
If anything, I would want to pay close attention to duplicated storage locations. It is okay to have,
/blog/do-birds-have-wings/
and let the page be āindex.htmlā there is not harm in that. The images for this page can go into a common bin, though. If images are meant to be picked up by the indexer (search engine), keep them all in one images
folder right off the root.
/images/do-birds-have-wings.png
Same goes for local.css, but you havenāt given it a folder and as long it loads last it will be at the bottom of the cascade (where it belongs). If there are a lot of common selector rules, think about having a āblog.cssā file in the css folder off the root:
/css/blog.css
Then you only need a local sheet for the odd occasion. For example, say you want a different skin graphic on this page. Easy. Put the file right in the local folder and have the local.css override the URL for that skin graphic selector rule in the blog.css sheet. Itās lower in the cascade so easy-peasy.
Letās say that all the pages off the root have this line:
<link rel="stylesheet" href="/css/main.css">
Now lets look at the Blog:
<link rel="stylesheet" href="/css/blog.css">
But what about the āmain.cssā file? Should it be a separate link above this one? Yes, to maintain the cascade, but, it can also be imported by the blog.css:
@import main.css
That would be the very top line of the blog.css file. It still puts the sheet at the top of the cascade, above the blog.css, and it doesnāt require an additional link in the index.html page for /blog/.
We can follow this path logic right down to our local.css:
<link rel="stylesheet" href="local.css">
and give that CSS file this import line:
@import /css/blog.css
Notice we need the path from the root since weāre not in that folder like the other two CSS files.
If Iām going on, itās because this all makes sense to me. What are your feelings on this?