在前端开发中，什么时候使用CSS类和ID

本节课大纲

指令名称

有一些标签id在网页中是经常见到的，例如，container (or wrapper), header, content, sidebar, footer.这些标签id都是很好的例子，因为它们的名字就能知道其作用，它们申明的目的是为了辨别div或者其他标签元素。

id和 class 最好可以用来表示特定的意思. 诀窍就是去选择一个任何时候都能代表这个元素意思的名字

给出的建议，例如， 你有一个标签代表的是当天的特价，你决定把它字体标红，你可以把元素的名字命名为“special” 或者是“red”

"special" 应该是好的选择. 时间的推移, 你的颜色的方案可能会改变，然而"red"就会使人疑惑，但是如果这个名字是"special" 就能让你很好的辨认出这个标签的目的

确保你选择的这个名字有意义的，当你需要重新修改样式可能这些样式已经半年或一年没有碰了。这是一个好的选择

什么时候使用 Class 或 ID

在一个页面里，每个ID必须是唯一的，例如：在一个页面上只能有一个div使用某一个ID，但一个类(class)能在页面中被使用多次。例如：你可以有一些图片在页面上一起使用 "leftfloat" 或 "rightfloat" 作为这些图片的类(class)。

第一步基于信息，你可能会想应该使用大量的使用类(class)和少量的ID.恰好相反，为了精简标记你需要尽可能少用类(class)。在类(class)上使用大数字命名或命名成名称(这里的名称指绝对名称，如：注册页面中的用户名 username、密码 password)这都是不好的习惯，类(class)应该作为元素的分类来命名。

类(class)在有时是必须的，但有时给元素(element)指定一个ID然后使用子元素选择器(descendantselector)指向那个目标元素的子元素比为每一个子元素分配一个类(class)的做法要少一些代码。

例如, 假设在一个列表上有一些链接。你可以在列表里分配一个类(class)到每个单独的链接来样式化这些链接。或者分配一个ID在这个列表容器(如：UL或OL元素)并使用子元素选择器(descendant selector)写一个规则。假设你给UL分配一个ID为 "subnav"。这个子元素选择器(descendant selector) 将样式化subnav下面的链接。

如下所示：#subnav a:link

在一些地方里某些东西(这里应该是指指定重复的ID)频繁出现在同一个页面里会导致子元素选择器(descendant selector)不工作，类(class)的话就可以完好使用。我已经举例提醒过，应使用一个类来使一个图片向左还是向右浮动到页面的任何地方。

假设你的目录中每一个条目有几个段落的描述，但你又想段落中的其中一个是不同的形式。假如它是介绍(introductory)段落你能分配它一个类(class)名为 "intro"。但如它是给用户的表扬信(testimonials)，你可以分配它一个类(class)名为 "testimonial"，然后你可以创建一个类 .intro 或 .testimonial 的样式，那些段落将会被区分成不同的。

注意

类与ID名可以都写成小写形式（如，#subnav)或驼峰命名方式(如，#subNav)。如果你选择驼峰命名方式，请确保你输入正确的HTML标记，否则浏览器将无法识别你的CSS规则。

在类或者ID名称中不能有空格。使用下划线代替空格是可行的。