Re-understand the layout of div+css in the process of website making

Along with the "Div+css" in the internet's popularity, "website reconstruction" The Spring breeze blew the Chinese Earth, for a time on the internet jittery, "div+css" has become a Web site in the process of using a layout of the "fashion", a number of 10,000 of sites have invariably started their own "site refactoring." However, it is often laughing to open the source code of these websites and see the various source codes.

When we see a nested 6, 7-layer div layout, there are hundreds of performance CSS ... Now there are more and more books on DIV+CSS standards, except for a handful of books labeled "Advanced Skills", few of them will emphasize the phrase "separation of structure and performance" in the first few chapters of their writings. But how many of us have read these books, and some of them have been seriously reading the first few chapters? Are more people going to skip the boring structure and go straight to the seemingly advanced layout techniques and div+css?

In fact, the use of div+css this way to make Web site production way from the beginning to mislead a lot of people, the mentality of quick success is the cause of this phenomenon is the culprit.

A habit of table layout of the site to make contact standards of the first step, is not supposed to blindly seek div+css to do site production skills, but 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, "Code streamlining" is a marketing tool, not the purpose

"Using the Div+css layout is much more streamlined than the table layout HTML code," I've seen on many websites and books. This sentence itself is not wrong, you can "code streamlining" is indeed a Web site to create one of the benefits. But remember, it's just "one of the good things", not "the only good", not the purpose. "Code streamlining" is more of a marketing tool we use to convince recalcitrant bosses. Web site production standardization is the only purpose of "structure and performance separation," and is not to save code and save code. I used to use a unified class (so far as some books have been taught) because of the uniformity of the site's borders and even the main content of the subject, which saves more code than naming IDs separately, but the cost is that the code loses a good structure. The consequences of losing a good HTML structure are: first, the HTML source code is not readable; second, the site has increased the unknown maintenance costs. Imagine, when a piece of content because of the need to make changes in the form, such as to modify the color of a local link, and so on, we have to modify the page source files, add additional CSS style, the workload than just need to adjust the ID group a lot larger. And in the longer term, the structure will become poorer and worse, creating a vicious circle that is hard to reverse.

There is also a situation where the naming of IDs is a mistake I've made. At that time in order to "simplify the code", and the main menu named "MM", two-level menu named "M2", three-level menu for "M3", resulting in a serious reduction of the readability of the Web page, so that other colleagues difficult to take over, the plan is tired of their own. Similarly, file and folder naming should not be too simple, like a book called "website Refactoring", it is recommended that all images be stored in the "I" catalogue, which I personally think is not advisable unless you can write a detailed description of this highly abbreviated directory structure and ensure that each person involved includes other production personnel, development, Even the knowledgeable boss ... Can be understood and implemented, otherwise it 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 more lithe and flexible, and the combination of the two can be used to produce a well structured page with rich performance. However, there is a false point of view, is to use class completely instead of ID, in fact, many web page source code is also true, open the entire CSS style, can not find an ID. The cause of this phenomenon is very diverse, but the era of personal table layout of the deep-rooted "css=class" concept is the cause. Indeed, class is more versatile and flexible than ID, but at the same time we must realize that class is far less effective than 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 author of the website 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 structure of such a website is obviously not what we want. Moreover, as mentioned earlier, the code that is streamlined by universal class has to be squandered in each individual defined class.

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

After reading a lot of websites, I found a problem, some site's main menu is to use <div id= "Mainnav" ><ul> such style, while some sites are used <ul id= "Mainnav", then the main menu is used <div id= "Mainnav" ><ul> good? or <ul id= "Mainnav" > better? This is a game problem. No one has ever been able to give a definitive answer to this question, even me. Admittedly, the <div id= "Mainnav" is a bit redundant when it contains only one <ul> element, but sometimes in order to match the design of the art, One more layer of labels means more than one layer of change (which is also true for some people who have a span in a tag). The inherent advantage of Div without any original attributes is unmatched by any other label. Then there is the <ul id= "Mainnav" > This 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 deeply cited-"not all content needs to use block elements to make containers", "not all links need to use other elements of the container", such as many pages have "more". Some people write "<div class=" More "><a>", someone writes <p><a> or <strong><a>. When these "containers" contain only one <a> label, are they still necessary? Directly written <a class= "More" > will destroy the structure? Does it lack semantics? Will it affect the layout? Another way of thinking, you may have a different harvest.