CSS模塊化思想的優(yōu)勢

名字,你看名字多重要,我不太清楚。我寫書的話我的書被人改變名稱去誤導(dǎo)別人我是不喜歡的。這是我一直說的作為一個技術(shù)人員應(yīng)當(dāng)遵守的準(zhǔn)則——互聯(lián)網(wǎng)創(chuàng)作共享協(xié)議。我不能抄一個剛?cè)腴T的小朋友Idea(因?yàn)樗麄兯季S沒被禁錮),然后換一套名稱和說法說是自己的。
實(shí)想重提下那個話題,一直都在忙這忙那的沒時間。好不容易到一個周末了,原定安排是去D2的但是因?yàn)闀r間安排不過來,所以能抽空寫寫。早前的討論不了了之,其實(shí)這一點(diǎn)都不是Twinsen的風(fēng)格。
名字,你看名字多重要,我不太清楚。我寫書的話我的書被人改變名稱去誤導(dǎo)別人我是不喜歡的。這是我一直說的作為一個技術(shù)人員應(yīng)當(dāng)遵守的準(zhǔn)則——互聯(lián)網(wǎng)創(chuàng)作共享協(xié)議。我不能抄一個剛?cè)腴T的小朋友Idea(因?yàn)樗麄兯季S沒被禁錮),然后換一套名稱和說法說是自己的。sorry,我做不到。
不過其實(shí)這片文章只是Twinsen的一個想法了,可以說比較的瘋狂。另外順帶一提的是這里的是Twinsen的站點(diǎn),并不是騰訊的站點(diǎn)。這里的東西并不是代表騰訊的觀點(diǎn)和角度。
引用森林群的談話內(nèi)容:
另外說到網(wǎng)格的內(nèi)容,為什么我反對這個思想的流傳?首先聲明的我不是反對關(guān)于設(shè)計的網(wǎng)格化,我是反對重構(gòu)的網(wǎng)格化。這里應(yīng)該特指是 YUI方式 的類名綁定式的網(wǎng)格化。大家可以看看下面的一段代碼:
<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他的名稱是并無意義的。還有與表現(xiàn)相關(guān)的first。不知道大家都看過的《網(wǎng)站重構(gòu)》一書當(dāng)時配同的PPT里面的一句話——“把頁面中的外觀標(biāo)記去除以后,重新設(shè)計現(xiàn)有的站點(diǎn)和內(nèi)容將變得非常節(jié)省人力 (同時便宜得多)。如果想改變站點(diǎn)的輸出,你只需要改動一下樣式表就行了,而完全不必改動頁面本身。”像上面的那段代碼不能達(dá)到結(jié)構(gòu)、表現(xiàn)、行為三者分離,如果強(qiáng)行改變會出現(xiàn)下面的一些問題:
- 改變表現(xiàn)的時候必須動到html,一次美觀上面的修改要動到三條工作線,極大的人力資源耗費(fèi)。 會出現(xiàn)排在第五個的叫做“first”的框 會出現(xiàn)實(shí)際為240寬的叫做“180寬”的框 會出現(xiàn)實(shí)際為三列的叫做“四列”的布局 會出現(xiàn)實(shí)際為紅色的叫做“blue”的字
這些也就是相當(dāng)于現(xiàn)在很多人流行的“left_box”和“right_box”,快速改版以后變成了在左邊的“right_box”。這不就是相當(dāng)于歪曲事實(shí)的真理么?但其實(shí)最重要的是第一點(diǎn),這樣的工作方式和我們以往的table布局工作方式有差別么?你提個改個樣式需求,全公司(設(shè)計、頁面、開發(fā)、功能測試、CE數(shù)據(jù)監(jiān)測)都跟著你去跑,這是很不智的。
#p#
名字,你看名字多重要,我不太清楚。我寫書的話我的書被人改變名稱去誤導(dǎo)別人我是不喜歡的。這是我一直說的作為一個技術(shù)人員應(yīng)當(dāng)遵守的準(zhǔn)則——互聯(lián)網(wǎng)創(chuàng)作共享協(xié)議。我不能抄一個剛?cè)腴T的小朋友Idea(因?yàn)樗麄兯季S沒被禁錮),然后換一套名稱和說法說是自己的。
寫到這里回看下,順帶改了改標(biāo)題變成《這將是一場革命》系列的第二篇關(guān)于CSS的文章算了。上面說完不對的,下面給大家看看一個我最近剛接手的一個新版項(xiàng)目代碼段:
HTML片斷:
<div id="index_news" class="mode">
<h3 class="title">公益新聞</h3>
<div class="content">
<ul>
<li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li>
<li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li>
<li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li>
<li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li>
<li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li>
<li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li>
<li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li>
<li><a href="#">新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題,新聞標(biāo)題</a></li>
</ul>
</div>
<a class="more" href="#">更多</a> </div>
CSS片斷:
.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;
}
大家可以看到模塊化思想的優(yōu)勢在于哪:
- 可以半自動化的取用當(dāng)前已有的模塊來節(jié)省代碼開發(fā)時間以及精力。 可以高度自由化的適應(yīng)任何產(chǎn)品經(jīng)理、任何老板的不同變態(tài)需求。 任何關(guān)于表現(xiàn)上面的修改不需要動用到開發(fā)人員,不需要功能測試。 CE數(shù)據(jù)監(jiān)測綁定到id,不需要重新調(diào)整接口。 每個人擔(dān)任單個模塊的快速迭代開發(fā)。
另外就代碼而言。標(biāo)題就是標(biāo)題,內(nèi)容就是內(nèi)容;總不會那種歪曲事實(shí)、自己打自己嘴巴的狀態(tài)。
引用內(nèi)容:
我有個怪癖。我很喜歡在面試的時候我總是要先考面試人XHTML。就好像以前師傅招收學(xué)徒一樣,能力和慧根屬其次,人品首當(dāng)其沖。
我以為,XHTML好比一個人的本質(zhì),CSS好比人的處事方式和態(tài)度,JS好比人做事的行為以及作風(fēng)。三者的分離再加上些周邊的SEO、人機(jī)交互也就是我們所說的網(wǎng)站重構(gòu),也就是一個很不錯的人。之前總是有一部分人認(rèn)為CSS就是網(wǎng)站的最主要的元素,其實(shí)自然而然的也就代表了一種人生觀。的確,一個人沒有好的處事方式和態(tài)度很難在現(xiàn)在的社會很好的存活;但是這個處事的方式和態(tài)度位置過于偏重了,就成了一個善于欺騙、做事不擇手段的人。
這個是一直想說的,有了CSS你可以將左右順序變成右左順序,他就是一個網(wǎng)頁中的魔術(shù)師。你總不能把他亂用,去成了一個善于欺騙、做事不擇手段的人。
相關(guān)文章
- 本文的核心觀點(diǎn)為CSS的合并與模塊化,似乎與前一篇文章“CSS樣式的再分離”有矛盾,其實(shí)不然,分離可以精簡CSS代碼,合并也可以精簡CSS代碼,一切都是權(quán)衡,本文的“合并”2013-01-11
- 原生Js因jQuery的"write less,do more"變得極簡, Html因語義化編碼變得簡明, 那么, 有沒有一種方式讓Css也更加的高效精致呢? 當(dāng)然有, 那便是模塊化編碼.2011-01-27
- 最近被“模塊化”纏身,又是文章又是PPT的,想了很多相關(guān)的東西,整理下我這段時間對于“模塊化”的思考,大多都是我自己從事頁面重構(gòu)這份工作的經(jīng)驗(yàn)和理解,在一定程度上2009-06-26
通過宜家的家具設(shè)計方法學(xué)習(xí)CSS模塊化
網(wǎng)頁制作Webjx文章簡介:去過宜家的同學(xué)應(yīng)該都有注意到,宜家的家具基本都是組合的,可拆裝,模塊化的特點(diǎn)也是這樣,可以組合,相對獨(dú).立,在需要的時候可以很方便的加上,那2009-04-02- 網(wǎng)頁制作Webjx文章簡介:我沒有看過CSS模塊化的相關(guān)書籍,所以我下面說的不一定正確,但是在工作中,我會用我理解的模塊化方式提高工作效率,我理解的模塊化,主要分為兩類2009-04-02
- 網(wǎng)頁制作Webjx文章簡介:這里著重講一下模塊化開發(fā)為后期維護(hù)帶來的好處! 首先,不管了不了解,鬼哥的這篇文章都可以看一下,從宜家的家具設(shè)計講模塊化ht2009-04-02
- 在Twinsen Liang的博客上看到一篇名為語義化單單的限定在html么?的文章,文中主要是提及了CSS的命名規(guī)則,仔細(xì)閱讀后,我認(rèn)為這個其實(shí)就是模塊化思想。(作者也提了這一點(diǎn)2009-02-04
CSS模塊化設(shè)計——從空格談起-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
引子: 今天在藍(lán)點(diǎn)看了Yang的博客《CSS樣式表中繼承關(guān)系的空格與不空格》,思考了一下,本來想寫《CSS樣式的復(fù)合定義與復(fù)合調(diào)用及簡單的模塊化設(shè)計》,但是內(nèi)容太大,還是2008-10-17- 這篇文章主要介紹了css模塊化方案,css的模塊化方案可能和js的一樣多,下面簡單介紹幾種主要的模塊方案,非常具有實(shí)用價值,需要的朋友可以參考下2019-01-09