Web portal Building CSS Framework rules _ Experience Exchange

Part I: about building a CSS framework what we want to accomplish:

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

Part Two: Some conventions about CSS naming:

1. Do not use the class name and ID name in uppercase;
2. Use a descriptive combination of English words as the class name and ID name whenever possible;
3.id names and class names are separated by a "_" dash between multiple English words;
4. Description By Region number Example: main01_div01_ul01 (can be understood as the first UL under the first div of the main area)

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

We have Sina network as an example:

Perform site structure analysis:

The entire page is divided into: Home page, more pages, content pages, featured pages, data centers, news centers, channel pages, ads ...

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

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

Main style sheet: sjweb.css
Fonts (collection of font style, size, color)
Layout (frame structure collection)
Global (globally default style collection)
Component (Composition 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 ad style sheets.
So these pages only need to write a little bit of their own special requirements of the CSS style code on it.

In the construction of this CSS framework, there are many details of the best can be unified, such as: line spacing, the distance between modules and so on.

The following is the first page of a portal network structure diagram:

Rules:
1. All area between, between modules, the spacing up and down 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 is you in the construction of the time of the details of the problem, well, not much to say. Oh

