站长论坛

标题: 关于CSS的书写习惯 [打印本页]

作者: sunhw0725 时间: 2009-12-26 10:24
标题: 关于CSS的书写习惯
其实每个人都有自己喜欢的书写格式习惯，我在刚学CSS的时候，什么都不知道，只是要实现什么效果，我后就写个ID或类进去。放哪个位置也不管，丢进去就行了。反正效果实现了；后来当需要修改某些地方的时候，才发现这个问题的严重性。代码混乱，ID，CLASS乱用。不易阅读…使得修改起来很费劲。
后来开始做wordpress主题的时候，慢慢改变了这种坏习惯。在Maxthon主题的样式中，适当的划分了一下各个部分。

如header，content，sidebar，footer，othes…然后把样式的属性写在一行里。并且用层叠来定义CSS的作用域。就像下面这样：

#content { float: left;  width: 524px;}

#content .post { text-align: left; margin-bottom: 8px;}
#content .post .post_title { margin: 10px; }
#content .post .post_title p { margin-top: 8px; }
#content .post .post_title .abbr { cursor: help;  }
#content .post .post_info { line-height: 20px; border-top: 3px solid #DDDDDD; }
这种写法看起来清晰，容易阅读。但同时也增加了很多无用的代码，从而使整个文件的大小增加了。
而我最新发布的Dreamy主题的样式又换了种书写格式；这也是我目前认为最好的书写格式。

/*Comment
------------------------------------------------*/
.commentlist li {
         margin: 15px 0 10px;
         padding: 10px;
         list-style: none;
         border: 1px solid #A6C9E1;
         }

.commentlist li .avatar {
         padding: 4px 9px 4px 4px;
         float: left;
         margin-right: 10px;
         background: url(images/bgAvatar.png) no-repeat;
         }
.commentlist li.odd {
         background: #EFF6F9;
         }
.commentlist li .byuser {
         background: #CBEAF4;
         border: 1px solid #A6C9E1;
         }
总结下几点经验

1. 样式的命名：
这个其实有些参考资料的。在这里说下我的书写习惯，以前是喜欢用class-name来命名。后来又改成class_name，再到现在改用className这样的方式；其实用className这种方式有个问题，就是大小写很敏感，一定要注意。比如你定义了一个 .postInfo {} ，而你在结构里用 class=”postinfo” 来调用这个类的时候可能不会起作用。建议大家用class_name的格式，我只是个人喜欢后面的这种格式而已。

2. ID和CLASS的使用：
我现在基本很少用ID来命名了，除了头部的#header,#Container,#sidebar,#footer基本上没特殊情况不用ID，因为ID的优先级很高。有时候会出现一些很麻烦的问题，而且ID要留给JS用，以符合行为与表现分离的原则。

3. 空格的使用
有些人在写样式时不喜欢空格，其实适当的空格能增强代码的阅读性。
.className{width:500px;height:300px;}
.className { width: 500px; height: 300px; }
你觉得上面那行的阅读性更好？

4. 适当的层叠或缩进定义CSS的“作用域”
如果你想让首页的title和单篇日志的title不同，比如首页文章的标题是向居左的。单篇日志的标题是居中的。你可以这样写
.post .title { text-align: left; }
.singlePost .title { text-align: center; }
而有时候用层叠会增加代码优先级，所以也可以用缩进来“象征性的”体现作用域。像这样：
.post { text-align: left; }
.singleTitle { text-align: center; }

5. CSS HACK
在一开始的时候，会经常用到Hack来解决一些兼容问题。慢慢就成了种习惯，而这种习惯事实上是不好的。我们应该尽量地少用不用Hack，当然这就要求你对CSS必须相当的熟练。这种东西还是要靠大家在实践中去掌握。在我最新发布的Dreamy 2.0中就没用用到一处Hack。因为很多时候，只要肯思考，换种角度去解决问题。就不必全依赖Hack了。当然，这不代表就不能用Hack了。Hack有时候还是个很好的东西的，这里就不说有哪些Hack技巧了，大家可以自己去搜索下相关资料。建议大家写Hack的时候，把Hack单独写出来。
一个简单的例子，在处理IE6浮动双边距问题时一般会这样写“
.post {
float: left;
margin-left: 10px;
display: inline;
}
建议在家写成这样：
.post {
float: left;
margin-left: 10px;
}
.post { _display: inline; }/*Hack for IE6*/

对于CSS的书写格式，大家有什么好的建议，欢迎在下面评论。很乐意和大家一起探讨。

欢迎光临站长论坛 (https://tzlink.com/bbs/)