ID is the devil of CSS

I have talked about this issue many times on the Internet. Today I will talk about it again. It is a friend who prefers to use ID.

Under normal circumstances, no ID is required for HTML + CSS, unless it is used when it is linked to JS. That is to say, we should try not to use ID unless JS is used during encoding.

In special cases, do not use # Name to define CSS. Why do we say this? I used ID to define CSS due to my negligence a few days ago. We also had to develop a typographical error BUG when applying pages, it took three days to find the problem, but it was really bad. The development of MM was about to cry .... As I have been working for many years, I have no face to development for making such a mistake!

To explain why I used ID to define CSS at the time of writing:

You may have encountered writing a general module to an independent CSS name so that this module can be used there. However, in some specific places, this general module is a little different and can be implemented using CSS, at this time, we only need to use the method with a higher weight than the previous CSS weight of the general module. Of course, there are many such methods. My mistake is to use the method of laziness.

As we all know, the weight of the class Attribute defined by ID is higher than that of the common. class mode, which is my fatal mistake.

Error instance:
Common modules

<Div class = "module"> This is a general module </div>
General modules with changes in specific locations

<Div class = "module" id = "side"> This is a common module </div>
Under normal circumstances, the. module {} can be used in all places.
In special cases, # side {} can be used differently.

The above is just a simple example. Of course, the pages I use are much more complicated than this one. Our requirement is that there are multiple pop-up layers, each pop-up layer has ID control. Otherwise, JS cannot retrieve nodes, and a tree menu is displayed in the pop-up window. There are three typographical modes in different pop-up layers, one option is to add a check box to the pop-up tree menu, and the width of the tree menu cannot be defined. Unfortunately, the initial CSS definitions for check boxes are different in our mainstream browsers. However, in order to achieve page unification, we use css hack of IE6. [This is not necessary, try not to use it ].

The pain point is that css hack is selected by ID.

More pop-up layers will be used during development and use of pages, so copy them and assign a new ID, of course, the layout of the new ID in IE6 cannot meet the expectation, because I used the ID as the selector 』. I ignored this because of my laziness. It adds a lot of work for development. Sorry here.

Correct instance:
Use the class name of the parent module to define the general module that selects a specific position for definition.

Common modules

<Div class = "module"> This is a general module </div>
General modules with changes in specific locations

<Div class = "side">
<Div class = "module"> This is a general module </div>
</Div>
Under normal circumstances, the. module {} can be used in all places.
In special cases, using. side. module {} can be different.

This is the correct method. Development does not change the structure of your page and the class name when using the page. However, they will copy different modules or pages to meet system requirements, you can also add an ID to the node to meet your functional requirements. As long as we use the class name as the selector, the above problems will be avoided.

Liehuo. Net (Liehuo. Net) network advice: Abuse of ID caused by the error is far more than this, I hope you will use ID with caution. (Liehuo. Net)