Rules for building CSS framework for portal websites_Experience exchange

Part 1: What we want to achieve when building a CSS framework:

1. Implement standardization and front-end implementation with adaptability to mainstream platforms;
2. Rapid development. After the site style is determined, the front-end should not become the bottleneck of the entire project;
3. Requirements for reconstruction, Make classes and block styles reusable as much as possible;
4. Separate structure and performance requirements, comply with the conventions of semantic structure;
5. Build a CSS framework that fully conforms to the characteristics of the financial network.
6. Perform necessary search engine optimization on the code.

Part 2: Some conventions about CSS naming:

1. Do not use uppercase class names and id names;
2. Try to use a combination of descriptive English words as class names and id names;
3. Multiple English versions of id names and class names Use "_" dashes to separate words;
4. Describe by area Number example: main01_div01_ul01 (can be understood as the first UL under the first DIV of the first area of ​​the body)

Next we need to analyze the entire website and design draft to create a CSS framework that fits the characteristics of our own portal structure

We have taken Sina.com as an example:

Perform site structure analysis:

The entire page is divided into: homepage, more pages, content page, topic page, data center, news center, channel page, advertisement...

We organize these pages to find their common parts. These are found in: CSS styles, regions, and module fragments. What we need to do is to extract these common parts.

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

Main body style sheet: sjweb.css
font (set of font style, font size, color)
layout (frame structure set)
global (global default style set)
component (component page Partial style sheets, module fragment collections)
These are all imported into the sjweb.css main style sheet. The main style sheet acts as a loader to load new external styles,
such as advertising style sheets.
In this way, these pages only need to write a little CSS style code that belongs to their own special requirements.

When building this CSS framework, it is best to unify many details, such as line spacing, spacing between modules, etc.

The following is the homepage structure diagram of a certain portal:

A>

Rules:
1. Between all areas, between modules, the spacing between top, bottom, left and right is: 8 pixels;
2. News list color #333;
3. News list line spacing 20 pixels;
...Wait

Adjust the environment: IE7, ff, IE6, IE5.x, Opera.

PS: In fact, it’s more about the details when you build it, so I won’t go into details. Haha