首先聲明的我不是反對關於設計的網格化,我是反對重構的網格化。這裡應該特指是YUI方式的類別名稱綁定式的網格化。大家可以看看下面的一段程式碼:
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>
大家可以很清楚的看到這裡的yui-u,或是yui-g他的名稱是沒有意義的。還有與表現相關的first。不知道大家都看過的《網站重構》一書當時配同的PPT裡面的一句話——「把頁面中的外觀標記去除以後,重新設計現有的網站和內容將變得非常節省人力(同時便宜得多)。改變會出現下面的一些問題:
改變表現的時候必須動到html,一次美觀上面的修改要動到三條工作線,極大的人力資源耗費。
會出現排在第五個的叫做「first」的框框
會出現實際為240寬的叫做「180寬」的框框
會出現實際為三列的叫做「四列」的佈局
會出現實際為紅色的叫做「blue」的字
這些也就是等於現在很多人流行的“left_box”和“right_box”,快速改版以後變成了在左邊的“right_box”。這不就是相當於扭曲事實的真理麼?但其實最重要的是第一點,這樣的工作方式和我們以往的table佈局工作方式有差別麼?你提個改個樣式需求,全公司(設計、頁面、開發、功能測試、CE數據監測)都跟著你去跑,這是很不智的。
寫到這裡回看下,順帶改了改標題變成《這將是一場革命》系列的第二篇關於CSS的文章算了。上面說完不對的,下面給大家看一個我最近剛接手的一個新版專案程式碼片段:
Example Source Code
[www.downcodes.com] <div id="index_news" class="mode">
<h3 class="title">公益新聞</h3>
<div class="content">
<ul>
<li><a href="#">新聞標題,新聞標題,新聞標題,新聞標題</a></li>
<li><a href="#">新聞標題,新聞標題,新聞標題,新聞標題</a></li>
<li><a href="#">新聞標題,新聞標題,新聞標題,新聞標題</a></li>
<li><a href="#">新聞標題,新聞標題,新聞標題,新聞標題</a></li>
<li><a href="#">新聞標題,新聞標題,新聞標題,新聞標題</a></li>
<li><a href="#">新聞標題,新聞標題,新聞標題,新聞標題</a></li>
<li><a href="#">新聞標題,新聞標題,新聞標題,新聞標題</a></li>
<li><a href="#">新聞標題,新聞標題,新聞標題,新聞標題</a></li>
</ul>
</div>
<a class="more" href="#">更多</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;
}
大家可以看到模組化思想的優勢在於哪:
可以半自動化的取用目前已有的模組來節省程式碼開發時間以及精力。
可以高度自由化的適應任何產品經理、任何老闆的不同變態需求。
任何關於表現上面的修改不需要動用到開發人員,不需要功能測試。
CE資料監測綁定到id,不需要重新調整介面。
每個人擔任單一模組的快速迭代開發。
另外就程式碼而言。標題就是標題,內容就是內容;總是不會那種扭曲事實、自己打自己嘴巴的狀態。
我有個怪癖。我很喜歡在面試的時候總是要先考面試人XHTML。就好像以前師傅招收學徒一樣,能力和慧根屬其次,人品首當其衝。
我以為,XHTML好比一個人的本質,CSS好比人的處事方式和態度,JS好比人做事的行為以及作風。三者的分離再加上些週邊的SEO、人機互動也就是我們所說的網站重構,也就是一個很不錯的人。之前總是有一部分人認為CSS是網站的最主要的元素,其實自然而然的也代表了一種人生觀。的確,一個人沒有好的處事方式和態度很難在現在的社會很好的存活;但是這個處事的方式和態度位置過於偏重了,就成了一個善於欺騙、做事不擇手段的人。
這個是一直想說的,有了CSS你可以把左右順序變成右左順序,他就是一個網頁中的魔術師。你總不能把他亂用,去成了一個善於欺騙、做事不擇手段的人。