《css选择器世界》阅读笔记

先随便说点啥

10月16号的时候，在刷张鑫旭blog学习知识点的时候看到他的新书《css选择器世界》出了。于是打开kindle搜索了下，还没有上架。于是这次准备买纸质版看，今天终于到了嘿嘿嘿。
r
去年也买了大佬的《css世界》（kindle版），读了大半受教良多。非常推荐大家买一本纸质的慢慢阅读。

叙述

1. 设置id的html标签可以在js中使用对应的方法，无需使用document.getElementById。（这里我仅测试了chrome浏览器）

1
2
3
4
5
6

<p id="test"></p>
<script>
    // 以往都是用 document.getElementById('xxx')来操作
    // 直到看了这本书才知道直接用id名来操作也可以
    test.innerHTML('hello wolrd')
</script>

2.知道了一个新的选择符 列（||）

3.可以使用 id.attachShadow({mode:’open’}) 用js来模拟元素的:scope(作用域)

4.可以通过加上-webkit-前缀来支持某些新的伪类

5.当同时写多个选择器时，只要其中有一个选择器被浏览器认定无效，则多个选择器的css都会失效

第二章 css选择器的优先级

1. css优先级 （0-6级 越大权值越重）

0级：通配选择器（*）、选择符（+ > ~ || 和空格）、逻辑组合伪类（:not()、:is()等）
1级：标签选择器 body、html、a之类
2级：类选择器、属性选择器、伪类 .foo、[foo]、:hover
3级：ID选择器 #foo
4级：style内联样式
5级：!important

2.增加css选择器优先级可以多次重复自身来实现，如元素为.foo，可以写成.foo.foo这样来提高优先级。

第三章 css选择器的命名

这一章看的非常舒服，文中带来了一种新的思想以处理不同规模的项目中css的简化。说了不少对命名规范和项目css设计的考虑和权衡。

1.css中类选择器、ID选择器、属性选择器（[xxx=xxx]）对大小写敏感，但是属性选择器可以通过在结尾加i实现对大小写不敏感。（如：[xxx=xxx i]）

2.css不支持数字开头是真。但是通过\转义，就能使用非ASCII的字符做为命名。如.\31中\31就是16进制中的1。

3.css也可以使用中文和中文标点符号、emoji表情来命名

4.css的命名建议：

1. 使用短命名，单词尽量采用简写。如introduction可以直接简写为intro
2. 尽量不用常见单词命名，即使用也需要加上唯一的前缀。如title、box等
3. 可以使用html标签或者特定属性值、无障碍内容、伪类作为标签。如.g-body、.g-radio、.g-log等
4. 尽量不用ID选择器
5. 不要嵌套选择器，尽量只保持一层结构
6. 对于某些不常修改的节点，如果需要设置简单的样式，可以使用面向属性的命名，如.fl{float:left}等
7. 状态类名不要存在css样式，用级联类来覆盖状态类名。如.active效果则在对于结构下用.module .active来覆盖写入样式
8. 命名不建议用驼峰、组合单词不能超过5个
9. 除了对性能的极致追求，也要权衡命名和css结构对整个项目的影响。必要时候可以因为某些原因来妥协命名和结构

第四章 精通css选择符