别紧张，只是CSS裸奔节又到了。

4月9日是今年的CSS Naked Day，每年到这个日子就会看到大大小小的网站、Blog去掉CSS样式表，让网站”裸奔”，故这天也叫”CSS裸奔节”。

这个日子是为了推广CSS及XHTML等W3C标准页面代码而设的，更能突出网站在没有CSS的情况下代码结构是不是够清晰，其实我的Blog是一个反面例子，去掉CSS后作为主体的Post列表出现的太靠下了~

我使用的是Aja Lapus做的WordPress插件来实现的效果，也可以到CSS Naked Day页面去看其他实现方法。

最后，基于大家现在什么节都过的心理，在这里说一句：CSS裸奔节快乐！

Technorati : CSS, CSS Naked Day, CSSNakedDay08, W3C, XHTML, 裸奔

不可否认，这种方法确实减少了CSS文件里的HTTP请求数，但是图片的更新和配置比较有难度，且半透明和不透明图片最好分开打包。

最后，也许是我胡思乱想，这种方法如果继续发展下去，完全可以省去前端操作人员（网页制作、编辑）用Photoshop切割图片的工序，会否变成引用原设计图直接作为资源图片呢？

Technorati : CSS, CSS Sprites, Google, XHTML, Yahoo

我的Blog没事，这是在过节呢，CSS Naked Day，在4月5号这天参加该活动的网站都会去掉所有CSS，用来支持网页标准。

我用了Wordpress的插件，每年只在4月5日去掉CSS，过了这天就会恢复过来~

Technorati : CSSNakedDay, W3C, css, 裸体

无意间发现文章列表的页面代码写得很奇怪，首先他们用ul做文章列表这没错，接着又用另一个ul来放时间，之后用一个table把两部分拼起来，做成列表标题和时间都对齐的效果，如下（稍微调整了一下）：

<table width="97%" cellspacing="5" cellpadding="0" border="0" align="center">
<tr>
<td width="85%"><ul>
<li>· <a href="javascript:;">[北京]暴跌千元!32寸HDMI接口液晶电视仅3999</a> </li>
<li>· <a href="javascript:;">[北京]封杀国产!飞利浦42寸液晶迅猛跌破9000</a> </li>
<li>· <a href="javascript:;">[广州]再降1000 三星40寸LA40F71B售价21999元</a> </li>
<li>· <a href="javascript:;">[北京]国产已成往事!LG高端IPS屏液晶跌破8000</a> </li>
<li>· <a href="javascript:;">[北京]世界顶级面板!三星40寸液晶电视欲破万</a> </li>
<li>· <a href="javascript:;">[北京]LG低价埋葬国产!42英寸可录像液晶疯降</a> </li>
</ul></td>
<td width="15%"><ul>
<li>[ 02-28 ]</li>
<li>[ 02-27 ]</li>
<li>[ 02-27 ]</li>
<li>[ 02-26 ]</li>
<li>[ 02-26 ]</li>
<li>[ 02-12 ]</li>
</ul></td>
</tr>
</table>

可以看出废码那是相当的多，而且语义很混乱，其实一个ul就够了，配合CSS做出对齐效果很简单，以下是我给出的代码：

<style type="text/css">
.list{
width:398px;
font-size:12px;
float:left;
}
.list ul{
display:block;
margin:0px;
padding:0px;
width:100%;
float:left;
}
.list ul li{
text-align:left;
display:block;
width:100%;
margin:2px 0px;
padding:0px;
list-style-position:inside;
float:left;
}
.list ul li a{
float:left;
display:block;
}
.list ul li span{
font-size:12px;
display:block;
float:right;
}
</style>

<div class="list">
<ul>
<li><a href="javascript:;">[北京]暴跌千元!32寸HDMI接口液晶电视仅3999</a> <span>[ 02-28 ]</span></li>
<li><a href="javascript:;">[北京]封杀国产!飞利浦42寸液晶迅猛跌破9000</a> <span>[ 02-27 ]</span></li>
<li><a href="javascript:;">[广州]再降1000 三星40寸LA40F71B售价21999元</a> <span>[ 02-27 ]</span></li>
<li><a href="javascript:;">[北京]国产已成往事!LG高端IPS屏液晶跌破8000</a> <span>[ 02-26 ]</span></li>
<li><a href="javascript:;">[北京]世界顶级面板!三星40寸液晶电视欲破万</a> <span>[ 02-26 ]</span></li>
<li><a href="javascript:;">[北京]LG低价埋葬国产!42英寸可录像液晶疯降</a> <span>[ 02-12 ]</span></li>
</ul>
</div>

效果见这里

上面代码的div是用来从外层控制列表样式的，可以用其他块级元素替换，li里面的span用来放时间，也可以使用div等元素替换，另外其他所需的样式（如标题前的点）都可以用CSS定义，灵活度上升不少，不知道这样实现算不算是Unobtrusive的？

试图用css编码， 而不是用css设计
设计人员仍然是photoshop画页面，然后切割，然后用css去实现。 这个往往导致的结果就是产生大量不必要的垃圾代码，xhtml的代码结构为了实现美工设计的某些其实微不足道的效果而变得复杂不堪。

感觉上面写的就和自己的工作及其相似：制作人员一遍又一遍得用CSS去实现Photoshop的设计，垃圾代码是不可避免的。

反过来想想，为什么不能直接让设计人员用CSS去设计网站呢？

以上观点有人持反对意见：

对美工而言，精通CSS，然后考虑到CSS的各种属性和限制去做设计，可能会限制他的创造力。所以我以为美工更应该清晰页面的结构，在页面设计的过程中，做到针对结构设计更为实际。在维持一个大局风格基础上，在类似的结构上有意识的样式统一，同时页面各个部分的承启转合清晰一致，那么页面制作人员也能方便的进行页面拆合，维护起来也方便。
来源：“web 2.0时代的网页设计风格” 读后感

我的观点是：使用CSS设计网站确实会限制创造力，这没错，但是功能服务性网站比较特殊，所以发挥创造力需要限制在一定范围里，这个范围包括对用户的易用性、可用性，以及对网站的结构化和可维护性。

换句话，就是在CSS正常发挥布局作用的前提下，在一个又一个的框框（也就是DIV）里面，发挥设计人员的最大创造力（美观和易用），这样可以尽量减少垃圾代码的堆积。

另外，老冒的想法有点过于理想了，”让更多的程序员参与到设计之中,让整个项目的人都think in css”，但是我真的希望所有相关人员都可以Think in CSS。

p.s.对于技术和美术的页面问题，包括CSS和XHTML，我现在的解决办法是，美术用CSS和XHTML制作页面，然后将页面根据DIV布局切块，每块里面只有纯XHTML的代码（可以适量有class和id），然后由技术人员针对单块内容的规则进行程序嵌入，最后由制作人员进行整合。这样做很麻烦，但是可以减少部分不必要的麻烦。

Technorati : CSS, WebStandards, XHTML, 网站设计