对于 Web 应用程序结构的最佳实践，您有什么建议？ [关闭]

Question

我在工作中做了很多自定义应用程序。我正在尝试为新应用程序定义一些标准。有点像 Elements。

CSS：您如何组织样式表？我是否应该为整个站点创建一个基本样式表，为每个单独的页面创建一个用于自定义的样式表？我应该有另一个打印样式吗？我听说链接更多文件需要更多时间让浏览器检索它们。 （每页有更多对象...还有很多 javascript 文件或图像的问题）... 多少是太多？你是否大量评论你的 CSS？提供任何嵌套结构？在元素中按字母顺序排列？我需要重置吗？进口呢？排版呢？

Javascript：基本上是同一个问题。 Javascript 文件...我应该包含一个或两个不错的库（例如 JQuery 和 Prototype），然后为每个页面包含另一个库吗？现在我突然包含了 5 或 6 个 CSS 和 JS 文件...

目录结构：您如何组织网站？目前，我使用类似

/CSS          ... For CSS files
/JS           ... For javascript files
/INC          ... For private code includes
/ASSETS/IMG   ... For images
/ASSETS/AU    ... For audio
/ASSETS/SWF   ... For Flash

此外，欢迎提供任何其他提示。谢谢！！

Answer 1

我总是尽量避免浏览器加载和解释未在相关 HTML 上使用的 CSS 规则和 JS 代码。我同意@bobince 的观点，您应该仅在组织需要时将页面的样式和脚本拆分为单独的文件，但如果您的网站非常大，您将达到这一点。

但是，由于我只构建基于模板的网站，我开始怀疑我为什么要链接到外部文件。例如，如果我有一个基本模板，那么我放在该模板头部的内容将应用于我网站上的所有页面。那么为什么不把我的样式和脚本放在那里呢？

我想到了两个原因。首先，浏览器可以缓存外部文件并在包含它的每个页面上重用它，而无需重新加载它。第二个设计师可能不喜欢在你的模板中四处乱逛，因为他们在处理普通的 CSS 文件。

这对于适用于您网站中每个页面的全局样式来说都很好，但是对于那些具有某些在其他任何地方都没有共享的样式的一次性页面呢？如果您将此样式添加到全局应用的外部文件中，您会增加站点的初始加载时间，只是为了拥有一种仅在一个页面上使用的样式。此外，当您几个月后返回该文件时，您可能已经忘记了这些规则的用途。

我建议，每一页上没有表达的任何样式规则都应该放在子模板中的<style>标签中，该子模板呈现规则适用的HTML。这会将负载和复杂性从全局样式表转移到需要样式的实际页面，并提供规则上下文以便将来可以维护它们。如果这让你的设计师感到害怕，他们无论如何都不需要编写 CSS。只是告诉他们坚持使用 Photoshop，让你做大事。

Answer 2

CSS：我只使用一个样式表。我只是继续附加到底部。我通常在每个特定于页面的规则集之前添加评论。如果我需要编辑某些内容，请按 Ctrl+F。

Javascript： 通常只包含一个库，也可能包含几个插件。用于将任何特定于页面的 JS 直接扔到该页面的标题中，但我觉得它有点难看，并且将“行为”与数据混合在一起。所以我开始了一个新的范式——

MVCB——模型、视图、控制器、行为。 MVC 非常适合具有相当静态 UI 的桌面应用程序，但是当您添加大量 JS 时，我认为它需要额外的抽象层。

因此，我的原始文件结构：

index.php
app
    config
        bootstrap.php               -- code that needs to run before anything else, or functions that don't really fit elsewhere
        core.php                    -- timezone, database, and misc settings
        routes.php                  -- default routes
    layouts                         -- layout/template files
        flash                       -- layouts for one-time popup messages
    objects                         -- all files are stored in the same folder as the controller to keep directories
                                            smaller and ease reusability
        object
            controller.php
            model.php
            routes.php              -- object-specific routes to override default routes
            behaviours              -- page-specific javascript files
                action.js           -- included automatically on that page if this file exists
            views
                action.php          -- the view for this action
    public                          -- static media files, sometimes called "assets"
        favicon.ico
        xrds.xml
        css
        img
        js
        uploads         
core
    app.php                         -- initializes stuff
    controller.php                  -- default controller
    dispatcher.php                  -- includes everything and calls all the appropriate functions
    model.php                       -- default model that all other models inherit from
    components                      -- helper functions to used in controllers
    datasources                     -- mysql, oracle, flat-file...
    helpers                         -- functions to be used in views and layouts
    structures                      -- model helpers such as tree or polymorphic behaviours
    utils                           -- functions that are useful everywhere
libs                                -- 3rd party libs

.htaccess

Options -Indexes 

RewriteEngine On

RewriteCond %{REQUEST_URI} !^/app/public/
RewriteCond %{DOCUMENT_ROOT}/app/public%{REQUEST_URI} -f
RewriteRule .* /app/public/$0 [L]

RewriteCond %{REQUEST_URI} !^/app/objects/
RewriteRule ^([^/]+)/(.+\.js)$ /app/objects/$1/behaviours/$2 [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* /index.php?url=$0 [L,QSA]

Answer 3

请确保您不要在文件夹中使用大写字母。当你在 windows 上开发并在 linux 服务器上部署时，它可能会咬你。

Answer 4

我是否应该为整个网站创建一个基本样式表，并为每个单独的页面创建一个用于自定义的样式表？

务实。如果您的规则足够少，您可以将它们全部组织在一个文件中并保留对做什么的监督，那么就这样做。如果您有大量仅适用于站点中某些部分或单个页面的规则，请务必将它们分解为自己的子样式表，但不需要为每个页面创建单独的样式表即使它只包含两个规则。向

添加特定于页面的类或 id，以便您可以根据需要从共享样式表中挑选出单个页面。

将样式分离到样式表中是为了您作为作者的利益，所以请做您认为最容易管理的事情。对于一个可能有多个 CSS 文件但不会有几十个的复杂网站。

我应该有另一个打印样式吗？

通常是的。虽然您可以使用 @media 规则将打印样式嵌入到另一个样式表中，但这在传统上是有问题的，因此将媒体放在 标记中通常是最简单的。在任何情况下，打印样式表通常与它们的屏幕对应物如此不同，因此将它们的规则分开是有意义的。

我听说链接更多文件需要更多时间让浏览器检索它们。

是的，但这种效果往往被夸大了。 HTTP/1.1 通过保持客户端和服务器之间的连接活动来减少每个请求的延迟，这是一个强有力的缓解措施。

多少算太多？

你几乎不可能拥有这么多样式表。如果您使用的框架要求每个类有一个脚本文件，那么脚本可能会成为问题，但其他情况通常都可以。大量小图像更容易出现问题。

您是否对您的 CSS 进行大量评论？

简单的评论通常就足够了。 CSS 的声明式规则样式通常不会变得复杂到需要代码可以要求的深入解释。但特别是，记录任何违反直觉的东西，例如特定于浏览器的黑客攻击。

在元素内按字母顺序排列？

除非这能让您更容易管理，否则不会。通常不会，您会尝试将相似的规则分组，或将规则应用于相似的元素组。

我需要重置吗？

完全重置？如果您知道自己在做什么并且可以选择要重置的特定有问题的默认值，则不会。

我应该包含一两个不错的库（例如 JQuery 和 Prototype）

除非万不得已，否则不要包含多个框架。

然后每个页面都包含另一个？

如果每个页面都有特定的自定义行为，您可以。但这通常不会发生。如果您制作绑定到例如的渐进增强行为脚本。类名，您可以在每个使用它的页面上包含每个行为的脚本，然后让它自动找到要绑定的元素。

目录结构：您如何组织网站？

就我个人而言，对于我的 Python/WSGI 应用程序：

appfolder
    application.py       - main WSGI entry point and control/configuration script
    data                 - run-time writable application file store
        private          - files not available through the web server
        public           - mounted as a virtual directory on the web server
    logs                 - access, error, application log files
    system               - all the static application code and data
        htdocs           - web server root folder
            file         - static servable files
            img          - static images
            script       - JavaScript
            style        - CSS
        lib              - Python modules used by site
            appmodule    - main application code package
        templates        - HTML page templates
            mail         - mail text templates

将“数据”保存在“系统”中的应用程序的单独位置（具有单独的权限）对我来说很重要。您需要能够换出“系统”文件夹来升级应用程序，而不必担心 htdocs/img 中有上传的图像您必须担心保留。

Answer 5

我已经在另一个线程中发布了我的目录结构和 cmets，但它也适用于这里！

我使用以下设置已经有一段时间了，效果很好：

• /site：这是我实际工作网站所在的位置。创建模板后，我将在此目录中安装我的 CMS 或平台。

  • .htaccess （我通常会发现自己启用的基本调整）
  • robots.txt （所以我以后不要忘记禁止 /admin 之类的项目）

• /source：包含任何文件、注释、文档、规范等。

• /templates：从这里开始！创建最终需要移植到 /site 的 CMS 或框架中的所有静态模板。

  • /_行为
    • global.js （特定于站点的代码；可以根据需要分解为多个文件）

  • /_media：图片、可下载文件等。根据需要进行整理

  • /_style：我更喜欢模块化 CSS 开发，所以我通常会为网站的每个独特部分制作许多样式表。使用Blender 大大清理了这个 - 我强烈推荐这个工具！

    • print.css （这最终会被混合，所以使用@media print）
    • reset.css (Eric Meyer's)
    • screen.css （用于@media 屏幕，手持）
    • 必要时添加其他模块

  • /_vendor：所有 3rd 方代码（jQuery、shadowbox 等）

  • Blendfile.yaml （用于 Blender；见上文）

  • template.html （基本起始模板；可以为每个唯一模板复制和重命名）

• /tests: Selenium 单元测试

Answer 6

尽力拥有一个样式表。为单个页面链接单个样式表违背了目的。

您可以通过在表单顶部包含以下几行来继承 CSS 中的其他样式表

@import url('blueprint/screen.css');
@import url('blueprint/styles.css');

在这种情况下，我将继承蓝图 css 样式，然后在其下方添加我的自定义样式。

就 JS 库而言，我更喜欢链接 3 个文件。

图书馆， 一页包含所有插件， 最后是页面代码。

对于目录结构我一般有以下几种：

/_css /_图片 /_脚本 文件

但最近我开始将所有用于使网站看起来/以我想要的方式工作的东西放在 /_presentation 目录中......然后任何其他的东西，比如博客文章的图片等都会放在 /images 中

希望这会有所帮助。