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?
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...
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!!
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.
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.
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.
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.
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?
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.
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)
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:
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.
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.
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 --
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.
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/$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]
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)
- /_behavior
/tests: Selenium unit tests
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.
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
@import url('blueprint/screen.css');
@import url('blueprint/styles.css');
in this case I'm inheriting the blueprint css styles then adding my custom styles below that.
In terms of JS libraries I prefer to link 3 files.
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
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
Hope this helps.
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.
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.
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 page should 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.
来源：https://stackoverflow.com/questions/591328/what-are-your-tips-for-best-practice-for-web-application-structure