How to organize CSS, write high-quality CSS code

！ How to organize CSS
One: CSS API
is part of the basic part, which is judged by "right" and "wrong".
For example, the text is set to red, only with color:red, this writing is correct, and any other wording is wrong.

Two: CSS Framework
We can not judge by "right" or "wrong", we will use the words "good", "good", "bad" and "very good" to judge.
by function: The CSS that controls the font is set in the Font.css file.
The CSS that controls the color is concentrated in the Coloor.css file.
The CSS that controls the layout is centered in the Layout.css file.
Divide by block: Put the CSS of the head in the Head.css.
Place the bottom in the foot.css.
Place the sidebar in the Sidebar.css.
Place the subject in the Main.css.

！！ Different angles of the organization methods have their own truth, but also have their own shortcomings and advantages.

The author's favorite kind of organization CSS method: Base.css+common.css+page.css.
Base (highly portable)
(Base is the lowest level of the three, providing the CSS reset function and the smallest granularity of the general class-the meta-subclass.) This layer will be referenced by all pages,
is the lowest level of dependency on the page style. Regardless of the style of the design can reference it, so the base layer to strive to streamline and universal.
￥￥ the foundation of a house. ￥￥)
That is, by intelligent partitioning: base, common, page. Note that these three are not side-by-side structures, but cascade structures.
Common (portability general)
(Bommon is located in the middle of the three, we can split the elements of the page into a small piece of function and style relatively independent small "module",
Some of these "modules" are very repetitive, and we can see a lot of duplicate "modules" as a component. From the page as far as possible
Many of the components are extracted and placed on the common layer. Highly reusable modules in a Web site are considered components and placed on the common layer.
￥￥ The doors and windows of the house. ￥￥
A website has only one common layer. Common layer is placed in a common.css file, or in accordance with the function of the partition placed in
Many files, such as COMMON_FORM.CSS, COMMON_IMAGELIST.CSS, need to be based on the size of the site
Decided. ）

Page (almost no portability)
(page is at the top level of the three, providing a style at the pages level.) ￥￥ decoration in the room. ￥￥ has page layer code in a page.css file.
, according to the page with comments, block writing, easy to maintain. Such as:
/* Home */
. test1{}
. test2{}
/* About Us */
. test3{}
. test4{}
/* Contact Us */
. test5{}
. test6{}
！！ Page.css or should be more concise and better, can use the base layer and the common layer of CSS to solve, try not to use the page layer. ）

How to organize CSS, write high-quality CSS code