24

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

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

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

4

6 回答 6

23

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

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

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

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

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

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

是的，但这种影响往往被夸大了。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 中有上传的图像，您必须担心保留。

于 2009-02-26T17:05:48.030 回答
8

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]
于 2009-07-22T06:34:50.117 回答
3

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

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

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

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

  • /source: 包含任何comps、notes、documents、specifications等。

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

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

    • /_media：图像、可下载文件等。根据需要进行组织

    • /_style：我更喜欢模块化 CSS 开发，因此我通常会为网站的每个独特部分制作许多样式表。Blender可以很好地清理这个问题 - 我强烈推荐这个工具！

      • print.css （最终会被混合，所以使用@media print）
      • reset.css （埃里克迈耶的）
      • screen.css （用于@media screen，手持）
      • 必要时附加模块

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

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

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

  • /tests：硒单元测试

于 2009-02-26T17:11:25.580 回答
3

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

于 2009-07-22T06:15:46.177 回答
1

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

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

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

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

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

库，包含所有插件的一页，最后是页面代码。

对于目录结构，我通常有以下内容：

/_css /_images /_scripts 文件

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

希望这可以帮助。

于 2009-02-26T16:51:56.470 回答
0

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

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

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

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

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

于 2009-02-26T21:15:57.040 回答