CSS rules overlay application CSS must pay attention to some of the exchange of experience _

The theoretical basis is necessary, practice is the way to promote and understand the theory, both of which are equally important, and any design and development personnel to leave the balance, regardless of which side, will be fan or left or right error. But what's the use of the method I'm talking about in practical applications? Obviously, it is not able to create rounded rectangles, nor can we create a breakdown of the layout, it is even more impossible to give us a fixed in the document the head of the navigation bar. The practical application of this algorithm is: good CSS programming specifications. This is a macro practice that is just as important as the micro-practice I just mentioned, but it is more difficult to grasp.

This article does not want to include all the good CSS programming specifications, and it is not possible, I can provide is just my personal writing CSS specification Summary, I think these specifications are as close as possible to the nature of the operation of CSS.

Do not use inline CSS
User style is not within your control
Do not use the important rule
Write CSS from low to high according to specificity
The first three is not the point I'm talking about, I'll take a stroke.

Inline CSS is the highest specificity, if you css file attributes and inline CSS conflict, then you CSS file properties are not valid, this and we only in the CSS file in the style of debug custom does not match. Inline CSS is also ugly, it inserts styles into HTML documents, so you should give up using inline CSS.

If the user has set user style to important, it is futile to attempt to overwrite all user style, regardless of how CSS rules are written and important statements cannot be overwritten. It's nice that we don't have to think about that.

Important rule is a heterogeneous, it does not conform to our usual way of thinking, no matter how we increase the specificity of the CSS rules and order, important rules will cover the rules of competition with it, which will disrupt the rules of the habit of CSS rule, bring trouble to debug. If you want to use the important rule to hack the browser, you should apply the rule in a selector that points to a unique element. (PS. Hack should be the last consideration in the solution, because it is too ugly. ）

Last but not least, how do you write CSS from low to high according to specificity?

The key is modular CSS.

Add Global CSS
Add current page unify CSS
Divide a page into several modules
ID hooks are used on each of the different modules, and class hooks are used on the same module
Add unified CSS for each module
Divide each module into several sub modules, and go back to step 4th to start the loop until the style is added.
Writing good CSS is a design issue, not an implementation issue. We should first write a very low global CSS content, which is our common reset.css. It is the default style for all pages in our entire site.

If there is a particular page with a unique unified style, such as the background of a particular page is different from other pages, then we can add an ID to a page and then write the unified CSS for the current page under ID.

body#special{
Background-color:black;
}
After the unified style was written, we divided the page into several modules, if these modules have the basic same style, then use class hook, if the style is not the same, then use ID hook, each time the module should follow this principle, because the class is not high specificity, So if you don't have a module that looks like it, you shouldn't use class. The name of the ID can usually be used as the name of the module. such as head, bottom and so on. ID selector plays a key role in cascading because IDs are exclusive and have a higher specificity to prevent the CSS rules from being inadvertently overwritten.

In a module we may have some unified CSS, then we need to use ID selector to write the unified style under the current module.

#head p{
color:red;
}
When adding class hooks, I recommend using the ID of the parent module (or the page itself) as the first part of the class name. If I add a separate page (body#special), then I should name the module Special_head, Special_bottom, etc. for the page.

Or you should use Head_col when using class hooks in some page modules. The advantage of doing this is that we don't use

#head. col{
/* The style of each column in the head * *
}
And you can use it directly.

. head_col{
/* The style of each column in the head * *
}
So you don't have to worry about naming conflicts.

For the element under the module that directly adds the ID selector, we can use the selector directly, and also add the ID of the parent module before its name.

#head_navigator {
/* The style of the navigation bar in the head * *
}
To achieve modular CSS we should try to prevent cross module CSS appears, I think a good principle is: if a style of cross-module features are not you at a glance, then do not use the cross-module CSS. One exception is the global CSS or the unified CSS within the module. For those that are not straightforward and do not have a uniform style, it is recommended to define them separately under each sub module. This is like writing an object-oriented design in a Java program, we want to reduce the interdependence between the modules, so that the same module of the CSS rules together, slightly different from the complete separation, so not only easy to maintain, but also to ensure that the specificity from low to high ground to write CSS, so as to prevent the CSS rules are accidentally overwritten