css常用属性总结之 id和class的区别，使用类还是ID?
2017/2/28 8:44:21 阅读：3293
发布者：3293
css常用属性总结之 id和class的区别，使用类还是ID?
前面两篇文章我们分别谈到了class和id的相关知识和如何使用，但是在实际项目中，
我们该如何抉择，class还是id？
先回顾下两者的区别吧！
1.id具有唯一性，class具有普遍性，所以一个页面同一个id只能使用一次，而class可以被无限制使用。
2.id的优先级要高于class的!如下面列子：
<html>
#p1{color:red}
.p2{color:green}
<p id="p1" class="p2">这是一个段落</p>
</html>
上面是一个示例，p元素中的文字是红色而不是绿色，因为id的优先级高于class的。
其实id和class用法挺简单的，但是要写出优雅的css代码，那也是要注意一些东西的。
现在自己做的项目采用敏捷模式，多个人合作开发，
最痛苦的就是整个html文档中id和class满天飞，维护起来那叫一个坑啊！
最近看到有个人关于使用id和class的心得，我觉得不错，摘要如下：
css只用class来写并有专门的class通用和私有模块命名，id具有唯一性且优先级
太高只作为js操作dom的挂钩全部不添加样式，如果使用jq或zepto的话，
操作的class类名一般也不加样式，这部分的class命名和id一样由js来制定。
这样做比较适合大型，多人维护并且需要长期迭代的项目，
css的class类名和js操作的id、class类完全分离，这样产品的ui
或者产品交互逻辑变动二者互不影响，易维护。
总结一句话：js尽量操作id，class尽量操作css！
当然这个还的自己去实践啊！本人适合也只是针对目前做的项目而已！
今天的总结就到这里，不足之处还请指正。
前面两篇文章我们分别谈到了class和id的相关知识和如何使用，但是在实际项目中，
我们该如何抉择，class还是id？
先回顾下两者的区别吧！
1.id具有唯一性，class具有普遍性，所以一个页面同一个id只能使用一次，而class可以被无限制使用。
2.id的优先级要高于class的!如下面列子：
<html>
#p1{color:red}
.p2{color:green}
<p id="p1" class="p2">这是一个段落</p>
</html>
上面是一个示例，p元素中的文字是红色而不是绿色，因为id的优先级高于class的。
其实id和class用法挺简单的，但是要写出优雅的css代码，那也是要注意一些东西的。
现在自己做的项目采用敏捷模式，多个人合作开发，
最痛苦的就是整个html文档中id和class满天飞，维护起来那叫一个坑啊！
最近看到有个人关于使用id和class的心得，我觉得不错，摘要如下：
css只用class来写并有专门的class通用和私有模块命名，id具有唯一性且优先级
太高只作为js操作dom的挂钩全部不添加样式，如果使用jq或zepto的话，
操作的class类名一般也不加样式，这部分的class命名和id一样由js来制定。
这样做比较适合大型，多人维护并且需要长期迭代的项目，
css的class类名和js操作的id、class类完全分离，这样产品的ui
或者产品交互逻辑变动二者互不影响，易维护。
总结一句话：js尽量操作id，class尽量操作css！
当然这个还的自己去实践啊！本人适合也只是针对目前做的项目而已！
今天的总结就到这里，不足之处还请指正。
【 微信扫一扫 】
