深山老林

2006-06-07[原]关于CSS样式命名中的下划线

长久以来，一直习惯了在命名CSS样式名时使用下划线“_”做为单词的分隔符，这也是在写JS时惯用的写法。

用过CSS hack的朋友应该知道，用下划线命名也是一种hack，如使用“_style”这样的命名，可以让IE外的大部分浏览器忽略这个样式的定义，所以使用“_”做为命名时的分隔符是不规范的。在做CSS检查时会出现错误提示。

为此得找一个能代替下划线而又合规范的符号，当然不是一定要用这种分隔符之类的，只是个人习惯问题。

做了个小测试，将下划线分别用了“~”、“$”、“`”、“&”和“－”去代替，结果只有“－”号是可以使用的，而且对JS的支持也正常，看下测试：

-------------------------------CSS---------------------------------
 .try-a{ color:#00f; }
 .try~a{ color:#00f; }
 .try`a{ color:#00f; }
 .try&a{ color:#00f; }
 .try$a{ color:#00f; }
 
 .try-b{ color:#f00; }
 .try~b{ color:#f00; }
 .try`b{ color:#f00; }
 .try&b{ color:#f00; }
 .try$b{ color:#f00; }
----------------------------------------------------------------------

-----------------------------HTML----------------------------------
<div id="a" class="try-a">try1</div>
<div id="b" class="try~a">try2</div>
<div id="c" class="try`a">try3</div>
<div id="d" class="try&a">try4</div>
<div id="e" class="try$a">try5</div>

<input type="button" value="ok" onclick="b();" />
----------------------------------------------------------------------

---------------------------------JS----------------------------------
function b(){
  document.getElementById("a").className="try-b";
  document.getElementById("b").className="try~b";
  document.getElementById("c").className="try`b";
  document.getElementById("d").className="try&b";
  document.getElementById("e").className="try$b";
 }
----------------------------------------------------------------------

结果是“try1”变成了红色，显示正常。不过在CSS定义里，经常会用到ID选择符，如果在页面中的ID命名中使用了“_”，就免不了在CSS样式里出现下划线“_”了，所以在此还得注意在ID的命名上也要避免使用下划线。

注：由于在JS脚本里有时会用到document.idName这样的调用，如果ID中使用“－”号的话会被解释成是减的操作，所以使用ID选择符时不在此建议范围，当然在写样式的时候，也不建议过多的使用ID选择符。

2006-06-06暂住证

今天收到通知，说要办暂住证，想起新东方的“老罗”说过，他是绝不办暂住证的，因为他不愿在自己的家里还要办个暂住什么的……

虽然我也有同样的感慨，无耐自己太“渺小”了，自定义能力有限，只能inhert外来的框框条条～

2006-05-29[原]显示或隐藏层的JS函数

/*
========================
函数：显示或隐藏层
showDiv(divId_array,showLocality_array)
参数说明：
divId_array 所有要操作的层ID，用逗号分隔
showLocality_array 所有要显示的层在参数DivIdArray所对应的位置。为“0”或空时全部显示，设为负数则全部隐藏。
例如：showDiv('div3,div1,div2','2,3')为显示第二个(div1)和第三个层(div2)，第一个层(div3)将被隐藏。
========================
*/
function showDiv(divId_array,showLocality_array)
{
 var div_array = new Array();
 var locality_array = new Array();
 var intLocality;//showLocality_array数组长度
 var intDiv;//div_array 数组长度
 var intTemp = 1;//临时变量
 var intTmp = 1;//临时变量
 
 //初始化
 if (divId_array)
 {
  div_array = divId_array.split(",");
 }else{
  intDiv = 0;
 }
 if (showLocality_array)
 {
  locality_array = showLocality_array.split(",");
  intLocality = locality_array.length;

  for (var n = 0;n < intLocality;n++)
  {
   intTemp *= locality_array[n];
   
  }
  if (intTemp <= 0)
  {
   intLocality = intTemp;
  }else{
   intLocality = div_array.length;

  while (intLocality > 0)
  {
   intLocality -= 1;
   document.getElementById(""+ div_array[intLocality] +"").style.display = "none";
  }
   intLocality = 1;
  }
 }else{
  intLocality = 0;
 }

 //显示指定层
 if (intDiv != 0 && intLocality >0)
 {
  intDiv = div_array.length;
  intLocality = locality_array.length;
  
  //排序locality_array 数组
  for (var n = 0;n < intLocality;n++)
  {
   intTemp = locality_array[n];
   
   for (var m = n + 1;m < intLocality;m++)
   {
    if (locality_array[n] > locality_array[m])
    {
     locality_array[n] = locality_array[m];
     locality_array[m] = intTemp;
     intTemp = locality_array[n];
    }
   }
  }
  
  intLocality = locality_array.length;
  intTemp = 0;
  
  //
  while (intTemp < intLocality)
  {
   if ((locality_array[intTemp] - 1) < div_array.length)
   {
    intTmp = locality_array[intTemp] - 1;
    document.getElementById(""+ div_array[intTmp] +"").style.display = "block";
   }
   
   intTemp += 1;
  }
 }
 else if(intLocality == 0)
 {//显示所有层
  intLocality = div_array.length;

  while (intLocality > 0)
  {
   intLocality -= 1;
   document.getElementById(""+ div_array[intLocality] +"").style.display = "block";
  }
 }else{//隐藏所有层
  intLocality = div_array.length;

  while (intLocality > 0)
  {
   intLocality -= 1;
   document.getElementById(""+ div_array[intLocality] +"").style.display = "none";
  }
 }
}

2006-05-22小小的感想

学了几天互交设计，发现这东东还是很有意思的，有点像做导游，现在在哪、要做什么、去哪……让用户在不知觉中进“黑店”，买点“记念品”。

跟开始接触Web标准一样，主要要面对的还是思想上的转变问题，新事物总是有新的思维方式，很多的为什么，可是已经不是接受新事物那么简单了，更多的是要放弃原本已经根深的思维方式，甚至得要有“认错”的勇气，当别人问得你无语时，是生气？堵气？还是接受？

可最大的问题还是“无知”，虽然知道这是种新东西，不知才要学嘛，可是新东西不一定就是好的，在无法分辨“好坏”的情况下，是否要接受？我觉得这才是个最大的考验。在学Web标准是时候也是，一开始就被那些所谓的“高手”引到了“DIV+CSS”的路上，结果很多人都错误的以为Web标准就是用DIV布局去替代表格布局，结果页面从一堆表格标签换成了一堆DIV标签，页面变得更难维护。

知比不知好，但一知半解还不如不知好。

2006-05-16[转]DMMT样章——第一章 别让我思考

De Dream', Windy(http://www.DeDream.com)，2005年12月，翻译稿样

注：本书是DMMT第二版，将由机械工业出版社在2006年1月出版，这是第一章的翻译稿。

第一章 别让我思考
――Krug可用性第一定律

Michael，窗帘怎么打开了？
Kay Corleone，教父第二部

人们经常问我：
“如果我想保证网站容易使用，那么最重要的是什么？”

答案很简单，不是“重要的内容要放在两次点击之内”，或者“采用用户的语言”，甚至也不是“保持一致”。

而是……

别让我思考

多年以来，我一直在跟人们说，这是我的可用性第一定律。看过的网页越多，我就越坚信这一点。

这是最最重要的原则――它是在Web设计中，判别什么有用什么没用的终极法则。如果你只能记住一条可用性原则，那么就记住这一条 。

它意味着，设计者应该尽量做到，当我看一个页面时，它应该是不言而喻，一目了然，自我解释的。

我应该能明白它――它是什么意思，怎样用它――而不需要进行额外的思考。

不过，我们说的到底有多不言而喻？

呃，充分的不言而喻，就好象，你隔壁的邻居，她对你的网站主题毫无兴趣，也几乎不知道使用后退按钮，但她仍然可以看一眼你的主页，然后说，“噢，这是____。”（如果运气好的话，她会说：“噢，这是____。真是太好了！”当然，这是另外一回事了。）

这样来看：
当我看到一个不需要思考的网页时，脑袋里面浮现的会是：“嗯，这是____，那是____，我想要的东西在这里。”

图P12
这看起来象产品目录……
内存（Memory），Modem，啊，找到了，显示器（Monitor）。点击。
……这些是今天的促销产品。
当我看到一个需要思考的网页时，脑袋里面浮现的东西都会加上一个问号：

图P13
嗯，相当凌乱。我该从哪里开始？
为什么他们把它叫作这个？
我可以点这里吗？
这是导航？还是放在这里而已？
他们为什么把这个放在这里？
这两个链接看起来一样，是真的吗？

创建一个网站的时候，你要做的，就是去掉这些问号。

迫使我们思考的地方

网页上每项内容都有可能迫使我们停下来，进行不必要的思考。例如，名字。典型的罪魁祸首是那些很酷或者自以为很聪明的名字……

Windy 发表于2005年12月09日