CSS模块化思想的优势
互联网 发布时间：2009-04-02 19:37:46 作者：佚名 
我要评论
我要评论网页制作Webjx文章简介：名字，你看名字多重要，我不太清楚,我写书的话我的书被人改变名称去误导别人我是不喜欢的,这是我一直说的作为一个技术人员应当遵守的准则——互联网创作共享协议,我不能抄一个刚入门的小朋友Idea（因为他们思维没被
名字，你看名字多重要，我不太清楚。我写书的话我的书被人改变名称去误导别人我是不喜欢的。这是我一直说的作为一个技术人员应当遵守的准则——互联网创作共享协议。我不能抄一个刚入门的小朋友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;
}
大家可以看到模块化思想的优势在于哪：
- 可以半自动化的取用当前已有的模块来节省代码开发时间以及精力。 可以高度自由化的适应任何产品经理、任何老板的不同变态需求。 任何关于表现上面的修改不需要动用到开发人员，不需要功能测试。 CE数据监测绑定到id，不需要重新调整接口。 每个人担任单个模块的快速迭代开发。
另外就代码而言。标题就是标题，内容就是内容；总不会那种歪曲事实、自己打自己嘴巴的状态。
引用内容：
我有个怪癖。我很喜欢在面试的时候我总是要先考面试人XHTML。就好像以前师傅招收学徒一样，能力和慧根属其次，人品首当其冲。
我以为，XHTML好比一个人的本质，CSS好比人的处事方式和态度，JS好比人做事的行为以及作风。三者的分离再加上些周边的SEO、人机交互也就是我们所说的网站重构，也就是一个很不错的人。之前总是有一部分人认为CSS就是网站的最主要的元素，其实自然而然的也就代表了一种人生观。的确，一个人没有好的处事方式和态度很难在现在的社会很好的存活；但是这个处事的方式和态度位置过于偏重了，就成了一个善于欺骗、做事不择手段的人。
这个是一直想说的，有了CSS你可以将左右顺序变成右左顺序，他就是一个网页中的魔术师。你总不能把他乱用，去成了一个善于欺骗、做事不择手段的人。
相关文章
- 本文的核心观点为CSS的合并与模块化，似乎与前一篇文章“CSS样式的再分离”有矛盾，其实不然，分离可以精简CSS代码，合并也可以精简CSS代码，一切都是权衡,本文的“合并”2013-01-11
- 原生Js因jQuery的"write less,do more"变得极简, Html因语义化编码变得简明, 那么, 有没有一种方式让Css也更加的高效精致呢? 当然有, 那便是模块化编码.2011-01-27
- 最近被“模块化”缠身，又是文章又是PPT的，想了很多相关的东西，整理下我这段时间对于“模块化”的思考，大多都是我自己从事页面重构这份工作的经验和理解，在一定程度上2009-06-26
- 网页制作Webjx文章简介：去过宜家的同学应该都有注意到，宜家的家具基本都是组合的，可拆装,模块化的特点也是这样，可以组合，相对独.立，在需要的时候可以很方便的加上,那2009-04-02
- 网页制作Webjx文章简介：我没有看过CSS模块化的相关书籍，所以我下面说的不一定正确，但是在工作中，我会用我理解的模块化方式提高工作效率，我理解的模块化，主要分为两类2009-04-02
- 网页制作Webjx文章简介：这里着重讲一下模块化开发为后期维护带来的好处！ 首先，不管了不了解，鬼哥的这篇文章都可以看一下，从宜家的家具设计讲模块化ht2009-04-02
- 在Twinsen Liang的博客上看到一篇名为语义化单单的限定在html么？的文章，文中主要是提及了CSS的命名规则，仔细阅读后，我认为这个其实就是模块化思想。（作者也提了这一点2009-02-04
CSS模块化设计——从空格谈起-CSS教程-网页制作-网页教学网
引子： 今天在蓝点看了Yang的博客《CSS样式表中继承关系的空格与不空格》，思考了一下，本来想写《CSS样式的复合定义与复合调用及简单的模块化设计》，但是内容太大，还是2008-10-17- 这篇文章主要介绍了css模块化方案，css的模块化方案可能和js的一样多，下面简单介绍几种主要的模块方案，非常具有实用价值，需要的朋友可以参考下2019-01-09
最新评论