前面两篇文章我们分别谈到了class和id的相关知识和如何使用，但是在实际项目中，我们该如何抉择，class还是id？

先回顾下两者的区别吧！

1.id具有唯一性，class具有普遍性，所以一个页面同一个id只能使用一次，而class可以被无限制使用。

2.id的优先级要高于class的!如下面列子：

  1. <html>
  2. #p1{color:red}
  3. .p2{color:green}
  4. <p id="p1" class="p2">这是一个段落</p>
  5. </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！

当然这个还的自己去实践啊！本人适合也只是针对目前做的项目而已！今天的总结就到这里，不足之处还请指正。

css常用属性总结之 id和class的区别，使用类还是ID?的更多相关文章

  1. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  2. 1+x证书学习日志——css常用属性

     ## css常用属性:             1:文本属性:                 文本大小:  font-size:18px;                 文本颜色    colo ...

  3. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  4. 02: css常用属性

    目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...

  5. CSS常用属性-xy

    一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...

  6. css常用属性总结第二弹:id选择器

    承接上一篇class选择器,这一篇我们来说说css的id选择器. id选择器类似于类选择器,不过也有一些重要的差别,首先,id选择器前面有一个#号----称它为棋牌号吧,class为点号,用法就和cl ...

  7. css常用属性初总结第一弹:id和class选择器

    前言:这是我第二次写博客,记录自己所学的点点滴滴,希望大家一起共勉! 说到选择器大家都不陌生,估计用的最多的还是id选择器和类选择器,至于其他的选择器,今天在这里我避而不谈. 类选择器:将html元素 ...

  8. css常用属性汇总

    一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal; 字间距 letter-spacing: 数值 | inherit | no ...

  9. css常用属性1

    1  背景相关 背景颜色 background-color     = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...

随机推荐

  1. Mysql中五级权限小结

    mysql的权限控制主要是通过mysql库下的db,user,host,table_priv,column_priv表控制. 由于权限信息数据量比较小,所以mysql在启动时会将所有的权限消息加载到内 ...

  2. HDFS（二）

    HDFS的I/O主要是三个方面: 一致性 HDFS在一致性上面主要是通过校验和(checksum)来实现:从client发起写入的时候会校验一下文件内容,但是发生在pipeline的最后一个节点的时候 ...

  3. 9.Python安装scrapy教程

     1.在命令行中输入:pip3 install scrapy(pip3是因为本人python版本是3.6),报错如下: 2.解决方法:在https://www.lfd.uci.edu/~gohlke/ ...

  4. GPS数据包格式解析

    四种定位系统:1.美国的全球定位系统(Global Positioning System,GPS)2.俄罗斯的格罗拉斯(Global Nabigation Satellite System,GLONA ...

  5. php项目有负载，$_SERVER['HTTP_X_FORWARDED_FOR']函数在不同系统中获取到的值形式不一样，ios系统苹果手机只能获取到一个ip（113.87.214.xxx），而安卓手机获取到的是2个ip中间逗号隔开的形式（113.87.214.xxx , xxx.xxx.xxx.xxx）

    这次由于有个抽奖活动功能,苹果手机每次都抽奖失败,安卓手机每次都抽奖失败(5台ios手机,8台Android手机). 错误日志查看是因为,抽奖用户的ip记录进数据库时出错,之前都是拿到ip直接插入数据 ...

  6. js继承方式及其优缺点？

    原型链继承的缺点一是字面量重写原型会中断关系,使用引用类型的原型,并且子类型还无法给超类型传递参数.借用构造函数(类式继承)借用构造函数虽然解决了刚才两种问题,但没有原型,则复用无从谈起.所以我们需要 ...

  7. 以Linux下的测试程序说明递归型互斥量和普通互斥量的区别

    先贴代码和测试结果 // Mutex.h: 对pthread的互斥量的RAII包装 #ifndef _MUTEX_H_ #define _MUTEX_H_ #include <stdio.h&g ...

  8. FPGA与DSP简单比较

    FPGA与DSP比较 两者的优势不一样.在硬件层面,DSP是ASIC,如同CPU GPU一样,适宜于量产降低成本,缺点是(硬件)设计一旦确定,便不易于修改. 而FPGA较灵活,可以通过硬件描述语言进行 ...

  9. (转) C#中Timer使用及解决重入（多线程同时调用callback函数）问题

    原文链接: http://www.cnblogs.com/hdkn235/archive/2014/12/27/4187925.html

  10. Tkinter学习

    from tkinter import * window = Tk() # 创建一个窗口 window.mainloop() # 消息循环,显示窗口 window.title("窗口标题&q ...