选择器大小是否区分

1 .标签选择器，属性选择器不区分大小，由于他们也是html代码的一部分

div DIV{}这俩都是一样
[UTL]{}，[url]这俩都一样
2 .其余的都区分大小写
[url="http:baidu.com"],[UTL="http:baidu.com"]，这俩就是不一样的，因为他们是属性值，这个是区分大小的
.div ,.DIV{}这俩是不一样的，
#div,#DIV{}这俩也是不一样的
3 .但是，如果在[]里面加一个i,那么类选择器和id选择器也可以不区分大小写
[class~="val" i],[CLASS~="VAL" i]这俩是一样的
css选择器命名的合法性
1 .不能以数字开头。错，可以以数字开头，但是不能直接写数字，而是需要转义之后才可以，类名，id选择器甚至可以是纯数字
<span class="1">
.\31 {color:red}
//此为他的转义版本
选择器命名的官方规范
1 .首字母：a-z,A-Z,下划线，以及非ascii字符

2 .其余字母：比上面多了数字和-（短横线）

3 .但是，对于以上没有提的字符格式，只要参加了转义，其实都能用，比如数字，！，，。；‘等等这一堆符号
.\+foo{}
.\,foo{}
//使用斜杠进行转义，包括IE在内的浏览器都支持斜杠转义写法，因为可以放心使用，唯一例外的就是冒号,不支持转义
4 .甚至中文，中文标点，emoji都可以当类名

5 .短横线，一根的话，后面必须有别的东西，2根的话，可以直接使用，后面不需要添加
.--{color:red}
.-a{color:red}
//这俩都是合法的
选择器命名
1 .自己：基于less，可以非常方便的构建唯一class的方式，所以就是每一个div都能保证是全局的一个class，有点像id

2 .使用起来就是组件的id是唯一的，相当于一个命名空间吧，其余的class都是以这个开头即可

3 .小总结：除了多人合作，长期维护，不会引入第三方css的项目的全站公用样式可以使用单命名，其他场景都需要组合命名

面向属性的命名
1 .这个感觉布局属性比较需要，别的都没有这个必要
.clearfix:after{content:'",display:table,clear:both}
.dn{}
2 .优点：复用性高，方便快捷 缺点：适用场景有限
面向语义的命名规则
1 . .header,.title

2 .优点：灵活丰富，应用场景广泛 缺点：代码笨重，效率一般
张鑫旭原则
1 .不要使用拼音，除非是非常特殊的地方，weibo,wx,baidu

2 .从html标签中寻找灵感，HTML标签本身就是非常好的语义化短命名，这样被人很容易就能看的懂
.module-img
.module-body,
.module-li
.module-a
.module-radio,
.module-range
//从svg中发现的灵感
.module-g
.module-x:容器盒子，替代box
3 .无障碍访问中也有灵感
.module-log
.module-grid
4 .从css伪类中寻找
.active,.disabled,.selected,.checked.invalid
css选择器最佳实践
1 .没有任何理由使用id选择器，优先级太高，最后导致我们很难重置某些样式，一旦id发生修改，这里相应也会爆炸，实在需要，使用属性选择器方式[id="idName"]{}

2 .不要嵌套选择器

.nav a

.box > a {}
1 .渲染性能糟糕
2 .优先级混乱
3 .样式布局混乱
3 .渲染性能糟糕
1 .标签选择器，过深的嵌套是两个影响css选择器的罪魁祸首
2 .#id>.id>div>*>[href]>:hover 具体性能如下
3 .记住他的匹配是从右往左的
4 .优先级混乱:选择器的优先级有一个原则，那就是尽可能的保持较低的优先级，这样方便以较低的成本重置一些样式。

5 .样式布局脆弱：如果是很长的嵌套，这样就相当于锁死了dom结构，但是实际开发中，dom结构出现变化是非常常见的一件事情。