首先聲明的我不是反對(duì)關(guān)于設(shè)計(jì)的網(wǎng)格化，我是反對(duì)重構(gòu)的網(wǎng)格化。這里應(yīng)該特指是YUI方式的類名綁定式的網(wǎng)格化。大家可以看看下面的一段代碼：


　　大家可以很清晰的看到這里的yui-u，或者yui-g他的名稱是并無(wú)意義的。還有與表現(xiàn)相關(guān)的first。不知道大家都看過(guò)的《網(wǎng)站重構(gòu)》一書(shū)當(dāng)時(shí)配同的PPT里面的一句話——“把頁(yè)面中的外觀標(biāo)記去除以后，重新設(shè)計(jì)現(xiàn)有的站點(diǎn)和內(nèi)容將變得非常節(jié)省人力 (同時(shí)便宜得多)。如果想改變站點(diǎn)的輸出，你只需要改動(dòng)一下樣式表就行了，而完全不必改動(dòng)頁(yè)面本身。”像上面的那段代碼不能達(dá)到結(jié)構(gòu)、表現(xiàn)、行為三者分離，如果強(qiáng)行改變會(huì)出現(xiàn)下面的一些問(wèn)題：

　　改變表現(xiàn)的時(shí)候必須動(dòng)到html，一次美觀上面的修改要?jiǎng)拥饺龡l工作線，極大的人力資源耗費(fèi)。
　　會(huì)出現(xiàn)排在第五個(gè)的叫做“first”的框
　　會(huì)出現(xiàn)實(shí)際為240寬的叫做“180寬”的框
　　會(huì)出現(xiàn)實(shí)際為三列的叫做“四列”的布局
　　會(huì)出現(xiàn)實(shí)際為紅色的叫做“blue”的字
　　這些也就是相當(dāng)于現(xiàn)在很多人流行的“left_box”和“right_box”，快速改版以后變成了在左邊的“right_box”。這不就是相當(dāng)于歪曲事實(shí)的真理么？但其實(shí)最重要的是第一點(diǎn)，這樣的工作方式和我們以往的table布局工作方式有差別么？你提個(gè)改個(gè)樣式需求，全公司（設(shè)計(jì)、頁(yè)面、開(kāi)發(fā)、功能測(cè)試、CE數(shù)據(jù)監(jiān)測(cè)）都跟著你去跑，這是很不智的。

　　寫到這里回看下，順帶改了改標(biāo)題變成《這將是一場(chǎng)革命》系列的第二篇關(guān)于CSS的文章算了。上面說(shuō)完不對(duì)的，下面給大家看看一個(gè)我最近剛接手的一個(gè)新版項(xiàng)目代碼段：



　　大家可以看到模塊化思想的優(yōu)勢(shì)在于哪：
　　可以半自動(dòng)化的取用當(dāng)前已有的模塊來(lái)節(jié)省代碼開(kāi)發(fā)時(shí)間以及精力。
　　可以高度自由化的適應(yīng)任何產(chǎn)品經(jīng)理、任何老板的不同變態(tài)需求。
　　任何關(guān)于表現(xiàn)上面的修改不需要?jiǎng)佑玫介_(kāi)發(fā)人員，不需要功能測(cè)試。
　　CE數(shù)據(jù)監(jiān)測(cè)綁定到id，不需要重新調(diào)整接口。
　　每個(gè)人擔(dān)任單個(gè)模塊的快速迭代開(kāi)發(fā)。
　　另外就代碼而言。標(biāo)題就是標(biāo)題，內(nèi)容就是內(nèi)容；總不會(huì)那種歪曲事實(shí)、自己打自己嘴巴的狀態(tài)。

　　我有個(gè)怪癖。我很喜歡在面試的時(shí)候我總是要先考面試人XHTML。就好像以前師傅招收學(xué)徒一樣，能力和慧根屬其次，人品首當(dāng)其沖。
　　我以為，XHTML好比一個(gè)人的本質(zhì)，CSS好比人的處事方式和態(tài)度，JS好比人做事的行為以及作風(fēng)。三者的分離再加上些周邊的SEO、人機(jī)交互也就是我們所說(shuō)的網(wǎng)站重構(gòu)，也就是一個(gè)很不錯(cuò)的人。之前總是有一部分人認(rèn)為CSS就是網(wǎng)站的最主要的元素，其實(shí)自然而然的也就代表了一種人生觀。的確，一個(gè)人沒(méi)有好的處事方式和態(tài)度很難在現(xiàn)在的社會(huì)很好的存活；但是這個(gè)處事的方式和態(tài)度位置過(guò)于偏重了，就成了一個(gè)善于欺騙、做事不擇手段的人。
　　這個(gè)是一直想說(shuō)的，有了CSS你可以將左右順序變成右左順序，他就是一個(gè)網(wǎng)頁(yè)中的魔術(shù)師。你總不能把他亂用，去成了一個(gè)善于欺騙、做事不擇手段的人。