Modularizing web applications

Question

I was wondering how big companies tend to modularize components on their page. Facebook is a good example:

There\'s a team working on Search that has it

Answer 1

A namespace clashes problem can be avoided by using a naming convention. Additional reading:

• CSS Practice: Pseudo-Namespaces in Complex Projects
• CSS Namespaces Support - Functional and Design Specification

In short: It depends how your system is built, but assuming that everything is composed out of modules, then name your CSS identifiers (or JS IDs etc.) as follows: SiteName-ModuleName-Function.

If you're willing to use your application language (e.g. PHP) to intervene with the CSS/JS code, then an "arbitrary" naming may be used, by assigning each module it's dynamically-generated numeric id and attaching that id to the identifier of the client-side language object. For instance:

# PHP script
class module_articles {
    public function __construct() {
        $this->GUI = new view;
    }
    public function display_articles() {
        // The CSS file is rendered first by the PHP engine and
        // the identifiers name is constructed with the $this->GUI->id property.
        $this->GUI->load_css('path/to/file.css');
    }
}

class view {
    private static $instance_number = 0;
    public $id;

    public function __construct() {
        $this->id = ++ self :: $instance_number;
    }
    public function load_css($path) {
        // $id can also be the CSS file path (slashes replaced with underscore)
        // or the module name itself (e.g. module_articles)
        $id = $this->id;
        include $path;
    }
}

Eventually, the CSS file should be something like this:

/* CSS of module_articles */

author_name { /*...*/ }
article_date { /*...*/ }

Note: The file should be included via PHP's include keyword! Use Output Buffering to output it later.