如何组织我的网页内容？
组织网页内容最常见的方式是什么，即 HTML、JS 和 CSS？
我通常为小项目这样做：
- index.html
- style.css
- script.js
我认为这是相当标准的。但是，对于具有多个 HTML/JS 文件的项目，如何做到这一点呢？我的做法是：
- index.html
- foobar.html
- style.css
- js
- core.js
- foobar.js
这是一种常见的做法吗？即使只有一个文件，我是否应该将 CSS 移至单独的“css”目录？这个中央 CSS 文件通常是如何调用的？ “style.css”或“base.css”还是其他什么？将 HTML 文件移动到单独的目录是否很常见？
What is the most common way to organise web content, i.e. HTML, JS and CSS?
I'm usually doing this for small projects:
- index.html
- style.css
- script.js
I think this is fairly standard. But how do you do it for projects with more than one HTML/JS file? My approach is:
- index.html
- foobar.html
- style.css
- js
- core.js
- foobar.js
Is this a common way of doing it? Should I move CSS to a separate "css" directory even if there's only one file? How is this central CSS file usually called? "style.css" or "base.css" or something else? Is it common to move HTML files to a separate directory?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
这很大程度上是一个品味问题。
然而，将所有 js/css 和静态图像放入一个文件夹（例如 /static 或 /media）中是很常见的。例如/media/css/style.css。这里的要点是，您经常使用应用程序服务器（Ruby on Rails、Django）开发动态页面，并希望使用轻量级 Web 服务器（如 nginx）提供静态内容。
您可能需要查看http://html5boilerplate.com/，其中包含大多数当前的最佳实践。
That's pretty much a matter of taste.
However it's pretty common to put all your js/css and static images into a single folder like /static or /media. So for example /media/css/style.css. The point here is that you'll often develop dynamic pages using a application server (Ruby on Rails, Django) and want to serve the static content using a light weighted webserver like nginx.
You may want to have a look at http://html5boilerplate.com/ which contains most of the current best practises.
我这样做：
I do this:
我喜欢 Rails 的组织。为用户提供的公共静态文件位于
/public下。然后 JavaScript 和 CSS 文件分别存储在public/javascripts和public/stylesheets下。静态html文件存储在/public下。至于中心 CSS 文件名，这实际上是您的偏好。您可以根据您的网站对其进行命名（例如 twitter.css），也可以将其命名为通用名称，例如 base.css、all.css。 我会将您的 html 保存在
public文件夹下，但您也可以创建一个
public/html文件夹。I'm fond of Rails' organization. Public static files that are served to users are under
/public. Then JavaScript and CSS files are stored underpublic/javascriptsandpublic/stylesheetsrespectively. Static html files are stored under/public.As for the central CSS file name, it's really your preference. You could name it after your website (e.g. twitter.css), or you can name it something general like base.css, all.css. etc.
I would keep your html under the
publicfolder, but you can create apublic/htmlfolder as well.我建议你将：images移动到其他目录（当然），css如果有多个文件移动到其他目录，js如果有多个文件移动到其他目录。请记住，文件的名称是最重要的事情之一。不要调用诸如
style1或style2之类的样式（如果不止一个），而是调用它们之间的差异、简短规范，例如light_gray.css或 <代码>dark_black.css。如果您使用更大的 js 脚本，则与脚本相同，将它们添加到单独的目录中。I suggest you to move: images into other directory (of course), css if have more than one file into other directory, js if more than one file into other directory. And remember that name of the files are one of the most important things. don't call styles (if more than one) like
style1orstyle2but the diffrences between them, short specifications likelight_gray.cssordark_black.css. Same with scripts if you are using bigger js scripts add them into separate directory.我遇到的最常见的结构是：
这就是在 Rails 和许多其他框架中通常完成的方式。
随着您的项目扩展，您可能会拥有多个样式表/脚本，因此将内容放入文件夹中开始可以节省以后的时间/精力。
The most common structure I come across is:
This is how it's generally done in rails and a number of other frameworks.
As your project expands it's likely you're going to have multiple stylesheets / scripts so putting things in folders to start with will save time / effort later.
在大型项目中，您可以区分静态文件和动态文件，即像 PHP 一样解析和执行的文件，以及按原样发送到客户端的文件。许多 PHP 框架建议采用以下变体：
这种方法有几个好处。首先，不要将用户上传的内容与样式表混淆。然后，您可以轻松配置 Web 服务器以发送适当的过期和缓存标头，其中包含在
static和assets中找到的内容。lib文件夹以某种方式禁止客户端使用，因此您不会向客户端发送代码，这仅用于嵌入。然而，归根结底，这是你喜欢什么和需要什么的问题。
In large projects you differentiate between static and dynamic files, that is, files, that are parsed and executed like PHP and files, that are sent to the client as they are. Many PHP frameworks suggest a variation of the following:
This approach has several benefits. First, you don't mix up user uploads with your stylesheets. Then, you can easily configure your web server to send appropriate expire and Caching headers with stuff found in
staticansassets.The
libfolder is forbidden for clients in some way, so you don't send code to the client, that is only for embedding.After all, however, it's a matter of what you like and what you need.
ASP.NET Webforms 的默认值为
index.html和foobar.html与根目录中的公共文件一起使用。然后在其下有Scripts和Styles目录。如果您有受限文件，这些文件将位于Account目录中。我并不是说这是最好的方法，但这是微软方面常用的方法。The default for ASP.NET webforms is
index.htmlandfoobar.htmlgo with public files in the root dir. Then there areScriptsandStylesdirectories under that. If you have restricted files those go in anAccountdirectory. I am not saying this is the best way, but it is a common way to do it on the Microsoft side.