Some ideas and suggestions on the layout of CSS

Preface

In the previous period, we made the self-adapting webpage of the maker Technology website, and gained a lot in the process of writing. After the development of the company's PC checkout, the CSS changes in the pain. Learn from the experience, referring to Nanyi teacher's "in-depth understanding of bootstrap" a book, summed up some ideas and suggestions on CSS layout. The basic idea of designing CSS framework

The basic theory used by CSS is a a/o pattern.
A that is append, add;
o i.e. overwrite, overwrite;
Gradually add styles by adding, overwrite to achieve the desired style changes.
Based on this principle, we can decompose the style of the element.

style of ordinary elements base Style

In the basic style, we are generally used to define a uniform font style (font-family), background color, outer padding, display style, border, and so on. Color Style

Increases the display of elements under different circumstances for different situations. This includes hints, warnings, normal, success, and error settings. You can use colors to name them. Special Effects

Add friendly interaction and set the effect. This includes issues such as Hover,active,visited,focus. Dimension Style

Size requirements for different resolutions or special requirements. We can adjust the element's font size, line spacing, height, width, margin and other attributes that affect element size by means of ultra-small, small, ordinary, large, and huge naming. State Style

Displays the effect according to its state, depending on its properties Element[atrribute] to set the effect, the effect type includes, but is not limited to, the color of the ① element's shadow ② style ③ transparency ④ Virtual box ⑤ possible animation effects specified style

The above process is a step-up process, which is specific to the situation:
If the style of an element is modified beyond the uniform style we previously defined, we can add a new class for that element.
What you need to be aware of is:
① This class should be added at the end of class to make sure it overrides the previous style
② This class should be in the ID of the nearest parent class or in a special (named) parent class to prevent inappropriate naming of the class from affecting other styles
③ does not recommend adding the specified style to the element using the ID.
④ can use inline styles directly in an element when the style changes are particularly small, and there is no way to continue with some specially named class names. Special element Style

A specific type of component, typically for only one or several fixed elements
For example, the LI element style in the navigation element NA
The way special elements are used is relatively fixed, which means
We can integrate the above several styles in this step:
Set font, background color, inner and outer margins, text color, special effects
State style and so on

Image address:
Https://img-blog.csdn.net/20180105193810929?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFvbWFvbGFvc2hp/font /5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/southeast