任务13所学到的架构知识，和任务12所学到的规范有没有冲突的地方？如果有冲突，你会选择哪种方式？为什么？

1.背景介绍

CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS书写风格上稍有不同，团队上就更加难以沟通，所有就要有代码规范。不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

CSS架构是让代码容易修改和扩展。良好的CSS架构必须是可预测、可重用、可维护和可伸缩的。

2.知识剖析

代码规范，先是书写顺序。

1.位置属性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

命名规则

头部是header，底部是footer，字体是font，菜单是menu之类的。

尽量用英文单词，不加中槓和下划线,一律用小写，怕别人不懂就加注释，让别人一看就能明白是什么的代码。

CSS架构

架构好一个网站需要在写之前理清思路，确定好目标，让网站的各部分都分开。一个好的网站可以由个人或者团队轻易地管理，无需花费太多的学习成本。

3.常见问题

1.架构网站经常会犯的错误

一个规则做太多事

.widget {
position: absolute;
top: 20px;
left: 20px;
background-color: red;
font-size: 1.5em;
text-transform: uppercase;
}

看上去这个类写的没什么毛病，

但是如果你需要在网站的其他区域使用该组件，那么上面的这个代码明显是错误的，不可重用的。

问题的关键是你让.widget这个选择器做的事情太多，不仅对该组件的位置进行了规定，还对它的外观和感觉方面进行了样式。外观和感觉可以通用，而位置是不可以的。有时候，把它们整合起来使用反而会大打折扣。

2.CSS架构是否和代码规范有冲突？

4.解决方案

1.最好的方法是CSS中尽可能少的包含HTML架构。CSS则是应该定义元素的视觉效果，无论该视觉元素在哪里。如果有一些特定的组件需要在不同的场合显示不同的效果，那么应该赋予不同的名称。例如，CSS通过.button类选择器定义了一个按钮组件。如果HTML想要一个特定的元素看起来像按钮，那么就可以使用.button。如果这里有特殊要求，这里的按钮与其他的有所不同（有可能更大和宽些），那么CSS需要定义一个新的类，HTML可以使用新的类来赋予该元素新的视觉效果。

2.不同的人他不同的架构方法也不一样，上面提到的这种，最好的办法是不同的元素用不同的CSS文件来写，类似这样。

注意，如果你在font.css里定义了所有要用到的文字属性，那就千万不要在别的地方再写和font有关的属性。不然别人接手的时候不好维护，也可能会出现意想不到的情况。

5.编码实战

6.拓展思考

还有哪些CSS的架构方法？

原子类

有的人就喜欢把所有的东西都写在一个CSS里，用的就是原子类。

 .f12{font-size:12px}
 .f13{font-size:13px} 
.lh150{line-height:150%}
.lh180{line-height:180%}
 .unl{text-decoration:underline;}
 .no_unl{text-decorati}

类似这样，一个属性就是一个类，但是我个人不是很喜欢这种写法。因为与其这样写，不如直接写style，只是一个权重的问题，style权重比选择器高，但是这也无关痛痒。因人而异吧。

7.总结

其实我这上面介绍的只是几种架构方法，不一定适用于所有的项目。但是只要有一个好的架构思路，一般来说是不会与编码规范有冲突的，如果不小心启到了冲突，那么还是架构更加优先，因为编码规范的话，如果怕别人看不懂还可以加注释，而架构则是会影响到整个网站。

8.参考资料

http://blog.jobbole.com/31147/