Rules for building CSS frameworks for portal websites

Part 1: the purpose of building a css framework:

1. Achieve Standardization and frontend implementation that is adaptive to mainstream platforms;
2. Quick Development. After the site style is determined, the front-end should not be the bottleneck of the entire project;
3. refactoring needs to make the class and block style reusable as much as possible;
4. Separation of structures and performance requirements, and compliance with the semantic structure conventions;
5. The architecture is a css framework that fully complies with the characteristics of the financial network.
6. PairCodePerform necessary search engine optimization.

Part 2: Conventions on CSS naming:

1. Class names and ID names in upper case are not used;
2. Try to use a combination of descriptive English words as the class name and ID name;
3. Separate multiple English words of the ID and class names with a hyphen;
4. Describe by region. Example: main01_div01_ul01 (it can be understood as the first ul under the first DIV in the first region of the subject)

Next, we will analyze the entire website and design draft to develop a css framework that conforms to the characteristics of the portal structure.

We have released Sina as an example:

Perform site structure analysis:

The entire page is divided into: Home Page, more pages, content page, Topic Page, data center, News Center, channel page, advertisement ......

We organized these pages to find out their public parts, where they were discovered: CSS styles, areas, module fragments, what we need to do is to put forward these public parts.

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

Body style sheet: sjweb.css
Font (Set of font styles, font sizes, and colors)
Layout (framework structure set)
Global (global default style set)
Component)
In this section, the system is importto the sjweb.css main style table. The main style table is used as a loader to load new external styles,
For example, an advertisement style sheet.
In this way, you only need to write a little bit of CSS style code that meets your special requirements.

It is best to unify many details when building this css framework, such as row spacing and inter-module distance.

The following figure shows the Home Page Structure of a portal network:

Rules:
1. the spacing between all areas and modules is 8 pixel;
2. News list color #333;
3. News list line spacing: 20 pixel;
...... And so on.

Adjust the environment: IE7, FF, IE6, ie5.x, and opera.

PS: in fact, it is more about the details of your build. Haha