[CSS] Page refactoring "no width" criterion of "Xin Three no Criteria"

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This article address: http://www.zhangxinxu.com/wordpress/?p=1152 One, about "Xin three no Criteria"

The concept of "Xin San no Criteria" has been mentioned since I wrote the article "about the Google Fillet Gaokiang Adaptive button and its outreach" last year. This is my own experience in page refactoring, a set of rules to constrain their own CSS, namely "no width", "No Picture" and "no float", the purpose is to make CSS layout modular and enhance extensibility.

This guideline is for my personal, may not have any applicability, may also be enlightening to your study, so here is still simple to share. A total of three criteria, the content of each guideline is more, this article simply talk about "no width criterion."

Second, why should "no width"

First of all, humorous digression. I personally do not like the word "cut", each time the project manager called me: "XX, trouble to take this picture cut" when the heart is always a bit uncomfortable. The word "cut" has the idea of cutting and stitching the design drawings, we may have experienced this kind of "cut" stage, this is a lack of creativity, lack of art, lack of technical content stage, this is a building block like only need kindergarten IQ can be completed stage.

A reference to the word "cut", My mind flashes is: split the image, tailored, calculate the width, the page elements seamless stitching, and then form a page. I just touch css that's what I did, now look back, then the kind of "cut chart" approach is really bad to even worship the leader is inferior.

Description of the practice at the time, is to accurately measure, calculate the width of each element, the calculation also takes into account the margin,padding and border, always accurate to the pixel level, and then use the floating seamless stitching, wow Click, then I was very complacent, Because the width on the page ah what is accurate to each pixel, each element is accurate calculation, is how serious, work how hard ah!
Now it seems that those "earnest", "hard work" or something is a cloud, completely is the father-in-law back to the river--thankless!

At that time, it was called a "cut chart", which was a very elementary and urgently needed stage of improvement. Why is it that this kind of "cut-chart" approach is low-level? One is the development of inefficient (to calculate the width of what); second, the reuse and extensibility of the structure is a Gaoyou salted duck egg; third, the future of the maintenance of the page is Tuo Panda will be (dislocation and other bugs like the same as the debt Zooey visit).

For example, this type of width calculation element stitching is like using a sturdy brick house, a piece of pile up. The final page looks strong, but once the quake comes, the "house" collapses at lightning speed, while the flat wooden houses can always survive a strong earthquake. Have you ever noticed that when the typhoon comes, the first thing to pour out is the seemingly sturdy poles, but never heard of the willow being blown down by the wind.

The use of width calculation + horizontal stitching is not only a waste of energy, development costs, the final implementation of the page is actually more fragile. To give an example of a practical point, such as the layout of the Sina Weibo content list, see:

I used Firebug to look at the way it was laid out, and the result was a fixed-width floating layout. Left side picture left floating, width 56 pixels, right content 484 pixels, right floating. As shown in the following:

This is a relatively simple two-column layout, I estimate a lot of peers will think, here should be width-limited, floating around, this is the current mainstream layout. But the mainstream approach is not necessarily the best approach, for example, there is no left and right padding/margin/border properties, so the width of the sidebar (484px) to determine whether it seems relatively simple (in fact, it is necessary to measure, which is avoidable labor costs); Its extensibility and reusability is completely failed, first of all, the list here can not be placed in a 500-pixel-wide div (without reusability), if later, if the site revision, the overall width of the increase, then obviously, here the width of the recalculation, which is missing the scalability, and this floating layout will bring some side effects, The first is the cost of the code for the float itself, followed by the cost of clearing the float (see). //zxx: Here width:100% let Ie6/7 under Li element haslayout, can fix floating collapse problem, but the individual is not recommended this practice, if later this label need to increase the left and right margin/padding value, then there is work.

Therefore, if the CSS modularity and reusability as the basic requirements, the layout here is obviously "no width", the maximum use of the characteristics of the label itself, so that the cost of CSS code is small, but also conducive to future expansion and maintenance, why not?
I myself boil down to this "no-width" criterion is not a random yy imagined, is the time to "modularity and reusability" as the basic requirements of the page layout of the inevitable product. Fixed width values limit the reusability and extensibility of page content, so for a page layout to be highly reusable and extensible, we need to follow the "no width" guideline.

Whether we are "page-cut" or "page refactoring" may be reflected in small details and implementations.

The practice of "no width" criterion

If the "no width" criterion really has its value, you may have an answer after reading the following example. Or an example of the above Vivian Hsu Weibo:
First, you can click here: "No width" benchmark comparison demo

You will see something like the following:

Although the top two microblog lists show the same, the layout method is different, one has width and one is no width. What is the "no-width" criterion that has been mentioned many times in this article? We can do a little test, we can see the difference and change, is to modify the width of the list box, for example, change to 500 pixels, see, and then click the OK button:

The result will be as follows:

As you can see, this precise width value of the fixed width layout limits the adaptability of the layout, in other words, the fixed-width layout restricts the modularity and subsequent reusability of the content, the extensibility, and the reduction of fault tolerance, which is why I put forward the "no width" rule very early.

Iv. realization of "no width"

Here I would like to make it clear that the term "no width" refers to the absence of a fixed width value (especially the width value in px, EM depends on the specific situation, and the percent score is not in it). The use of "no width" to achieve a variety of layout of the content of a lot, in order not to deviate from the theme, I "Matter", only simple talk about the above Vivian Hsu Szeto Weibo "no width" implementation.

This is a relatively simple and relatively basic two-column layout, generally this layout we need to use some of the usual will bring us trouble, some of its own barbed CSS properties, that is, float and Position:absolute properties, I in the " Absolute absolute positioning of the non-absolute location usage "in the article, I have mentioned this point: the absolute element with no left/top value and the float element are two bastards, the same is" parcel and destruction ", but, although many times, This kind of destruction can cause us some trouble (for example, to clear the height of the collapse caused by the float), but there are two sides to everything, and we can sometimes take advantage of this destructive feature to help us with a more resilient layout.

Because the left side of the Avatar Floating (float:left) in the IE6 there will be a magical 3 pixel bug, so, I personally prefer to use the Position:absolute attribute, as long as this one property can be, and then, the right side of the content can be when the avatar does not exist for layout, Let's look at CSS and HTML code with Firebug and maybe we'll know what's going on:

Compared to the original code, I just put the avatar's 56 pixel width left floating and 484 pixel content width right floating change to Position:absolute and padding-left:76px, and then, the implementation of the effect is exactly the same, not only the code is less, layout is more extensible. At the same time, there is no need to clear the float and other code:

The entire layout of the CSS code is very refreshing, no floating, no calculation, no clear floating, and strong extensibility.

. Abs{position:absolute;}. pl76{padding-left:76px;}

Before a lot of colleagues questioned my CSS architecture, naming and other related content, I can understand, after all, many people grow to a certain stage, will be trapped in their own construction of the seemingly golden wall, will inevitably use the vision of the wall in the outside world. The above layout, if in my CSS schema, are directly from the Library (General Library and site library), write the page does not move the CSS file, so I have enough time every day to write articles, focus on the latest foreign front-end development.

Of course, in fact, no width layout still have a lot of details to pay attention to, in terms of absolute positioning, there is a lot of content, this is still on your own to figure out, I do not carefully described here.

The so-called "great minds alike", Absolute's no-width positioning method is also Google's biggest competitor Facebook in the profile dynamic list uses the location method:

However, the absolute location of the Facebook is located in the label, the jacket relative attribute restrictions, the advantage is that I can directly ignore the above mentioned a lot of attention to the details, and easy to understand, but not the amount of CSS code, overhead, development costs are relatively large. So, the personal tradeoff, or directly outside the tag naked Absolute property method is better.

Also, today I went to the Facebook page friends dynamic list of code, NND, found a very good method, float plus Table-cell method (Table-cell the width of thousands but still well-laid, very magical), I think, Probably because the foreign basically does not bird IE6 browser's sake, therefore will be bold to use the Display:table-cell attribute, this method wants to be prevalent in the country, still need some time.

This adaptive layout method method I first saw that there was time to study.

If you do not mind hack, or you do not bird IE6, this article Weibo list of Position:absolute directly to Float:left is also possible.

Conclusion of 51-point extension

I think we should accurately understand the "no width" criterion mentioned in this article, which is the product of modularity and reusability, because the fixed width value is one of the most important reasons to limit the reusability of modules, so the "no width" criterion is proposed.

Therefore, we should not go to the word, say "no width element" refers to the absence of the width property, but to consider whether the layout of the width of the value of the impact of the layout of the future reusability and extensibility. If this width does not affect the reusability of the layout, such as the Vivian Hsu profile width of this example, this is a uniform fixed width and does not affect the adaptive layout of our layouts, and is not within the scope of the "no width" criterion.

This article shows the "No width" layout method is actually a relatively basic layout method, the situation of the Web page is very different, there are many other "no width" technique, which requires you to explore in the future development.

Finally, it is important that if you refactor the page is more concerned about the implementation of the current effect, for some future changes do not mind, then you do not have to put the content of this article at heart, it is next door Wang er grandma nagging it.
Also, this article once again take Sina Weibo layout/code example, there is no contempt for any disrespect of the meaning, mainly because I basically only play Sina Weibo, take to do examples more convenient. In fact, the code of this thing, good or bad is not only look at the surface that something, team ah, norms ah, inheritance ah, a lot of factors, Sina Weibo is an excellent product, inside the front-end code is also worth learning.

Well, say these, after all, the qualifications are limited, inevitably there is inaccurate description of the place, welcome to correct, also welcome the exchange.

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=1152

[CSS] Page refactoring "no width" criterion of "Xin Three no Criteria"