CSS architecture and organization for portal sites and large Web sites

For large portals, mass information platform and multiple modules, multi-regional sites, more need to standardize the css,xhtml, semantic HTML framework, reusable CSS code, these can protect your site, with a good "foundation."

Part I: about building the CSS framework we want to achieve the purpose of:

1. Implementation of standardization, with mainstream platform adaptability front-end implementation;
2. Rapid development, after the site style is determined, the front-end should not become the whole project bottleneck;
3. Refactoring requirements, Make class and block styles reusable as much as possible;
4. Separation of structure and performance requirements, adherence to the semantics of the structure of the Convention;
5. A CSS framework that fully conforms to the characteristics of the financial network.
6. Perform the necessary search engine optimization on the code.

Part II: Some conventions about CSS naming:

1. Class names and ID names that do not use uppercase;
2. Use a combination of descriptive English words whenever possible as a class name and ID name;
3.id name and class name of multiple English words between the use of "_" short line separated;
4. Description By Region number Example: main01_div01_ul01 (can be understood as the main area first Div under the first ul)

down we want to the entire site and design manuscript analysis, to do with their own portal structure characteristics of the CSS framework. We take Sina as an example of site structure analysis, the entire page is divided into: Home page, more pages, content page, feature page, data center, News Center, channel page, advertising ...

We organize these pages to discover their common parts: CSS styles, and areas, and fragmentation of modules. What we need to do is put these public parts forward and we can divide the CSS into the following categories:

Principal style sheet: sjweb.css
Font (font style, font size, collection of colors)
Layout (frame structure collection)
Global ( Global default Style collection)
Component (composing page part style sheet, module fragment collection)
These are all imported into the Sjweb.css body style table, the main style sheet as a loader load new foreign style, such as advertising style sheet.

So that these pages only need to write a little bit of their own special requirements CSS style code.

When building this CSS framework, there are a lot of things that are best to unify, such as line spacing, spacing between modules, and so on.

Rule:

1. Between all area, between modules, and up and down the leftRight: 8 Pixel;
2. News list color #333;
3. News list line spacing pixel;
And so on

Adjust the environment: Ie7,ff,ie6,ie5.x,opera