How to organize css, write high-quality css code, and write high-quality css code

How to organize css, write high-quality css code, and write high-quality css code

! How to organize css
I. css APIs
It is a basic part, and its capabilities are judged by "right" and "wrong.
For example, if you set the text to red, you can only use color: red. This method is correct, and any other method is wrong.

Ii. css framework
We cannot judge by "right" or "wrong". We will judge by words like "good", "better", "bad", and "very good.
By function: control the css of the font.css file.
CSS for controlling colors is concentrated in the coloor.css file.
The control layout CSS is concentrated in the layout.css file.
By Block: place the CSS of the header in head.css.
Place the background in foot.css.
Place the sidebar in sidebar.css.
Put the main body in main.css.

!! Organization Methods from different perspectives have their own principles, as well as their own shortcomings and advantages.

One of my favorite methods to organize css is base.css?common.css=page.css.
Base (highly portable)
(Base is the bottom layer of the three, providing the CSS reset function and the general class with the smallest granularity-the meta subclass. This layer will be referenced by all pages,
Is the bottom layer of the page style dependency. Regardless of the style design, it can be referenced, so the base layer should strive to be concise and general.
￥ $ Foundation of the house. ￥)
It is divided into base, common, and page According to intelligence. Note that these three are not parallel structures, but stacked structures.
Common (portable)
(Bommon is located in the middle of the Three. We can split the elements in the page into small pieces of modules with relatively independent functions and styles ",
Some of these "modules" are repeated in large quantities. we can regard a large number of repeated "modules" as a component. Try
Multiple components are extracted and placed on the common layer. Highly-reused modules on websites are regarded as components and placed on the common layer.
￥ $ Doors and windows of the house. ￥ $
A website has only one common layer. The commonlayer is stored in a common.css file, or by function
In the multiple files of common_form.css1_common_imagelist.css
.)

Page (almost no portability)
(Page is located at the top of the three levels and provides page-level styles. ￥ $ Decorative painting in the room. The code with pagelayers is stored in a page.css file.
, With comments based on the page, write in blocks for easy maintenance. For example:
/* Homepage */
. Test1 {}
. Test2 {}
/* About us */
. Test3 {}
. Test4 {}
/* Contact Us */
. Test5 {}
. Test6 {}
!! Page.css should be simpler and better. It can be solved with css on the base layer and common layer, so we should try not to use the page layer .)