Bad css usage 1_html/css_WEB-ITnose

Nowadays, websites are becoming more and more beautiful and dazzling, so css is essential. However, I find that many people use css in the wrong way. At least it is not recommended.

For example, the following css usage is incorrect

(1) One page corresponds to one css file

This is my approach I hate it, why? The reusability is too poor!

For example, one day I suddenly want to change the style of a button, it will be broken. As long as the style of the page containing the button is changed, I All have to be changed. For example, if 20 pages contain buttons, then I have to modify 20 css files. Isn’t this life-saving?

Root reason:The same style appears repeatedly in multiple files. .

(2) Directly modify the style of the html tag when writing css styles

For example:

No Through id or class, this method is very bad, because its impact is completely open , and any page that introduces the css file will be affected. I encountered it in my project. At that time, we used WebCalendar.js as a date control, the original interface should be:

But the actual effect is:

Reason: The introduced css actually affects other controls. This is not the effect we expected.

The correct way should be:

What should I do if I want to apply this css? Just add class.

(3) The same code appears in multiple places



This css code appears at least four times. If the customer wants to modify the height of the line (line-height), then I have to modify at least four places at the same time. Isn’t this a trick of one’s own people??

(4) Abusing id

For example:

We need to know that the weight of id is the highest. In daily development, we will encounter more situations To the following situation:

#header a { border:2px dashed #000 }

Suppose this is one of our projects, and now we decide to set another link in the header to be borderless. As we write, we add:

.special-link { border:none }

Then we added a special-link class to the html. Does this solve our problem? The answer is: No! Since the weight of id is so high, we need a higher weighted declaration to achieve our needs.

The following is correct:

#header .special-link { border: none }附件是我总结的html笔记:html02.zip

html02.zip (1.9 MB)