host on Github
这是在最近一期的css weekly上看到的一篇文章，说的是如何提高你的CSS技能。
个人觉得写得挺好。尤其是对于一些觉得已经掌握了CSS，做了一段时间，而又不知道如何提高的同学来说，有一定的指导意义。
所以大概地翻译了一下，原文在这里，里面推荐的许多文章或网站都值得一看。
不要捉急写代码，并且，保持简洁。
在开始之前，先问一下自己：
How would I do this?
我要怎么去实现它？
Is there another way?
有别的办法吗？
How can I optimize it (to be maintainable, clean, cool, etc.)?
如何去优化(易维护，简洁，cool…)
仓促动手，往往事得其反。
CSS是个简单的东西，但是可以搞得很复杂，特别是你希望它复杂的时候。大多数情况下，简单的想法就是最好的想法。当你在实现某个东西时，问问自己有没有更简单的方法，你会发现答案常常是肯定的。
CSS最基础的两个方面：
盒模型
CSS标准
技巧,类似这种:
absolute的元素，定位失败时，看一下父级元素是不是指定了relative
或者，z-index的怪异问题
或者，清除浮动
对于技巧，每天都有很多新的出现。作为前端，要大概了解这些内容，在出现问题的时候，知道去如何解决。
Don’t Repeat Yourself,不要重复你自己。不光是CSS，做其他事情同理。
意思是，在有可能一次性解决问题(实现某种样式)的情况下，不要重复地做同样的事情。对于其他语言来说，可以通过函数(function)之类的东东来避免重用， 而在CSS里，可以通过编写可复用的类(class)来做到这一点。不过有时，通过简单的重构(refactoring)就可以实现。比如：
.navigation li {color: #333;}
.navigation li a {color: #333;}
/*refatcoring 重构如下:*/
.navigation li,
.navigation li a {
color: #333;
}
这个重构使得代码从两方面得到提升：效率和可维护性(performance and maintainability)
效率：更少的行数，意味着浏览器的CSS解析器所花费的解析时间更少。 简单来说，解析器会一次性在符合这两种选择器的元素上应用样式，而不是分两次进行。
可维护性：显然 ，这么做，在需要修改色值的时候，只要改一个地方即可。 本例中，只有两个地方，看上去问题不大。但当有50个，甚至300个地方用到同一个颜色呢?
CSS无法做到面向对象，no namespaces, no functions, no methods, no programming classes，no conditional statements。 这只是一种概念，或者说是最佳实践。
简单来说，就是使用class，很多很多的class，把你的网站，或是要构建的页面，想象成由一个个的模块以及组件构成。 试着把公用的地方提取出来形成你的”实例”(class)达到重用的目的。
做到：结构与外观分离，以及 容器与内容分离。
结构与外观分离(separate structure and appearance):
意思是说一种表现形式可以应用到多种不同的元素上。比如：
#my-button,
.my-box,
.my-box img {
border: 1px solid #444;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
以上是对特定的元素进行的样式定义。如果我们将它抽取成一个.skin的样式，那么它可以任意地应用到其他元素：
.skin {
border: 1px solid #444;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
经过改造后的代码看上去更容易理解，同时提高了效率和可维护性。
容器与内容分离(separate container and content)
个人(作者)认为这是OOCSS的一条重要准则：为组件编写代码，而不是只盯着眼前要实现的东西。 不管元素摆在哪，你都不用因为它换了个地方而重新进行编码。看下面的代码：
#main h2 {
color: #343434;
font-size: 25px;
line-height: 20px;
...
}
如果你想给#footer下的h2也应用这个样式怎么办？或者出于某种原因，h3也要应用这个样式？ 好的处理方法是将这个样式定义在一个class里，在需要的元素上，应用这个class。
“弃用ID选择器”是咋回事？
[具体内容看原文，个人表示ID选择器在有些情况下还是要用嘀。]
我(作者)对OOCSS的感受
没有经历过大型的网站项目，所以不太熟悉。对于单页(简单)的应用，可能作用不大。
但是，OOCSS的核心思想(提高效率、可维护性)需要时时牢记。
CSS3可以减少HTTP请求数量(images)，标签数量以及javascript：
圆角：1行css代码，而不是4个容器+4张图片(只是其中的一种实现方式)
透明度及alpha通道：1行css代码，而不是半透明的PNG图片。
更nb的选择器：而不是使用js代码
Flexbox
Gradients
多重背景
伪元素(Pseudo-elements)
CSS的最大问题是各浏览的支持程度不一样，更可恨的是各家浏览器对于同一属性的处理也不一样。
拿border-radius来说，有些浏览器不予支持，即使支持了，各家的实现方式也不一样。
那作为苦逼前端攻城湿应该如何应对？这意味着我们如果要求在所有浏览器下都显示圆角，那么就要针对各种浏览器分别实现。
当要实现某种效果时，我通常会按下步骤处理：
1.我怎么才能实现这个效果？
2.好的，我知道咋办了。这种方法是css2.1可以实现的么？
1.可以，故事结束。
2.不可以，进行第3步
3.浏览器的支持情况如何？
1.Good，小意思，故事结束。
2.不好，进行第4步
4.这种效果，仅仅是体验的提升，还是关键功能？
1.仅仅是体验的提升：对于不支持的浏览器不做处理，或者给出一个回退方案(fallback)
2.是关键功能，进行第5步
5.那没别的办法了，必须要找到解决的方法。
看一个实际的例子，gradient(渐变色)：
1.我怎么才能实现这个效果？
2.好的，我知道咋办了，gradient。这种方法是css2.1可以实现的么？
不可以，进行第3步
3.浏览器的支持情况如何？
还可以，但也不完美。IE8及以下版本不支持，Opera Mini不支持。
4.这种效果，仅仅是体验的提升，还是关键功能？
1.仅仅是体验的提升，不是啥大问题，在不支持的时候我给元素加上纯色。
2.是关键功能，我必须让所有的浏览器都看到效果。
5.那没别的办法了，必须要找到解决的方法。
好吧，背景图出马。
[建议大家都用这样一套方法，在做一个效果之前，来决定自己的解决方案]
提醒：永远记得你的受众是谁。如果的作品是运行在iPad等搭载先进浏览器的设备上， 那么可以放心大胆地使用CSS3的新特性而不用考虑兼容性。 但是，如果你是为一个银行做页面，那知你得知道，它的很多用户仍然在使用老旧的IE8[在天朝就是IE6了]。
替代方案，有时很简单，有时却不然。
没有替代方案，或者简单的替代方案。
当有些效果不支持也无关紧要的时候，那就不需要提供替代方案，生活很美好。。。
有些特性可以很容易地找到替代方案，基本上，你只要提供两个实现版本即可。 替代方案写在前面，后面是nb方案，当浏览器支持时，后面的nb方案代替前面的方案:
.my-element {
border: 1px solid #666;
border: 1px solid rgba(0, 0, 0, 0.3);
}
Modernizr库
一个JS库，在页面加载时，测试对HTML5和CSS3的支持。详情参考期网站：
http://modernizr.com/
当你完成最基本的功能与特性后，根据浏览器的支持情况，慢慢地改进用户体验。
比如在一个输入框里，使用required属性，在用户提交表单之前，如果这个字段内容为空，则提醒用户。
是指当浏览不支持你所用到的特性时，提供一个替代方案。比如在canvas标签中加上文案，当不支持时提示用户。
其实没啥区别，都是为现代浏览使用新特性，同时为老旧的浏览器提供替代方案，最终的目的都是一样的。我(作者)的观点是：
不一定非得追求不同浏览器下用户体验的一致性。事实上，由于浏览器的不同，这甚至是无法做到的。 不管咋说，你要做的就是提供最基本的功能，然后为现代浏览器提供nb特性。
简单来说，(css)预处理工具(preprocessors)就是一种(css)编写工具，使用特定的语法来书写(css)， 然后通过对应的编译程序输出原生的(css)内容。
之于HTML，有Markdown和Jade。之于css，有LESS，Sass，Stylus。之于javascript，有Coffescript。之于PHP，有CakePHP。
也是当下的热门话题之一。有用吗？用来做啥？我要找个用吗？用哪个呢？
其实用也行，不用也没关系。
CSS预处理器为CSS提供了其本身不具有的面向对象语法特性，比如：
变量
函数(可带参数)
命名空间
嵌套
流程控制
运算
…
参考：https://github.com/xuyannan/sass-sample.git
最终的编译结果就是原生的css，通过预处理工具，你的代码更有可读性，更容易维护。在大型项目中作用尤为明显。
用哪个呢？
目前可供选择的有：
sass，用ruby编写
less，用javascript编写
Stylus，用php编写
Crush，用php编写
[本人偏向sass]
## 关注未来
编程语言一直在改变，CSS尤其如此。CSS标准一直在变，没有尽头，而浏览器也忙着支持新特性。
所以建议对于新事物保持敏感。知道哪些特性，在什么时候，被哪些浏览器支持了。
CSS运行在客户端，所以你能很容易地通过工具阅读其他人的代码。
另一个比较好的方式是跟着教程做。找到一个简单的教程，一步一步地去做。然后再自己实现一遍。
当掌握到一定程度时，你可能会想去了解一些nb效果是怎么实现的，而这些效果有没有现成的文档或教程可以教你。 那就需要靠自己去探索学习。你总会发现一些你做不到的事情，一山更比一山高。
(作者)推荐一个网站：http://codepen.io/
实践出真知。
做得越多你就越nb。并不是说从头到尾做一个站出来。在dribble上随便找一个设计， 然后用CSS实现出来，结果可能不是很有用，但你会从中学到东西。
之前提到的”掌握基础和技巧”，也是通过不断的实践，才会更好的掌握基础，并了解越来越多的技巧。
另外，要乐于分享。得到别人的建设性意见总是很用帮助的。所以在即将完成的时候，记得让其他人review一下你的代码。 把你的代码贴到jsfiddle，看看别人怎么说。
comments powered by Disqus