DIV+CSS Web page Making mistakes

"Reconstruction" of the spring wind blowing across the river North and south, the internet for a time jittery, "div+css" has become a "fashion", difficult to all of the sites have invariably started their own "refactoring." But it's often laughing to open the source code of this web site--

We see a nested 6, 7-layer div layout, there is no table tables, there are pure div+a of the composition of the page, there are hundreds of performance layer class ... Now there are more and more books on standards, except for a handful of books that boast "advanced skills", few of them emphasize the phrase "separation of structure and performance" in the first few chapters of their writings. But how many readers of these books have read the first few chapters seriously, or are you more likely to skip the boring structure and go straight to the seemingly advanced layout techniques and hack?

In fact, div+css this argument from the beginning of the misleading too many people, the mentality of quick success is the cause of this phenomenon is the culprit. A custom table layout of the Web page to make contact standards of the first step, should not be to blindly seek to achieve a variety of layout of the CSS skills, but efforts to change their way of thinking.

The following will be combined with my own experience to talk about compliance with the standard mode of thinking, many of which I have been through the detour, I hope to just contact the standard XDJM some help:

1, "Save Code" is the marketing means, not the purpose

"Using div layouts can save more code than the table layout," I've seen on many books and websites. This sentence itself is correct, you can "save code" is indeed a Web page standardization of the benefits of one. But remember, it's just "one of the good things", not "the only good", not the purpose. "Saving code" is more of a marketing tool we use to convince recalcitrant bosses. The only purpose of Web page standardization is "separation of structure and performance", and not to save code by saving code. I used to use a unified class (so far as some books have been taught) because the site sidebar and even the main content of the presentation form the same, but it is better to save code than separate named IDs, but the cost is that the code lost a good structure. The result of the loss of good structure is: first, the source code is not readable; second, the site increased the unknown maintenance costs. Just imagine, when a piece of content because of the need to make changes in the form, such as the color of links, etc., we have to modify the page source file, add Extra class, the workload than only need to adjust the ID group a lot. And over the same term, the structure will become worse, creating a vicious circle that is hard to reverse.

There is also a situation in the Triple tutorial, appearing in the name of ID, but also I have made mistakes. At that time in order to "Save the Code", and the main menu named "MM", two-level menu named "M2", three-level menu for "M3", the result of a serious reduction of the readability of the Web page, so that other colleagues difficult to take over, the figure of easy but tired himself Similarly, file and folder naming should not be too simple, it is not advisable for you to use the "I" Directory in the website refactoring, unless you can write a detailed description of the highly abbreviated directory structure and ensure that each person involved includes other producers, developers, and even knowledgeable bosses ... Can understand and execute, or you will only add unnecessary trouble to yourself.

2, ID is Sniper gun, class is a double-edged sword

Want to do a good job of Web page structure, ID and class are must be mastered, the so-called "both hands to grasp, both hands must be hard." IDs, like sniper rifles, can help us pinpoint the elements that we want to load, and class is the knight's sword, which is lighter and more flexible, and the combination of the two can achieve a well structured and expressive page. There is, however, a misconception that IDs can be replaced with class, which is true of many web-page source code, open to the entire class and cannot find an ID. There are many reasons for this, but the deep-rooted "class=css" that have been handed down from the table era are the cause. Indeed, class is more versatile and flexible than ID, but it must also be realized that class is far less effective than an ID for building a good web page structure. The mandatory uniqueness of IDs makes it easy for us to retrieve any of the modules we need by ID, and class doesn't have that advantage. Although we can define a unique class name for the module, the premise is that only the creator can move the page style. Otherwise a little lazy some of the guys, see the same style will directly put the previous class to apply, the result is that we found that the page has more than 10 modules are called "Gonggao" or "Xinwen", so as to distinguish also have to add a lot of HTML comments, The result is obviously not what we want. Moreover, as mentioned earlier, the code saved by Universal class has to be squandered in each individual defined class.

ID is a sniper gun, class is a double-edged sword, the combination of beneficial, divided into two defeats.

3, not all the content needs div to do "container"

What is the main menu for

Still is

? This is a game problem. No one can give a definitive answer to this question so far, even me. True

In the inclusion of only one

element, the div is somewhat redundant, but sometimes, in order to match the design of the art, one more layer of labels means more change (and so does some people in a tag). The inherent advantage of Div without any original attributes is unmatched by other labels. The proposition I just want to say is that we should realize that

Besides, there are

This kind of writing, also has good structure and semantics, and eliminates a layer of nesting. When we do not need to be dedicated to the gorgeous art of the time, is it possible to make the structure more simple?

This proposition can also be extended to-"not all content requires block elements to do container", "not all links need other elements to do containers," such as many pages have "more". Some people write "

"And there are people who write to do

or labels, do they still have a need for existence? Is it going to break the structure if it's written directly? Will it affect the layout? In another way, you may have a different harvest.

4, work also do "structure and performance separation"

On this point, a lot of experts on the network is such a suggestion, that is, first open the editor, the structure of the complete write out, and then to write in the CSS performance, and try not to move the structure has been written well.

However, to read as the main way of learning is difficult to understand, because the standard books are mostly hands-on to teach, that is necessarily the combination of structural performance, step-by-step. Although some books have this suggestion, but a few short words are far less than the reading process of imperceptible. When the production staff can be good at the structure of the time, write structure and performance will not have too much impact on the results. But in my experience, the structure of the separation of the working way, than the simultaneous writing structure and performance is much more efficient, but also not easy to omit the elements on the page.

Of course, the so-called "separation of structure and performance" is not completely regardless of performance, want to take into account the performance, it is necessary to ensure-without destroying the structure of the premise, the CSS selector can choose to as many content. Where to add class, or what label to distinguish, is a matter of opinion, I believe everyone has their own experience. And the combination of different design, sometimes need to make corresponding changes, but these changes should have a similar premise-do not break the structure and readability of the code.

Again, be aware that any visual tool is the devil. Their visual interface to render the effect, often with the real browser, and we really want to be compatible with the browser, not the editor of the visual interface.

5, CSS is not omnipotent, no CSS is not a must not

Compared to the CSS1.0 era, today CSS can do more things, but the demand is always ahead of technology, CSS can not complete the page all the performance layer work, sometimes we have to combine JS or other languages to achieve some effect. Other times, using the JS method is much simpler than relying on CSS, and the code structure is better--the most typical example is the Pull-down menu. These days we have to convince ourselves, or convince our bosses and clients, to adopt a simpler and more reasonable approach. Because Dom is also an important component of Web page standards, not using JS our web page to reduce efficiency or no longer standard, on the contrary, this is the biggest misunderstanding of JS. Speaking of which we have to mention, is today's era, more than ever required to know more relevant knowledge of each occupation, do design people to understand a little interaction and production, do the production must understand the design and procedures, especially JS such front-end technology, only in this way, you and colleagues can better cooperation, The prospects for personal development will also be brighter.

No CSS, refers to when our site because of various unknown reasons for the failure of CSS file loading, do not panic, this is the best time to test our code quality. In the absence of CSS, if the page is still good readability, this result is far more than through the verification of the Web site is more worthy of our pride.