CSS模塊化思想的優(yōu)勢
互聯(lián)網(wǎng) 發(fā)布時間：2009-04-02 19:37:46 作者：佚名 
我要評論
我要評論網(wǎng)頁制作Webjx文章簡介：名字，你看名字多重要，我不太清楚,我寫書的話我的書被人改變名稱去誤導別人我是不喜歡的,這是我一直說的作為一個技術人員應當遵守的準則——互聯(lián)網(wǎng)創(chuàng)作共享協(xié)議,我不能抄一個剛入門的小朋友Idea（因為他們思維沒被
名字，你看名字多重要，我不太清楚。我寫書的話我的書被人改變名稱去誤導別人我是不喜歡的。這是我一直說的作為一個技術人員應當遵守的準則——互聯(lián)網(wǎng)創(chuàng)作共享協(xié)議。我不能抄一個剛入門的小朋友Idea（因為他們思維沒被禁錮），然后換一套名稱和說法說是自己的。
寫到這里回看下，順帶改了改標題變成《這將是一場革命》系列的第二篇關于CSS的文章算了。上面說完不對的，下面給大家看看一個我最近剛接手的一個新版項目代碼段：
HTML片斷：
<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>
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)勢在于哪：
- 可以半自動化的取用當前已有的模塊來節(jié)省代碼開發(fā)時間以及精力。 可以高度自由化的適應任何產(chǎn)品經(jīng)理、任何老板的不同變態(tài)需求。 任何關于表現(xiàn)上面的修改不需要動用到開發(fā)人員，不需要功能測試。 CE數(shù)據(jù)監(jiān)測綁定到id，不需要重新調整接口。 每個人擔任單個模塊的快速迭代開發(fā)。
另外就代碼而言。標題就是標題，內(nèi)容就是內(nèi)容；總不會那種歪曲事實、自己打自己嘴巴的狀態(tài)。
引用內(nèi)容：
我有個怪癖。我很喜歡在面試的時候我總是要先考面試人XHTML。就好像以前師傅招收學徒一樣，能力和慧根屬其次，人品首當其沖。
我以為，XHTML好比一個人的本質，CSS好比人的處事方式和態(tài)度，JS好比人做事的行為以及作風。三者的分離再加上些周邊的SEO、人機交互也就是我們所說的網(wǎng)站重構，也就是一個很不錯的人。之前總是有一部分人認為CSS就是網(wǎng)站的最主要的元素，其實自然而然的也就代表了一種人生觀。的確，一個人沒有好的處事方式和態(tài)度很難在現(xiàn)在的社會很好的存活；但是這個處事的方式和態(tài)度位置過于偏重了，就成了一個善于欺騙、做事不擇手段的人。
這個是一直想說的，有了CSS你可以將左右順序變成右左順序，他就是一個網(wǎng)頁中的魔術師。你總不能把他亂用，去成了一個善于欺騙、做事不擇手段的人。
相關文章
- 本文的核心觀點為CSS的合并與模塊化，似乎與前一篇文章“CSS樣式的再分離”有矛盾，其實不然，分離可以精簡CSS代碼，合并也可以精簡CSS代碼，一切都是權衡,本文的“合并”2013-01-11
- 原生Js因jQuery的"write less,do more"變得極簡, Html因語義化編碼變得簡明, 那么, 有沒有一種方式讓Css也更加的高效精致呢? 當然有, 那便是模塊化編碼.2011-01-27
- 最近被“模塊化”纏身，又是文章又是PPT的，想了很多相關的東西，整理下我這段時間對于“模塊化”的思考，大多都是我自己從事頁面重構這份工作的經(jīng)驗和理解，在一定程度上2009-06-26
- 網(wǎng)頁制作Webjx文章簡介：去過宜家的同學應該都有注意到，宜家的家具基本都是組合的，可拆裝,模塊化的特點也是這樣，可以組合，相對獨.立，在需要的時候可以很方便的加上,那2009-04-02
- 網(wǎng)頁制作Webjx文章簡介：我沒有看過CSS模塊化的相關書籍，所以我下面說的不一定正確，但是在工作中，我會用我理解的模塊化方式提高工作效率，我理解的模塊化，主要分為兩類2009-04-02
- 網(wǎng)頁制作Webjx文章簡介：這里著重講一下模塊化開發(fā)為后期維護帶來的好處！ 首先，不管了不了解，鬼哥的這篇文章都可以看一下，從宜家的家具設計講模塊化ht2009-04-02
- 在Twinsen Liang的博客上看到一篇名為語義化單單的限定在html么？的文章，文中主要是提及了CSS的命名規(guī)則，仔細閱讀后，我認為這個其實就是模塊化思想。（作者也提了這一點2009-02-04
CSS模塊化設計——從空格談起-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
引子： 今天在藍點看了Yang的博客《CSS樣式表中繼承關系的空格與不空格》，思考了一下，本來想寫《CSS樣式的復合定義與復合調用及簡單的模塊化設計》，但是內(nèi)容太大，還是2008-10-17- 這篇文章主要介紹了css模塊化方案，css的模塊化方案可能和js的一樣多，下面簡單介紹幾種主要的模塊方案，非常具有實用價值，需要的朋友可以參考下2019-01-09