css – 您的Web应用程序结构最佳实践的提示是什么?

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

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

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

解决方法

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

务实如果你有足够的规则,你可以将它们全部组织在一个文件中,并保持对什么是做什么的监督。如果您有大量规则仅适用于您网站中的某些部分或单个页面,一切方式将其分解为自己的子样式表,但不需要为每个页面创建单独的样式表即使它只包含两个规则。将页面特定的类或ID添加到< body>所以您可以从共享样式表中选择单个页面

将样式分离为样式表是为了您作为作者的利益,所以您最容易管理的是什么。对于一个复杂的网站,可能不止一个CSS文件,但它不会是几十个。

Should I have another for print styles?

一般是的虽然您可以使用@media规则将打印样式嵌入到另一个样式表中,但这通常是错误的,因此将媒体放在< link>标签通常最简单。在任何情况下,打印样式表通常与屏幕对应方不同,只是将其规则分开。

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

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

How many is is too many?

足够你很少有这么多样式表。如果您使用的类型框架需要每个类的一个脚本文件,脚本可能是一个问题,否则通常可以。对于许多小图像来说,这是更常见的问题。

Do you heavily comment your CSS?

评论通常应该足够了。 CSS的声明性规则样式通常不会变得足够复杂,需要深入解释代码可以要求。特别是,记录任何违反直觉的浏览器特定的黑客。

Alphabetize within elements?

除非这样才能使您更容易管理。通常不会,您会尝试将类似的规则或规则应用于类似的元素组。

Do I need a reset?

完全复位?如果您知道自己在做什么,并且可以选择要重置的特定问题的认值,那么它就不会。

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

不要包含多个框架,除非你绝对必须。

and then have another included for each page?

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

Directory Structure: How do you organize a site?

就个人而言,对于我的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中上传的图像不必担心保留。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效