Alert Against Div and Class abuse

Around, I was just in touch with the layout of the Div + Css website. At that time, everyone was very enthusiastic about the standard, in the blue forum, the arguments for Table and Div + Css are often fierce. Now, we have reached a consensus that Table layout cannot be used, but it is not good to use Table on webpages.

As a result, we began to use Div + Css layout. This was originally designed to make Web documents more semantic, clearer in structure, fewer code, and easier to maintain, this is a very good goal. But the facts tell us that we may not be able to do good things if we have a good goal. Then, a transitional use of Div and Class began to appear. Especially when we borrow some Css frameworks such as 960.gsand YUI Grid, we will unconsciously use some Divs.

These CSS frameworks provide us with a set of solutions, and the use of the framework can indeed save us a lot of time (in fact, if we often write pages, we will also accumulate some common CSS, but there is no integration framework), but it also reduces the space for independent consideration and increases our inertia.

Taking 960.gs as an example, this is a well-known theory. Some blogs in China once introduced it. The principle is to split the width of 960px to different degrees, to achieve standardized and modular use. For example, using 960.gs requires only one simple class to provide different standard segmentation.

Within it, we can make the layout according to our own plan.

We can see that this framework is very easy to use, but at the same time, we will inevitably use a lot of Div and Class to write the structure according to the requirements of this framework. At the same time, when we add personalized content on our page, the excessive content begins.

To avoid this situation, there are several principles to follow:

1. Use Only necessary classes. In particular, the classes provided by the framework need to define the type of layout;
2. classes can be used on all elements except html, head, meta, param, script, title, and style. If you want to implement the layout of the three columns, you do not have to <div class = "grid_3"> 3. Use a class in the parent element instead of adding it to each child element. This seems to be a rule that everyone on Earth knows, but in fact, in the actual process, if there is no planning for the style structure and its inheritance relationship, it is easy to write many special classes in sub-elements. This requires us to have the spirit of getting rid of each other, and to extract all the elements that can be shared to the upper-level elements.

 

References:
1. Fight Div-itis and Class-itis
2. 960 Grid System
3. YUI2 Grid CSS