CSS style reuse, sub selectors, and group selectors

Css

Work and web production related, recently sorted out some CSS things, sent out, hope useful.

Reuse:
Often use some basic pattern overlays, such as font color and bold. There may be three situations in the Web page: 1. The font is Red 2. Font Bold 3. Font red Bold
At this point we just need to define the first two CSS:
. red{color:red;}
. B{font-weight:bold;}
In the third case, use <div class= "Red B" ></div>

Sub selector:
In contrast, code that simplifies HTML files is more important, so using a child selector in CSS is useful and makes CSS code easier to understand. For example, the following code:
<div id= "Sub_nav" >
<ul>
<li> <a href= "#" >item 1</a></li>>
<li> <a href= "#" >item 2</a></li>
<li> <a href= "#" >item 3</a></li>
</ul>
</div>
If Div Li A has its own style, with a sub selector, you can omit the class attribute of Li and a in the code to simplify the code:
#sub_nav {/* Some styling */}
#sub_nav Li {/* Some styling */}
#sub_nav a {/* Some styling */}
Group selector:
When some element types, classes, or IDs have common attributes, you can use the group selector to avoid multiple duplicate definitions. This can save a lot of bytes.
For example, to define the font, color, and margin of all headings, you can write this:
H1,h2,h3,h4,h5,h6 {
font-family: "Lucida Grande", Lucida,arial,helvetica,sans-serif;
Color: #333;
Margin:1em 0;
}
If there are individual elements that need to be defined as separate styles when used, you can add new definitions to cover old definitions, such as:
h1 {font-size:2em;}
h2 {Font-size:1.6em;}
Reuse, child selector and group selector flexible use can be very effective to reduce the code, but also very advantageous to increase the readability of the code, the specific application needs in the specific process of writing experience.