Bad css usage 1 and css usage

Bad css usage 1 and css usage

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

For example, the following css usage is incorrect.

(1) A page corresponds to a css file

I hate this practice. Why?Poor reusability!

For example, if one day I suddenly want to change the style of a button, it will break down. I have to change the style of the page containing the button. For example, 20 pages contain buttons, so I have to modify 20 css files. Isn't it human?

Root cause:The same style is repeated in multiple files..

 

(2) modify the html Tag style when writing css styles.

For example:

This method is not very good because it does not pass the id or class.Fully OpenAny page introducing the css file will be affected. I encountered it in my project. At that time, we used WebCalendar. js as the date control. The interface should be:

 

However, the actual effect is:

Cause:The introduced css actually affects other controls.. This is not what we expected.

 

The correct method should be:

What should I do if I want to apply this css? Add the class.

 

(3) the same code appears in multiple places

 

This css code has appeared at least four times. If the customer says that he wants to modify the line-height, he must modify at least four places at the same time.Isn't this an attack on your own??

 

(4) Misuse id

For example:

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

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

Suppose this is one of our projects. Now we have decided to set one link in the header to a borderless link. We have added the following:

.special-link { border:none }

Then we added a special-link class in html. Does this solve our problem? The answer is:No! Because the weights of IDs are so high, we need to declare higher weights to meet our needs.

 

The following statements are correct:

# Header. special-link {border: none} the attachment is my summary html Note: html02.zip

• Html02.zip (1.9 MB)