Deep CSS structure: rational use of div and span

Css

Deliberately online search for a bit, about Div, saying a lot.

Think of div as a layout element this view I want to be the most, like "use div instead of table layout", "Actual combat css+div layout" and so on, too much, there are many people to use the definition of Dreamweaver, called Div for the layer, Use the concept of the layers in Photoshop ... A friend simply called Div and span as the auxiliary layout element.

What do you say? Although I would like to say that the div similar to this understanding is wrong, Div is not a layout element, not a tag is used for layout, but I am right? I don't know. Almost everyone's propaganda for Div is layout, both ' folk ' and ' official ', but if we look for the source, in Chinese, div is a structured label, a block-level element. Well, let's take a look at the semantics that Div has, division (delimited), chapeau meaning its role is to separate two parts. Then we go back to W3 to see how to define div and span: the div and span elements, in conjunction with the ID and class attributes, offer a generic mech Anism for adding structure to documents. These elements define content to is inline (SPAN) or Block-level (DIV) but impose no other presentational idioms on the CO Ntent.

Did you notice the bold remark I made? W3 not say is for layout, but for structure, is the structure! Because it separates to produce (define) a code structure. I think the structure and layout should be two concepts. Perhaps, because table is actually used for layout, this deep-rooted layout mentality is naturally passed on to Div, which I have understood for a long time. But now I'm going to say that this is definitely a mistake and that this is an extremely serious mistake!!! This purely personal point of view of personal understanding, his choice is good.

Why is it serious? The error of understanding is directly caused by the use of the error. Because if you use the div as a layout element in this way, then I think:

You can never fix xhtml!. Always stuck in the circle of CSS! Never going to think and understand the structure! Never wipe clean table branded traces! Never be able to approach God (pair, hehe) ...

Perhaps the div is called a layout element or better to enforce the standard, but it brings people from one error to another. Two years ago when I first contacted the standard in the "reconstruction of the United States," the first article in the confusion about the revision of things, although with the depth of understanding seems to have a breakthrough, after I write the XHTML does not change, and then through the CSS skills to complete the new layout. such as the famous Csszengarden. But soon I have a new confusion, one does not seem to have any problems, the team? For example, if the same content, designed in two layouts, and then handed to a different two people to write XHTML, will it? Would it be the same if the Csszengarden form were reversed, and the first 100 designs were made based on the same data, and 100 people wrote 100 XHTML according to the design draft? I would like to follow the div layout pattern, for the same layout, different people different page analysis will produce different XHTML, not to mention the different layout? But since performance has nothing to do with structure, the same content should not have more than 2 XHTML. Do not underestimate this problem, for the team before and after the effective separation and rapid collaboration, this is the key! I put forward a point of view in the training: the ideal state is that the front desk closes the eyes to know what kind of XHTML structure code is in the background output. So where's the problem? DIV Layout! Especially after understanding the H Series label unreasonable, experience more profound.

The structure that I proposed in the previous article should be divided into two categories: semantic structure and code structure. Understanding these two structures, then the usefulness of Div is more clear, a little brain can be thought of to organize the code structure. So the problem with HX tags I think classic, do not say HTML, even for XHTML, most people care about how to behave, a small number of people care about the semantic structure, few people care about the code structure, it seems that XML has, XHTML does not need the code structure. But from the HX series, you can see and extend the idea that W3 can always be concerned about the structure of the code, from 1.0,1.1 until 2.0, hoping that XHTML has an XML-like code structure. Speaking of another change in XHTML 2.0, BR is no longer recommended, and it should be well understood that BR's semantics are to produce a truncation (break), but the actual effect is to produce a row, the semantic structure is still imperfect, so use line to replace <line>this is One line</line>. Also BR has no code structure to say, if I want to extract the third row of data how to operate? So it is likely that such labels as BR and HR will be discarded. I figured that xhtml1.x was W3 cleanup, pulling people in the direction of the semantic structure [semantic], while XHTML 2.0 was showing and highlighting the structure of the code [structure]. Oh, you said I was thinking right? A blind guess. ^_^

Come back, then how to organize? First of all, for a design draft, must be designed to be confused and left and right, only to extract the visible and invisible data, and then throw away the design manuscript, first complete the semantic structure of the data, and then add the code structure (adding structure to Documents.), after the completion of XHTML, the final step is to pick up the design draft to open the CSS, restore. Of course it is impossible not to read the design draft, but how to look at it? Just the data! Again, what is the order of data in the document? It is, of course, determined by the document, not by the design draft. For example, if there are two columns, news headlines and general news. Who is in front of someone who is obviously in the document should be the headline in front of the general after, this is by the UE (user experience) and column weight of the comprehensive consideration decision. But according to the Div layout, according to the design draft after the next left before the right in order to decide, then if the design draft in the general news column design in the left column, the headline design in the column, the document in the ordinary news on the top of the headlines. So I open a Web Standard site document browsing, if the sequence of documents is in accordance with the layout of the page after the left front and right after the order, then I ... Special case, if a single-screen design of the site, title and navigation design under the page, then your document is not the bottom is the title and navigation, what is this UE? It's not a rip-ball. Div,div layout of the consequences-the document structure is still for the performance of the left and right! Pair!!

How does the code structure work? According to the above article, the large structure is divided into the H series. So small? Here is another concept that involves DIV: block-level elements. What block? Module! Small with Div modularity. Example:

<div>
<div>
<label for= "name" > Username </label>
<input id= "Name"/>
</div>
<div>
<label for= "PW" > Password </label>
<input id= "PW"/>
</div>
<p><button/></p>
</div>

This example in [complex form], let's take a detailed analysis of how div is used in small modules. In fact, it is very simple, h3/lable/p is the semantic structure, then, for the user name and the corresponding input box is obviously inseparable from the whole, so good, Div will identify it as a block, the corresponding password part of the same. Finally, the two together with the title and button constitute an indivisible landing whole, div. This has a good semantic structure and code structure. A good code structure not only makes it easy to fix XHTML, it makes it easier to manipulate nodes, but also provides a high degree of freedom for CSS. As in the previous example structure, I just need to give the most outer div a class, such as "LoginArea". So:

I can define this by node/path layer level:. LoginArea label{}. LoginArea input{}. LoginArea Div label{}. LoginArea div input. If I need to log in horizontally, I just need to define a key point:. LoginArea Div{float:left}, if the vertical remove this key point, the modular landing is so simple. This can also save a lot of class, especially for some seemingly complex structure in fact, modular design, the inside of the module is simple, a path defined in the past, there is no class will not cause style conflicts and interference, CSS is also very good readability. Of course, here will be related to the skills of CSS, I think the most important CSS skills is to analyze the page, the page analysis of the good, write out the CSS simple and full use of tag and more for expansion, or class A lot of complex and lengthy will feel that tag is not enough to add damage to the structure Complex form of the system CSS I wrote 48k, has not done the final optimization, all the pictures in total only 5 K, but also all lossless PNG format. The whole system dozens of big modules, but also has the infinite level menu, the tree, the page checks, the pop-up, the complex form, the contract, the Frame,iframe, the report, the control set control and so on everything has, the CSS plus picture entire performance part may achieve within 50K. This project four programmers together developed me a person to top all the front desk, three months time, the programmer regardless of any related performance part, I was playing the game to do it. In the late, the delivery of customers when I also feel that the company's design is not good, and their own spend 1 days to redesign, spend less than 2 days another write a CSS, the entire system has changed and the previous design has not been lost. The function of the case of the interface big change, and then the big system is only a few days, and programmers do not have to tube. This is one of the power of Web standards! (because it is intranet application, so I almost did not consider and take care of browser compatibility, not necessary, is also a quick factor)

So I think the current major sites in a variety of ways to list in advance what single row, two rows and a few rows of div+css layout code, not to say that they are not right, you can fully understand how to use CSS to achieve a few lines of layout, and then rational use of their own structure. But if you follow the code he provides to add content, then you are wrong. But then again, in a title of a big "layout" two words of the imperceptible, you still have the mind to care about the structure? So many of them are going to be thinking about CSS, so these well-meaning web standards advocates are still wrong, including me, my 2004 years of "The beauty of Refactoring" code example part of the more misleading (fortunately, I have repeatedly stressed that the code has no reference to the meaning, but also in the text to make amends). What now? I don't know, on the way, on the road ...

Write a lot, the rational use of span left to update it.