CSS 您对 Web 应用程序结构的最佳实践有何建议？

Question

提问by

I do a lot of custom applications at work. I'm trying to define some standards for new applications. Something a little like Elements.

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

CSS: How do you organize the style sheets? Should I have one base style sheet for the whole site and one for each individual page for customizations? Should I have another for print styles? I've heard that linking more files takes more time for the browser to retrieve them. (More objects per page...also a problem with lots of javascript files or images) ... How many is is too many? Do you heavily comment your CSS? Provide any nested structure? Alphabetize within elements? Do I need a reset? What about imports? And typography?

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

Javascript: Basically the same question. Javascript files...Should I include one or two nice libraries (JQuery and Prototype, for example) and then have another included for each page? Now I'm suddenly including 5 or 6 CSS and JS files...

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

Directory Structure: How do you organize a site? Currently, I use something like

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

/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

Also, any other tips would be welcome. Thanks!!

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

Answer 1

采纳答案by bobince

Should I have one base style sheet for the whole site and one for each individual page for customizations?

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

Be pragmatic. If you have few enough rules that you can organise them all in one file and retain an oversight of what does what, do that. If you have a significant number of rules that only apply to certain sections or individual pages in your site, by all means break them out into their own sub-stylesheets, but don't feel the need to create a separate stylesheet for every single page even when it only contains two rules. Add a page-specific class or id to <body> so you can pick out single pages from a shared stylesheet should you need to.

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

The separation of styles into stylesheets is for your benefit as an author, so do what you find easiest to manage. For a complicated site that'll probably be more than one CSS file, but it's not going to be dozens.

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

Should I have another for print styles?

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

Generally yes. Whilst you can embed print styles inside another stylesheet using an @media rule, this has traditionally been buggy, so putting the media in the <link> tag is usually easiest. In any case print stylesheets are often so different from their screen counterparts that it just makes sense to keep their rules separate.

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

I've heard that linking more files takes more time for the browser to retrieve them.

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

Yes, but this effect is often overstated. HTTP/1.1 reduces the per-request latency by keeping connections between the client and server alive, which is a strong mitigation.

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

How many is is too many?

多少是太多？

Enough that you're extremely unlikely to have that many stylesheets. Scripts can be a problem if you're using the kind of framework that demands one script file per class, but otherwise are generally OK. It's more commonly problematic with lots of small images.

足够了，您极不可能拥有那么多样式表。如果您使用的框架要求每个类有一个脚本文件，则脚本可能会成为一个问题，否则通常没问题。很多小图像更容易出现问题。

Do you heavily comment your CSS?

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

Light commenting usually should be enough. CSS's declarative rule style doesn't usually get complicated enough to need the in-depth explanations code can demand. In particular though, document anything counterintuitive like browser-specific hacks.

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

Alphabetize within elements?

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

Not unless that makes it easier for you to manage. Usually it wouldn't, you'd try to group similar rules, or rules applying to similar groups of elements.

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

Do I need a reset?

我需要重置吗？

A full reset? Not if you know what you're doing and can select the particular problematic defaults you want to reset.

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

Should I include one or two nice libraries (JQuery and Prototype, for example)

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

Don't include more than one framework unless you absolutely have to.

除非绝对必要，否则不要包含多个框架。

and then have another included for each page?

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

If each page has particular custom behaviour you could. But that doesn't usually happen. If you make progressive-enhancement behaviour scripts that bind to eg. class names, you can include the script for each behaviour on each page that uses it, then let it find the elements to bind to automatically.

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

Directory Structure: How do you organize a site?

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

Personally, for my Python/WSGI applications:

就我个人而言，对于我的 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

It's important for me to keep the ‘data' in a separate place (with separate permissions) to the application in ‘system'. You need to be able to swap out the ‘system' folder to upgrade the application, without having to worry that there are uploaded images in htdocs/img you have to worry about keeping.

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

Answer 2

回答by mpen

CSS:I only use one stylesheet. I just keep appending to the bottom as I go along. I usually place a comment before each page-specific set of rules. Ctrl+F if I need to edit something.

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

Javascript:Usually include only one library, and maybe a few plugins. Used to throw any page-specific JS directly into the header of that page, but I find it a bit ugly and mixes 'behaviour' with data. So I'm starting a new paradigm --

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

MVCB-- Model, View, Controller, Behaviour. MVC is great for desktop apps with rather static UIs, but when you add lots of JS I think it calls for an extra layer of abstraction.

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

Thus, my original file structure:

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

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/@import url('blueprint/screen.css');
@import url('blueprint/styles.css');
 [L]

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

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

Answer 3

回答by cherouvim

Just make sure you don't use capital letters for folders. It may bite you when you develop on windows and deploy on a linux server.

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

Answer 4

回答by Mark Hurd

I have posted my directory structure and comments in another thread, but it is applicable here too!

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

I have been using the following setup for a while now with great results:

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

/site: This is where my actual working website will live. I'll install my CMS or platform in this directory after the templates are created.
- .htaccess (basic tweaks I usually find myself enabling anyway)
- robots.txt (so I don't forget to disallow items like /admin later)
/source: Contains any comps, notes, documents, specifications, etc.
/templates: Start here! Create all static templates that will eventually need to be ported into the CMS or framework of /site.
- /_behavior
  - global.js (site-specific code; may be broken out into multiple files as needed)
- /_media: Images, downloadable files, etc. Organized as necessary
- /_style: I prefer modular CSS development so I normally end up with many stylesheet for each unique section of the website. This is cleaned up greatly with Blender- I highly recommend this tool!
  - print.css (this eventually gets blended, so use @media print)
  - reset.css (Eric Meyer's)
  - screen.css (for @media screen, handheld)
  - additional modules as necessary
- /_vendor: all 3rd party code (jQuery, shadowbox, etc.)
- Blendfile.yaml (for Blender; see above)
- template.html (basic starting template; can be copied and renamed for each unique template)
/tests: Seleniumunit tests

/site：这是我实际工作的网站所在的位置。创建模板后，我将在此目录中安装我的 CMS 或平台。
- .htaccess （我通常发现自己启用的基本调整）
- robots.txt （所以我不会忘记稍后禁止诸如 /admin 之类的项目）
/source：包含任何合成、注释、文档、规范等。
/模板：从这里开始！创建最终需要移植到 /site 的 CMS 或框架中的所有静态模板。
- /_行为
  - global.js （特定于站点的代码；可以根据需要分解成多个文件）
- /_media：图像、可下载文件等。根据需要进行组织
- /_style：我更喜欢模块化的 CSS 开发，所以我通常会为网站的每个独特部分制作许多样式表。这已经用Blender大大清理了- 我强烈推荐这个工具！
  - print.css （这最终会被混合，所以使用@media print）
  - reset.css （埃里克迈耶的）
  - screen.css （用于@media 屏幕，手持设备）
  - 必要时附加模块
- /_vendor：所有 3rd 方代码（jQuery、shadowbox 等）
- Blendfile.yaml （用于 Blender；见上文）
- template.html （基本起始模板；可以为每个唯一模板复制和重命名）
/tests：硒单元测试

Answer 5

回答by Birk

Do your best to have one style sheet. Linking individual style sheets for individual pages defeats the purpose.

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

You can inherit other stylesheets in your css by including the following lines at the top of the sheet

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

##代码##

in this case I'm inheriting the blueprint css styles then adding my custom styles below that.

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

In terms of JS libraries I prefer to link 3 files.

在 JS 库方面，我更喜欢链接 3 个文件。

The Library, one page with all of the plugins, and finally the page code.

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

For directory structure I generally have the following:

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

/_css /_images /_scripts files

/_css /_images /_scripts 文件

but recently I've began to put everything used to make the site look/work the way I want it to in a /_presentation directory... then anything additional like images for blog posts etc would go in /images

但最近我开始把所有用来使网站看起来/工作的东西按照我想要的方式放在 /_presentation 目录中......

Hope this helps.

希望这可以帮助。

Answer 6

回答by Jesse Hattabaugh

I always try to keep the browser from having to load and interpret CSS rules and JS code that isn't used on the HTML in question. I agree with @bobince that you should only break a page's styles and scripts into a separate file if it's necessary for organization, but if your site is very big at all, you will reach that point.

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

However since I only build template based sites, I am beginning to wonder why I link to external files at all. For example, if I have a base template the things I put in the head of that template will be applied to all the pages on my site. So why not just put my styles and scripts there?

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

Two reasons come to mind. First the browser can cache the external file and reuse it on every page that includes it without having to load it all over again. Second designers might not be as comfortable poking around in your templates as they are messing with plain CSS files.

想到两个原因。首先，浏览器可以缓存外部文件并在包含它的每个页面上重用它，而不必重新加载它。第二位设计师可能不会像在处理简单的 CSS 文件那样轻松地在您的模板中闲逛。

That's all well and good for global styles that apply to every single page in your site, but what about those one-off pages that have some style that isn't shared anywhere else? If you added this style to a globally applied external file you'd increase the initial load time of your site just to have a style that is only used on one page. Further, when you go back to that file months later you will likely have forgotten what those rules were even for.

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

I suggest that any style rule that is not expressed on every single pageshould be placed in <style>tags within the sub-template that renders the HTML the rule applies to. This will move the load and complexity from the global stylesheet to the actual page where the styles are needed, and give the rules context so that they can be maintained in the future. If this scares your designer they don't need to be writing CSS anyway. Just tell them to stick to Photoshop and let you do the big-boy work.

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

CSS 您对 Web 应用程序结构的最佳实践有何建议？

提问by

采纳答案by bobince

回答by mpen

回答by cherouvim

回答by Mark Hurd

回答by Birk

回答by Jesse Hattabaugh

相关推荐

最近更新

标签

CSS 您对 Web 应用程序结构的最佳实践有何建议？

提问by

采纳答案by bobince

回答by mpen

回答by cherouvim

回答by Mark Hurd

回答by Birk

回答by Jesse Hattabaugh

相关推荐

如何在 IE6 CSS 中设置 <input type="text"> 的样式？

CSS IE8 修复了背景大小属性？视网膜图像

jQuery UI 日期选择器 css

CSS 中 float 和 align 属性的区别

相关推荐

最近更新

标签