前言
又周末了，7月份快过去了。这周在review项目代码的时候，发现不管是sass还是less，大家都以为只是图方便少写代码，然后各种一层一层的嵌套下去，没有做过多的考虑。所以我们今天就来看看这篇
jtyjty翻译的文章。正文从这开始～
首先让我提醒你，css是极其简单的一门语言，简单到可以用三个词概括：选择器，属性以及属性的值。这也是一些人不喜欢css的原因：他们觉得写css像孩子玩乐高玩具一样简单。
是这样的。。如果你给一个9岁的孩子介绍css的基本原理，他就会搭建一个网站。不过这个网站不会很复杂，也就是一些包含头部，链接，内容图片的页面而已。
事实上，css是一门简单的语言，并不意味着每个人的水平一样。有些人写起css来就跟个大猩猩在玩棍子，有些人可以掌握css,而有些人可以使用魔法般的使用css。
不管怎样，我还是要给你分享一些我这几个月来理解的东西，这并不是一些代码片段或者是css小技巧，而更像是一些通用的规则或者是 实践之类的东西，如下：
不要让你的代码脱离你的掌控，尽量简洁
掌握基础，学习CSS技巧
保持代码的可复用性
面向对象的css
Css3了解他能做的以及你可以使用的部分
渐进增强与优雅降级
Css预处理工具
与时俱进
取长补短
熟能生巧
你想说什么呢？你准备好了？那我们继续往下吧。
1.不要让你的代码脱离你的掌控，尽量简洁
别让你的代码脱离你的掌控
这是编程的一种通用建议，不仅仅适合css.当你开始写代码的时候，先思考，思考以下几个问题：
我怎样实现？
有其他方法实现么？
怎样优化（简洁，可维护，等等）？
急于编码会浪费时间，你有可能花了一个小时也没实现，不得不从头再来，这不应该发生。
如果你花了好几个小时写一个css幻灯片，最终没办法用了个js幻灯片插件或者别的，这是很蛋疼的，并不是说你没成功，而是无谓的浪费了很多时间。如果项目有deadline的话，你就要悲剧了。
保持他的简单性
Css很简单，但如果你想，同样可以变得很复杂。在很多场景里，最简单的即是 的。当你要实现什么效果的时候，问问自己：还有更简单的方法实现么？答案经常是肯定的。
举个例子，简单水平导航栏，你可以有多种方法实现：
列表元素浮动；
改变列表元素display属性为inline；
改变列表元素display属性为inline-block。
最简单的-设置display:inline，不需要清除浮动，不需要清除inline-block造成的空白，只需要一些padding即可，结束。
2.掌握基础，学习CSS技巧
不仅是掌握css,掌握任何东西都要从基础做起。一个对最基本的东西都理解不透彻的人是不可能成为大师的。
CSS基础
什么是css基础呢？你可能会听到不同的声音，这也是一种无法用言语表达的东西。但我认为，css的基础是以下两部分：
盒模型：每个元素在css中都是一个盒子模型(块级或者内联)，包含宽高及各种paddingmarginborder.这是最重要的,详细可以阅读这里。
权重:了解哪个属性权重 ，在调试css中非常重要。更多相关信息可以阅读Assigningpropertyvalues,Cascading,andInheritance一文。
CSS技巧
当你了解了以上原理，才算踏上了康庄大道。那么现在你可能会处理一些特殊情况，下面展示了一些：
忘了在父元素设置position
这时候你会想：坑爹啊，怎么东西跑到页面左上角了？？？你忘了给父元素设置position:absolute或relative了。。
添加下下层技巧
每个搞前端的都被层叠上下文折磨过。这个例子告诉我们，你不能对一个已经触发层叠上下文的元素（可能是z-index,transform或者是透明度）的子元素来应用z-index属性。这没有变通方案，一旦你遇到过， 会记忆犹新。。
忘了清除浮动的技巧
你的布局乱套了，容器乱飞。你泪流满面：这是肿摸了。。请检查下浮动，可能忘了清除浮动了。
记住，一个容器如果仅仅包含浮动元素，他会塌陷，除非你清除浮动或者设置height或者overflow属性。
这种例子比比皆是，如果继续写那就没完没了了，这不是我这篇文章的目的。
我只是想指出每天，人们都会不断的发现，css有很多的特性跟特殊情况。你可能这一次踩个坑，下次就知道怎么对付了。
3.保持代码的可复用性
Dry代表不要重复自己。这并不是css特有的，这适合任何语言。
它的核心思想是，能重用的代码就不要写第n遍。在别的语言意味着封装成function,在css里，常常代表你需要利用一个可复用的类来代替重复应用的一个属性。这将在后面的面向对象css中进一步讲解。其实对于重构来说这是很简单的，我来解释一下：
当你在你的样式表里发现一段代码多次使用的时候，你需要重构一下，最终变成只出现一次（可复用）。例子：
明白么？你肯定会纳闷，这俩有啥区别啊？有两点需要考虑：性能跟可维护性。
关于性能：更少的行数意味着浏览器解析css会更快。按照下面这样写，浏览器会同时给两个选择器应用颜色，而不会解析两次。
关于可维护性，如果你需要修改类似的颜色，这样只需要修改一行，这里可能仅仅是两行，如果50行，行呢。
扩展阅读
DRYCSS,don’trepeatyourCSS
DRYCSS:adon’t-repeat-yourselfmethodologyforcreatingefficient,unifiedandscalablestylesheets
4.面向对象的css
这是什么东东？
Oocss意思是面向对象的css，经常在其他面向对象的语言中出现这个名词。意思是利用一个“对象”，通常为一个类的实例（包含一些属性和方法）。你可能会问：这跟css有啥关系啊。
首先我要说明，oocss更像一个概念，css是不能真的“面向对象编程”的，因为没有命名空间，函数，方法，类，条件语句等。因此你要是谈oocss可能会被人嘲讽。
事实上我也是这么认为的，但我们可以利用这样的思想来促进css的书写，让网站性能提升，提高可维护性。
我们应该怎么做？
很简单，使用类名，各种类名。可以把你的网站想象成一个带有很多“方法”跟“组件”的地方，尝试找出这些重复的部分，把他们作为“对象”(类名)，从而重用。
为了让你的对象划分的更精确，有两点需要注意：
分离结构与表现
分离容器与内容
单独的结构和样式
分离结构与表现是很重要的，这样你就可以单独操作负责显示的部分，让这部分在网站中多次出现，并且作用于不同的元素上。看看下面的代码，它可以作用到一个盒子，一个图片，或者一个按钮上：
另外我们可以用一个叫做.skin的类名代替，然后应用到所要使用的元素上
这样使用，会让css样式表更加容易让人理解，更容易维护，解析更快。
单独的容器（结构）和内容
我认为这是oocss最重要的一点：每种组件拥有独立的代码，而不是在你某次写页面时配合页面的特定部分来定义。在你的站点中，类似的组件应该重用，就像下面代码一样：
这时候不管是我从页面底部再次使用h2，或者我用同样的思想使用h3，都可以类似上面所写的，创建一个类，并给类设置样式，而不是给元素单独设置样式。
关于从不使用ID的一说？
当NicoleSullivan提出oocss的概念时，最热烈的讨论是“ 不使用id选择器么？”NicholasC.Zakas与NicoleSullivan在他们的csslint(css质量检查工具)中特别反对对id选择器的使用。
为了理解nicole的观点，我们必须认识到id选择器因为高权重会在使用中出现一些问题。如下代码（代码来自于这里）：
如果让 个twitter的链接变黑，你有两种选择：给一个id,或者利用！important选择器来机枪打蚊子。如果header是一个类名，就不会有这种问题了。
这也是NicoleSullivan为什么讲“noID”的原因。
我引用harryroberts对此话题的一个讨论来作为这节结束
[...]Ihavedecidedthatablanketbanissensible.SaveyourselfmanypotentialheadachesandneveruseIDsinyourCSSfiles.
当然原则上id是可以使用的，而且很易生效
我对OOCSS的理解
事实上我并不熟悉oocss。因为我并不在一个拥有很多前端的的大型网站工作。Oocss对大型网站架构很有用，但不适合单页面作战。
然而虽然我并未应用oocss，但我北京 白癜风专科重庆治疗白癜风的医院