如何把css命名的更好一些

刚开始学习CSS的的时候就认为CSS命名是一件重要的，但又不简单的事。说它重要是因为html与CSS大部分都是能过id,class的名字而联系在一起。有人会说命名只不是个人的习惯而以，时候长了就有自己的命名方式了。可是不少人命名方式实在太差了！那如何命名才好呢？也有人说过这个问题，但也只不过指出了一个方向，不应该用什么left,right,top这种方式去命名，而要使用功能去命名，如：menu,siderbar,footer,网上也有最常见命名文章这里就不在重复。

 

使用功能命名，那到底命名有没有什么规律呢可言呢？答案是有。许多命名基本上是比较死的。我们基本不用发挥太多的想象力去创造。我举个例子说说，如菜单中的当前已选项或已激活项比较常用的有：selected,current,active,或都你now也可以，你会问我是怎么知道这么多的，其实很简单，我看别人的代码看的多了，所以知道的。我们如何把命名写的好，写的优秀方法也不难，只是需要你去不断学习，从哪里学，就是从别人的代码里学习。多看代码，不要自己在家闭门造车。每次看到觉得比较好的代码就记录下来，时间久了你就会记录下很多，在项目中多应用。

我摘录一部分在工作中记录的命名代码：

1. 在样式常常会遇到相同功能的样式，但布局不同，如:box,list等等，但是如果页面中又出现第三个第四个这种box,list又该如果起名字呢？方有如果下三种
   1.可以起名：box1,box2...，或者boxA,boxB...
   2.如果相似又有不同,则命名：orangebox,whitebox...
   3.去寻找父元素，如box的父元素是不同，则可写成:.shopping .box{...}
2. nobullets ul中去除列表类型
3. open/close 展开/收缩（或者collapsed/expand）
4. ......

上面内容中有些是很模式化的代码，有些则要自己在模式化的代码去总结一个适合自己方式的命名如果第一条只的内容。第三条中的两种试命名，也是在两个不同的网站上看到记录下来的。我比较喜欢taobao的命名，但不是说taobao的命名，HTML结构适合所有网站，如果说一个网站代码优秀，只能说他的代码适合它的网站，同样一个效果会有不同的做法，有简单的有复杂的方法,A,B,C...哪种方式最好呢，适合的就是最好的，那不好的我们还需要知道吗？当然要知道，包括hack方法我们都要去学习，因为在有些特殊的项目中我们还不得不用，好象说跑题了。在学习CSS代码命名当中，我还最好兼固收集一些HTML代码片段对以后做项目很有好处的。还是展示一下实例吧！

表单中的HTML格式代码

<form method="post" ation="/users/register.php">
<fieldset>
<legend>表单名称如果不需要可以用样式隐藏</legend>
  <div class="field">
   <label for="username">Username</lable>
   <input id="username" class="text" type="text" name="username"/>
  </div>
  <div class="field">code</div>
  <div class="field">code</div>
  <div class="field">code</div>
  <div class="submit-field">
   <input type="image" alt="Sign up" src="/t/m/img/but/register.gif"/>
   Already registered?
   <a href="/users/">Sign in here</a>
  </div>
</fieldset>
</form>

 

说明：上面的div 可以使用列表（或p，p从语义方面考虑有争议），但由于列表元素常会多空间的问题，所以如果处理不好可以使用DIV,<div class="field"></div>如果有特殊的类可以命名为<div class="field-name"></div>此外常用的出错，提示可以定义：msg show-attention(error,tips,ok,attention) 

 

以上只是简单说一下思路，起到指导作用，具体还要自己去努力提高。有些人看完后会觉得没什么感觉，觉得我看完后还是不能很好的去命名，所以我说你没有看懂我的意思，你回忆一下我们做页面，基础我们掌握的差不多了，一个页面会做了，可是换一个页面我们不一定会做。页面是千变万化的，设计师一个小小的设计有时会我们焦头烂额，有时只要改动那么一点点，我们就会海阔天空。命名的道理也是一样的，所以别指望只看了这篇文章就无敌了，这决不是灵丹妙药，脚踏实地才是正道。