今天完成的事情：

今天没有写代码，而是查了很多资料，总结了一下自己。

首先，css代码规范问题。

1我在之前的任务当中，犯了不少错误，首先类的命名我跟js命名混淆了，css命名应该用-而不是_。

2然后讲讲新学的less。因为less可以写成跟html一样的结构，所以我就基本按照html的结构去写了。但是过分的追求这种写法会带来一种很麻烦的问题，就是css文档中，选择器的名字过于长了。比如body main .x .y .z {...}然而很多时候并不需要这么长的名字，只需要.z就够了，过长的名字也会给代码的可读性带来问题。谁也不想看一长串这种的选择器把。

3还有就是一个是我发现有一种叫原子类的代码写法。在之前的任务当中，我不经意间使用了这种写法，比如我会定义一个类叫做gray-color，在需要灰色文字的时候，把这个类加进去。或者写一个left类，内容是float left，在需要浮动的时候加进去。有的时候这样子很方便，但有的时候我觉得依赖这种写法也不是很好.

举个例子，如果拿原子类的写法写一个网页，会在写的时候非常简单，你只需要把类都写好，然后在html文档里适当的位置添加这个类就可以了。但是维护的时候，就没那么简单了。比如我有很多元素，他们有一个margin left属性。现在要求我把页面改一下，让这些元素向右再移动一点，我可能会有这么几种方法：NO.1直接修改类的内容。这通常会造成一个矛盾，因为这个类的名字通常会带有数字，比如ml5，ml10，如果我之前的类是ml10，现在需要我把ml改成15，我直接改类的内容的的话会和类的名字矛盾，这是绝对不行的。NO.2在元素里添加一个新类ml15放在后面，这样子覆盖掉前面的ml10。但是如果你只用这样的方法去修改，这个元素的class可能会非常长（比如class=“a b c d e f g”，而g才是你要的，abcdef都是被覆盖掉的，这也会给代码的可读性带来问题）。而这样可能带来的问题是加倍你的工作量。你需要在修改css文档的同时修改html文档。这与我们把html css js分离的原则是向背的。同时原子类写法在你使用选择器的时候也会很难受，你是要用body main .x .y .z来调用呢（可读性差）？还是在专门命名一个名字来调用呢（为何不直接在这个类把内容写好呢）。也就是说，过分的抽象和调用给维护带来了很大的成本。

so，我觉得如果一个网页全拿这种写法来写是不好的。但是适度的使用会减轻我们很多负担，比如bootstrap这种类型我觉得就合适。

4.css架构。因为结构表现行为三分离的原则，css中应该尽量不要涉及html。而一个好的css代码，应该是可预见的、可重用的、可维护的和可扩展的

我在网上看到了一些关于css代码中常见的坏习惯，在这里分享一下。1.基于父类修改组件2.过于复杂的选择器3.过于通用的类名4.定制过多的规则

为了实现良好的css代码，首先类的命名必须是有意义的，这样它的可预测性会大大的提高。然后组件应该知道如何定义他自己的样式并把工作做好，但是不应该让他们负责他们的布局或是定位，也不应该让他们过多假设如何与周围元素设置间隔。通常，组件应该定义他们的外观如何，而不定义他们的布局或定位如何。布局和定位应该要么由一个分离的布局类或是一个分离的容器元素处理（讲道理这个我有点懵啊，意思是一个div里至少要有两个类嘛？一个定义样子，一个定义位置？比如<button class="button-shape button-position">something</button>？ 有一点我get到是别让一个组件干太多事，比如又有margin，又有background，又有position，这样的组件重用性太低）

然后为了阻止父类元素的交叉感染，命名的时候应该这样

.x{}

.x-y{}

而不是

.x{}

.x .y{}

5.css样式表，这个我感觉就像是写了一个原子类css文档然后被引用了，然后需要什么点什么（就像bootstrap），不知道理解对不对。

明天的计划：

写任务13（对吧？12，还是13，whatever）

遇到的问题：

老哥，我在写一个html网页的时候，应该写几个css文档啊？布局类的样式库一个？然后再自定义一个css专门写外观？我css代码是不是应该改改呢？重复性太低了咯。

而且不能用bootstrap意思就是让我写个属于我的bootstrap咯（意思让我自己写个栅格系统咯？（意思让我去看看源码的咯？（意思我还要写一个自己的icon库啊？！（icon能引用外部的把？？？？？？，我自己画要翻水水啊））））？

收获：

1对css的正确写法有了新的认识

2认识了以下自己以前的问题

3以后网页的效果要和设计图吻合（认真脸）