First of all, I want to state that I am not against gridding in design, I am against gridding in reconstruction. This should specifically refer to the YUI method of class name binding gridding. You can take a look at the following piece of code:
Example Source Code
[www.downcodes.com] <div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<div class="yui-u first"></div>
<div class="yui-u"></div>
</div>
</div>
</div>
You can clearly see that the name yui-u or yui-g here is meaningless. There are also firsts related to performance. I don’t know that there is a sentence in the PPT accompanying the book "Website Reconstruction" that everyone has read - "After removing the appearance tags from the page, redesigning the existing site and content will become very labor-saving ( At the same time, it is much cheaper). If you want to change the output of the site, you only need to change the style sheet without changing the page itself. "The code like the one above cannot achieve the separation of structure, performance, and behavior. Changes will cause the following problems:
When changing the performance, the HTML must be moved. A beautiful modification requires moving three work lines, which consumes a lot of human resources.
The fifth box called "first" will appear.
A box called "180 wide" that is actually 240 wide will appear.
There will be a layout called "four-column" that is actually three columns.
There will be a word called "blue" that is actually red.
These are equivalent to the "left_box" and "right_box" that are popular among many people now. After a quick revision, they became the "right_box" on the left. Isn't this equivalent to distorting the truth? But actually the most important thing is the first point. Is this way of working different from our previous way of working with table layout? If you ask for a style change, the whole company (design, page, development, functional testing, CE data monitoring) will follow you. This is very unwise.
After writing this, I looked back and changed the title to become the second article about CSS in the "This Will Be a Revolution" series. If the above is incorrect, let me show you a code snippet from a new version of a project I just took over recently:
Example Source Code
[www.downcodes.com] <div id="index_news" class="mode">
<h3 class="title">Public welfare news</h3>
<div class="content">
<ul>
<li><a href="#">News title, news title, news title, news title</a></li>
<li><a href="#">News title, news title, news title, news title</a></li>
<li><a href="#">News title, news title, news title, news title</a></li>
<li><a href="#">News title, news title, news title, news title</a></li>
<li><a href="#">News title, news title, news title, news title</a></li>
<li><a href="#">News title, news title, news title, news title</a></li>
<li><a href="#">News title, news title, news title, news title</a></li>
<li><a href="#">News title, news title, news title, news title</a></li>
</ul>
</div>
<a class="more" href="#">More</a> </div>
Example Source Code
[www.downcodes.com] .mode{
position:relative;
float:left;
font-size:12px;
}
.mode h3.title,
.mode h4.title{
color:#234C00;
padding:5px 10px;
font-size:14px;
}
.mode .more{
top:5px;
right:10px;
font-size:12px;
color:#4282ab;
position:absolute;
}
.mode .content{
clear:both;
}
.mode .content:after {
content:"";
display:block;
height:0;
line-height:0;
clear:both;
visibility:hidden;
}
#index_news.mode,
#index_bbs.mode,
#index_area.mode{
background:url(small_gray_grid.png) repeat-y -400px bottom;
width:200px;
margin:5px 0 5px 5px;
}
#index_news.mode h3.title,
#index_bbs.mode h3.title{
background:url(small_gray_grid.png) no-repeat -200px top;
}
#index_news.mode .content,
#index_bbs.mode .content,
#index_area.mode .content{
background:url(small_gray_grid.png) no-repeat -600px bottom;
display:table;
}
You can see the advantages of modular thinking:
Existing modules can be used semi-automatically to save code development time and effort.
It can be highly freely adapted to the different abnormal needs of any product manager and any boss.
Any changes to the performance above do not require developers to be involved, and no functional testing is required.
CE data monitoring is bound to the ID, and there is no need to readjust the interface.
Each person is responsible for the rapid iterative development of a single module.
Also as far as code is concerned. The title is the title, and the content is the content; you will never distort the facts and slap yourself in the mouth.
I have a quirk. I love that during interviews I always test the interviewer's XHTML first. Just like when a master recruited an apprentice in the past, ability and intelligence were secondary, and character was the first priority.
I believe that XHTML is like a person's essence, CSS is like a person's way and attitude of doing things, and JS is like a person's behavior and style of doing things. The separation of the three plus some surrounding SEO and human-computer interaction is what we call website reconstruction, which is a very good person. In the past, some people always thought that CSS was the most important element of the website. In fact, it naturally represents a outlook on life. Indeed, it is difficult for a person to survive in today's society without a good way and attitude of doing things; but if the way and attitude of doing things are too focused, he will become a person who is good at deceiving and does things unscrupulously.
This is what I have always wanted to say. With CSS, you can change the left-right order into the right-left order. It is a magician on the web page. You can't misuse him to become a person who is good at deceiving and does things unscrupulously.