Question

76

What are your tips for best practice for web application structure?

rated 0 times [ 79] [ 3] / answers: 1 / hits: 21697 / 16 Years ago, thu, february 26, 2009, 12:00:00

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!!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alfredoc

Add To Favorites

Follow

Total Points: 261

Total Questions: 128

Total Answers: 89

Location: French Polynesia

Member since Sun, Aug 2, 2020

4 Years ago

alfredoc questions

1 discord.js - How do i add the TRY MY COMMANDS feature to my bot?

Tue, Aug 23, 22, 00:00, 2 Years ago

1 Cannot assign to read only property (value) of object '#< Object>'

Fri, Jan 14, 22, 00:00, 2 Years ago

1 Horizontal scrolling slider / carousel

Thu, Nov 25, 21, 00:00, 3 Years ago

1 How do i remove the div with id=__next in Next.js

Wed, Aug 4, 21, 00:00, 3 Years ago

1 React @redux/toolkit not re-rendering component when state is updated

Fri, Mar 26, 21, 00:00, 3 Years ago

View All

answered 16 Years ago jamila · Accepted Answer

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.