CSS rules cascade application CSS must pay attention to a few _ experience exchange

The theoretical basis is necessary, and practice is the way to ascend and understand the theory, both of which are equally important, and any design and developer who leaves the balance of the two, regardless of which side, will fan or left or right error. But what is the use of the method I'm talking about in practical applications? Obviously, it does not give us the ability to create rounded rectangles, nor can we create a column layout, which is more unlikely to give us a navigation bar pinned to the head of the document. The practical application of this algorithm lies in: Good CSS programming specification. This is a macro practice, as important as the micro-practice I have just mentioned, but more difficult to master.

This article does not want to include all good CSS programming specifications, it is not possible, I can provide is only 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 important rules
Write CSS from low to high on a special basis
The first three is not the point I said, I will take a stroke.

The specificity of the inline CSS is the highest, if your CSS file properties in conflict with the inline CSS, then your CSS file properties are not valid, and we only in the CSS file in the style debug the habit does not match. Inline CSS is also ugly, it inserts styles into an HTML document, so you should discard the inline CSS.

If users set the user style to important, it is not always possible to overwrite the user's important statement, regardless of how the CSS rule is written, so trying to overwrite all the users ' style is futile. 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 and sequencing of CSS rules, important rules will cover the rules of competition with it, this will also upset the rules of CSS rule, to debug trouble. If you want to use the important rule to hack the browser, you should apply the rule in a selector that points to the unique element. (PS. Hack should be one of the last considerations in the solution, because it is too ugly. ）

Finally, how do you write CSS from low to high on a special basis?

The key is modular CSS.

Add a global CSS
Add Current page Unified CSS
Divide a page into several modules
Use ID hooks on each of the different modules, using class hooks on the same module
Add a unified CSS for each module
Divide each module into sub-modules and go back to the 4th step to start looping until the style is added.
Well-written CSS is a design problem, not an implementation problem. We should first write a very low-specific global CSS content, which is our usual reset.css. It is the default style for all pages in our entire site.

If one page has a unique uniform style, such as the background of a page is different from other pages, then we can add an ID to a page and then write the current page's unified CSS under the ID.

body#special{     Background-color:black;}

Unified style After writing, we divide the page into several modules, if the modules have the same style, then use the class hook, if the style is not the same, then use the ID hook, each module should follow this principle each time, because class is not very specific, So if it's not a module that looks like it's obvious, you shouldn't use class. The name of the ID can usually use the module as a name. such as head, bottom and so on. ID selector plays a key role in cascading, because IDs are exclusive and highly specific, which prevents CSS rules from being inadvertently overwritten.

We may have some unified CSS in a module, so we need to use ID selector to write a uniform style under the current module.

#head p{     color:red;}

When adding a class hook, 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 after the module is divided, I should name the module of the page Special_head, Special_bottom, and so on.

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{/     * style for each column in the header */}

And can be used directly

. head_col{/     * The style of each column in the header */}

So you don't have to worry about naming conflicts.

And for the element that adds ID selector directly under the module, 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 header */}

To achieve modular CSS we should try to prevent cross-module CSS appearance, I think a good principle is: if a style of cross-module features are not at your glance, then do not use cross-module CSS. One exception is the global CSS or the unified CSS within the module. For those that are not at a glance and are not uniform, it is recommended to define each sub-module separately. This is like the object-oriented design in the Java program, we want to reduce the interdependence between the modules, so that the same module of the CSS rules together, slightly different to completely separate, so that not only easy to maintain, but also to ensure the particularity from low to high ground to write CSS, so as to prevent the CSS rules are accidentally overwritten

The above is CSS rules cascade application CSS must pay attention to a few _ experience exchange content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

