您对Web应用程序结构的最佳实践有哪些提示？

我在工作中做了很多自定义应用程序.我正在尝试为新应用程序定义一些标准.有点像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

此外,欢迎任何其他提示.谢谢!!

我是否应该为整个网站提供一个基本样式表,并为每个单独的页面设置一个用于自定义？

务实.如果您没有足够的规则可以将它们全部组织在一个文件中并且保留对什么做什么的监督,那么这样做.如果您有大量规则仅适用于您网站中的某些部分或单个页面,请务必将其分解为各自的子样式表,但不要觉得需要为每个页面创建单独的样式表即使它只包含两个规则.将特定于页面的类或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

对于我来说,将"数据"保存在"系统"中的应用程序的单独位置(具有单独的权限)非常重要.您需要能够换出'system'文件夹来升级应用程序,而不必担心在htdocs/img中有上传的图像你必须担心保留.

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]