Rules for building CSS frameworks for portal sites _ Experience Exchange

Part I: About building the CSS framework we want to achieve:

1. To achieve standardization, with the 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 the requirements, as far as possible to make class and block style reusable;
4. Separation of structure and performance requirements, adherence to the semantics of the structure of the Agreement;
5. A CSS framework that fully conforms to the characteristics of the financial network.
6. To the code to carry out the necessary search engine optimization.

Part II: Some conventions on the naming of CSS:

1. Do not use uppercase form of class name and ID name;
2. Use a combination of descriptive English words whenever possible as a class name and ID name;
3.id name and class name of a number of English words between the use of "_" short horizontal separation;
4. According to the area of the description number example: MAIN01_DIV01_UL01 (can be understood as the first area of the main div under the first ul)

We want to analyze the entire website and design manuscript, to do the CSS framework that conforms to our own portal structure.

We have Sina as an example:

Conduct site Structure analysis:

The whole page is divided into: Home page, more pages, content page, feature page, data center, News Center, channel page, advertising ...

We sorted these pages to find their public parts, where they were found: CSS styles, and areas, fragments of modules, and what we need to do is put these public parts forward.

After observation we can divide the CSS into the following categories:

Body style sheet: sjweb.css
fonts (font style, size, collection of colors)
Layout (frame structure collection)
Global (globally default style collection)
Component (composed of page part style sheet, module fragment collection)
These are all imported into the SJWEB.CSS main style table, the main style sheet as a loader load new foreign style,
such as the advertising style sheet.
So these pages only need to write a little bit of their own special requirements of CSS style code can be.

In building this CSS framework, there are a lot of details of the best to unify, such as: line spacing, distance between modules and so on.

The following is a portal page structure chart:

Rules:
1. Between all area, between modules, the spacing is: 8 Pixel;
2. News list color #333;
3. News list line spacing pixel;
...... Wait a minute

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

PS: In fact, more of you in the construction of the time the details of the problem, well no more said. Oh