Summary of CSS style sheet planning and management experience

It has been more than a year since I used xhtml + CSS to build a website. More than a year of practice has accumulated some experience. Now I will write this article to summarize it. There is a key issue in the process of using xhtml + CSS to build a website: planning and managing the CSS style sheets of the website.

History of my CSS Management

When CSS was initially used to control website styles, it was not clear about CSS management planning and other things. The written CSS was basically added at any time as needed, at the beginning, I didn't think there was anything wrong, but the more I added, the more I changed, and the more messy I was. Although there were some comments, it still gave me a headache in the end. At that time, all the CSS of a website was in one file, without planning and sorting rules. Therefore, the class name can only be found on the html page, search for the one you want in thousands of lines of css code.

After a while, I made a preliminary plan on the CSS style sheet of the site. The style sheet has three areas:

Example Source Code [www.52css.com]
Base style sheet
Layout style sheet
Class style sheet
The "base style table" is used to describe something public, such as the global body and a style. The "layout style table" is used to describe the unique id layout, it belongs to the frame layout of the entire page; "class style table" is used to describe the style of the remaining class, this type of style can be divided into reusable style and style that appears only once or several times on a special page.

According to this method, the layout has indeed improved a lot of efficiency, but this method is only suitable for small and medium-sized websites. The application on large websites is still a little thin, at least it cannot achieve the best efficiency when many people collaborate. Therefore, we have the perfect CSS management planning mode summarized below.

Perfect CSS style Table Management Mode

Step 1: individuals or teams need to draw the layout of the main page in the DIV chart mode in layers. This DIV chart is based on the design prototype, mark the ID and class names used by the main modules on the page to facilitate the establishment of maintenance documents for future modification and upgrade.

Step 2: divide the CSS structure and establish the global css and the css of each module. Reference global css on the html page and reference css of each module in global css.

Example Source Code [www.52css.com]
Create global.css as global css and define "* {… } Body {... .
In the global style, use "@ import url(”xxx.css"); "to introduce the module css.
I like the CSS division method in wordpress, which is similar to the following structure:

Example Source Code [www.52css.com]
Layout.css/* Full Site Layout */
Public.css/* Public combination style */
Header.css/* page header area style */
Sidebar.css/* sidebar area style */
Main.css/* subject area style */
Footer.css/* bottom area style */
Index.css/* special style of the home page area */
Form.css/* form style */
Layout.css is responsible for the layout of the entire website, for example, # header, basic settings of the footerlayout, and sample design. public.css is responsible for some public style definitions, because a class can use class = "navbar labels" as a form. Although it is not difficult to control the style sheets and forms of elements, it is difficult to control them. Put them in a css file to facilitate control. Of course, you can also process similar elements.

Step 3: Write styles in each style sheet file.