今日完成：

修改任务八中的动画效果：

之前使用:hover+display来实现此功能

但发现这样伪动画效果比较生硬

所以换了一种思路，不使用display了。

opacity:0;

这个属性是用来控制页面透明度的

将cover页面覆盖到职业表单上，透明度设为0，这样就可以达到隐身的效果，相当于display:none。

不过区别在于cover并没有真正的消失，需要注意的是后面整个动画过程它一直都覆盖在表单上方。

所以:hover伪类是需要放在cover上的，之前使用display是放在表单上的。

最后可以再加上一些动画效果，给透明度变化一个时间段。

opacity:1;
animation-name: light;
animation-duration: 3s;
animation-timing-function: linear;
animation-direction: alternate;

今天看了下css命名的一些规范

印象比较深的就是张鑫旭的“面向属性命名”

他是比较反对css命名带有语义的，这样会使类的可复用性大大打折扣。

最好的命名方式就是样式名字带有样式的特点，即样式名即样式本身：

.tr{text-align:right;}
.pb8{padding-bottom:8px;}

这是他的通用样式库：

https://github.com/zhangxinxu/zxx.lib.css.git

摘取一段关于css命名时需要注意的事项：

css命名的三个“NO”:

1. 限制重用
我们会使用层级(#test .test)，会使用标签(ul.test)，可能是习惯(没多想)，或是为了避免冲突。但是，我跟你说，从今以后，这种写法让他见鬼去吧（如果不是为了改变CSS优先级的话）。正如开篇论述的哲学观点，你限制越多，越抑制了CSS的重用性。例如#test .test{}这种写法，里面的CSS重用性多大，完全限死在了id为test的元素下，哪有重用性可言；又如ul.test，我勒个去，这个ul标签十有八九就是装饰用的，往这儿一放，同样CSS样式的div标签可以用吗？哭爹喊娘，眼泪汪汪也不管用啊。所以，相信我，层级啊，标签啊什么的，通通见鬼去吧。要知道，层级啊，标签啊作用是什么，是用来提高CSS优先级，把那个字母长的让人发毛的”!important”干掉的。

2. CSS文件大小
这瓜子虽小，吃多了也是可以填饱肚子的。所以，你的CSS名称不要像老太太的裹脚布一样，搞得又臭又长，如下图所示的人人网那个冗长的CSS命名吧：

你看名称的字节数已经比属性还大了，要是这些名称都在15字符以内，乖乖，这个CSS文件可以小个1~2K绝对没有问题的。你看下图这样子的命名，这样子的CSS排版是不是更舒服，更简洁。

3. 降低了渲染效率
来个例子考考大家（以后我面试别人可能就会考这题），HTML如下：

<div id="test">
    <ul class="test"></ul>
</div>

现在要给这里的ul标签一个样式，比如说padding-left:25px;那么下面四种写法哪个渲染速度最快？
#test .test{}， ul.test{}，#test ul{} 以及.test{}。

如果单纯的ul与.test PK，我还真拿不定谁的渲染速度更快些。但是，一旦牵扯到层级与标签，我100%确定，.test这种最直接的命名方式渲染效率是最高的。

所以，CSS命名，只要出现了层级，出现了标签，就是一次额外的渲染，层级越多，渲染的开销也就越大，这就是为什么一些前辈的文章会建议要尽量避免过深的层级。这也是为什么要“无层级”，“无标签”。

对于原则第一条“无ID”，其实与性能没有多大关系，只是一般ID都与JavaScript有奸情，如果再牵扯到CSS样式，如此复杂的三角关系，日后不好处理啊。

哦，对，今天还尝试使用了下grid布局。之前任务中都没用过，一直用flexbox。

剩下几个任务可以尝试多用一下。

遇到的问题：

进度慢了

收获：

了解了css样式命名和样式分离

明日计划：

完成任务13