Question

如何写出较好的css

Answer 1

较好的css在于可读性、维护性、扩展性、复用性这几个方面。所以只要提高它们就能解决问题, 虽然这么说，也不是如此简单的。

一、可读性
有人认为CSS不是程序，不需要可读性，有人认为CSS只要写出来就有可读性，因为很简单。抛开各种预处理器不说，原生CSS结构确实简单，没有需要编程的部分，但仍然可能导致混乱。原因有二，一是CSS可以层叠，其中涉及到了优先级和作用范围，如果写的不好，人很难读出其中的意义，二是CSS属性众多，加上CSS3引入了很多用法独特的属性，一个选择器可能包含几十个属性。比如下面这段我随便写的CSS代码：
span {
-webkit-box-shadow: 6px 4px 4px red;
-moz-box-shadow: 6px 4px 4px red;
box-shadow: 6px 4px 4px red;
}
div span {
border-width: 4px;
border-style: dotted;
border-color: blue;
}
#box {
border-left: 2px solid red;
border-bottom: 2px solid red;
}

乍一看也没什么，都是border，大致能看出来这段CSS只是为了添加一个红色的阴影让box看起来比较立体。但中间的部分似乎是捣乱的，你可能会说这太傻了，看不到吗。是的，当这3部分散落在上万行的CSS中时，肯定看不到。于是有人很自然的想起了我们可爱的浏览器，没错，在浏览器中可以快速找到作用于目标的CSS样式，但这也是万恶之源。首先我假设你不知道中间那部分东西是为了什么而写的，因为你是靠浏览器找到它的。然后剩下两种可能，不管三七二十一改了再说和看看它为什么存在。前者悲剧的可能性是100%，后者悲剧的可能性是90%，因为你已经掉坑里了，很快我们会发现要修改它还牵扯到了另外的地方，接着在浏览器中探索到另一个莫名其妙的样式，当你弄懂全部的时候，你应该已经把上万行的代码弄了个一清二楚了，也许最幸运的是，浪费了几个小时的时间发现只需要修改一行就能达到目的。

当然，我们可以天真的认为，只要把他们写在一起就可以了，这样找起来很简单。而我将继续顺着这样的思路来尝试曝露问题。
维护性
所谓物以类聚是很有道理的，人们习惯将事物归类，但问题是分类标准，样式并不关心业务，无论是什么文字内容，还是功能有何不同，它在乎的只是样式，比如文字的尺寸，间距和宽高，颜色等等。如果简单的将一个组件的样式放在一起，势必带来的就是小段代码的重复书写。不觉得有多严重？我来举个栗子。
aside {
box-shadow: 6px 4px 4px #AA3343;
}
nav {
box-shadow: 6px 4px 4px #AB3633;
}
.item {
box-shadow: 6px 4px 4px #AA3732;
}
.item.otherStatus {
box-shadow: 6px 4px 4px #AA3132;
}

继续说上面的例子，box需要阴影，但如果这个项目的UI统一风格，包括sidebar，navigator以及item都需要这样的阴影呢？再如果，明天客户或者UX一拍脑袋，这个阴影应该是灰色的不该是红色的呢？不要继续天真的认为全局替换是救命稻草。首先，没有几个网站会用red，blur做色调的，你用的应该是#AA3333，这样的代码，然后你发现sidebar用了#A43433，而navigator是#AB3633，等等，item有两个状态，而两个状态对应的颜色是不一样的。这怎么可能？但当你打开浏览器的时候你会发现本来就相差无几的颜色，在阴影中变得一模一样了，谁看的出来呢，当初使用的时候可能也不过是随意的在mockup中取的一个颜色。
大量的重复带来的不仅仅是代码的冗余，我们必须靠人力去同步它们，而人很难保证它们的修改是完全一致的，尤其是当它们中引入了一些不一致的独特的东西时。不要小看CSS，其后果就是进度和人力的压力，后面就是PM有没有读过《人月神话》的事了。
肯定有人在想，谁让你当初要写成这样呢。我们在读代码的时候最喜欢问，当初为什么要这么写？但慢慢的你会读出它的历史，有时候它是身不由己的。这就涉及到了下一个要讨论的内容。

二、扩展性
扩展性是一个具有欺骗性的东西，所谓的扩展性其实就是在现有基础上再次开发新东西的性能，但我认为它还必须有前提条件，那就是保持可读性与维护性。
简单的追求可维护性是自取灭亡，原因很简单，将新旧代码完全分离的时候扩展性最高，因为不必担心对以前的部分有影响，新的样式可以随意发挥。是不是很神奇，这样想的我们写下的代码，肯定就是前面我们追问的代码。所以自己回答自己吧，当初没考虑可读性和维护性，只想着快点增加新的样式，就这么写了。
那什么才是一个好的扩展性呢，简单来说，就是多功能产品。比如一个box，也许它的样式就时

三、复用性
似乎我一直在说的就是重复，那我们就来说说复用性，如何才能复用CSS代码是一个很大的问题，比如粒度，是一两个属性进行复用还是一大组选择器进行复用呢，再比如对象，是为了class复用属性，还是为了html复用class呢。这些选择不算太重要，但是带来的影响却很重大，可以说是整个CSS结构的改变。下面继续用box的阴影来讨论复用。
.shadow {
-webkit-box-shadow: 6px 4px 4px #A93334;
-moz-box-shadow: 6px 4px 4px #A93334;
box-shadow: 6px 4px 4px #A93334;
border-left: 2px solid #A93334\9;
border-bottom: 2px solid #A93334\9;
}

这样看起来我有了一个shadow的class可以给任意的目标加上这个阴影了，但这导致了一个复用的问题，和上面那段捣乱的CSS样式一样，如果item已有另外2个border了，那这个class是无法去除的。所以复用时不仅要考虑需要什么，还要考虑不需要什么。另外一些必须的属性比如display还有overflow等也是要考虑的，因为user agent的原因，很多属性是隐藏在element中的。

Answer 2

一：css的API
属于基础部分，这部分的能力用“对”和“错”来评判。
比如说把文字设置为红色，只能用color：red；这种写法是对的，其他任何写法都是错的。
二：css框架
不能用“对”和“错”来评判，我们会用“好”、“比较好”、“很烂”、“非常棒”这样的字眼来评判。
按功能划分：控制字体的css集中在font.css文件里。
控制颜色的css集中在coloor.css文件里。
控制布局的css集中在layout.css文件里。
按区块划分：将头部的css放在head.css中。
将底部放在foot.css中。
将侧边栏放在sidebar.css中。
将主体放在main.css中。
！！不同角度的组织方法都有自己的道理，也有自己的缺点和优点。
笔者最喜欢的一种组织css的方法：base.css+common.css+page.css。
base（具有高度可移植性）
（base是三者的最底层，提供CSS reset功能和粒度最小的通用类——元子类。这一层会被所有页面引用，
是页面样式所需依赖的最底层。无论何种风格的设计都可以引用它，所以base层要力求精简和通用。
￥￥房子的地基。￥￥）
即按照智能分成：base、common、page。注意的是，这三者不是并列结构，而是层叠结构。
common（可移植性一般）
（bommon位于三者的中间，我们可以将页面内的元素拆分成一小块一小块功能和样式相对独立的小“模块”，
这些“模块”有些是会大量重复的，我们可以将大量重复的“模块”视为一个组件。从页面里尽可能
多的将组件提取出来，放在common层。网站中高度重用的模块视为组件，放在common层。
￥￥房子的门窗。￥￥
一个网站只有一个common层。common层是放在一个common.css文件里，还是按照功能划分放在
诸如common_form.css、common_imagelist.css的多个文件里，需要根据网站规模来
决定。）
page(几乎无移植性)
（page位于三者最高层，提供页面级的样式。￥￥房间内的装饰画。￥￥有page层的代码放在一个page.css文件里
，根据页面配上注释，分块书写，便于维护。如：
/*首页*/
.test1{}
.test2{}
/*关于我们*/
.test3{}
.test4{}
/*联系我们*/
.test5{}
.test6{}
！！page.css还是应当越精简越好，能用base层和common层的css解决的，就尽量不要用到page层。）

Answer 3

多看，多思，多练，