CSS architecture and organization for portal sites and large Web sites

Source: Internet
Author: User
Keywords Web page production CSS Tutorials
Tags block class code development framework html information information platform

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.