选择器命名规则

id选择器和class选择器命名规则：

css选择器 常规命名写法： 尽量规避拼音命名，用英文单词去命名 单词之间连接用三种方式：下划线_ 、间隔符-、驼峰命名。 下划线_: help_guest_regist 间隔符-: help-guest-regist 驼峰命名: helpGuestRegist 小驼峰 || HelpGuestRegist 大驼峰 工作中：具体使用哪种方式请根据团队的规范，建议不要同时使用2种以上的连接方法同时命名 单词后不要跟无意义的数字，如logo1234 (团队约定好的除外) 对于过长单词的连接命名可采取缩写形式，但应确保成员都能看懂

名字的本质是什么？ 名字本质上就是一个符号，用来区分人与人的。与符号一样，名字本身就蕴含着很多的信息，我们为 选择器起名字也是一样，选择器名字本身就包含很多的当前区域/元素的信息，也为了区分元素和元素 之间的样式

css命名要点： （1）避免样式冲突 （2）重用性高 （3）命名简单，不用过长，名字过长会加大css文件大小，不利于加载速度 （4）团队命名规范：项目组所有人的命名方法，习惯都要统一，例如：使用同一前缀

约定俗成的css命名方式：

1，css命名语义化 看到命名就能知道当前区域是功能了 根据页面中模块的功能而命名，如页面头部header、导航栏nav、主体main、侧边栏sidebar、底部footer、新闻列表newsList，“免费注册” help-guest-regist：帮助-顾客-注册等等，这样整个页面看起来就比较清晰了，维护起来也比较方便

2，面向属性的命名方法 在css命名的时候掺杂语义，这样可以让代码更易懂，“免费注册”按钮上的class名称：help-guest-regist：帮助-顾客-注册 语义其实是一种束缚（只表示一种意义），越是语义强烈的命名越是没有重用性（尤其是内容语义的） 例如：侧边栏的标题， class="side-title" side=边 title=标题 但是如果中间的标题和侧边栏的标题是重复的样式，side-title用于中间部分的标题就不太不合理了

• 面向属性的命名：不管页面什么位置，什么内容，针对css属性的一种命名方式

例如: 侧边栏的标题 || 中间的标题
样式：{padding-left:8px; text-align:right;} class="pad8 txtr" 根据css样式分离让样式的重用性放大至最大，分离后样式的命名就是样式本身

3，命名含义与元素相关，不建议这样写 为了避免样式冲突，会给其赋予相当特殊的命名，或是在选择符上添加HTML标记，或是使用层级 例如：ul.test 这个ul标签十有八九就是装饰用的，往这儿一放，同样css样式的div标签可以用吗？ 作用：是用来提高CSS优先级

4，尽量不使用太多层级关系和标签 如果是单个或者重复量不大的元素直接针对a标签进行简单命名是最佳解决方案 例如：.list_box a{} 优化后 .list_box{} 如果子元素的样式重复，此时，使用层级与标签，或许是更好的做法 例如：ul.box li{} || .box li{}

为什么不建议层级关系嵌套太深？

css选择器查找方式是从右向左找，因为右向左的规则要比从左向右的高效

  <div>
    <ul>
      <li><a class="box">1</a></li>
      <li><a>2</a></li>
      <li><a>3</a></li>
    </ul>
  </div>

从左向右的匹配，过程是：从祖父元素ul开始，遍历所有li子节点，如果li子节点中还有孙子节点a.box，这个a.box才能被找到发现不符合规则，需要回溯到 ul 节点，再遍历下一个 li-a,假如有 1000 个 li，则这 1000 次的遍历与回溯会损失很多性能

从右至左的匹配：先找到所有的最右节点a.box，向上寻找节点li，由li再向上寻找 ul，最后找到根元素 html 则结束这个分支的遍历

很明显，两种匹配规则的性能差别很大。之所以会差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的节点,而从左向右的匹配规则的性能都浪费在了失败的查找上面