易维护、高移植性的css 书写方法

一

why：css 没有作用域的概念，不同css文件，如果选择器相同，会造成覆盖

/* profile.css */
.error { color: orange; }
.success { color: blue; }
/* signup.css */
.error { color: red; }
.success { color: green; }

当项目逐渐变大，样式就难于预料；一个模块的样式，可能由很多文件的css起作用，也不利用移植

how:怎么解决css 无作用域的问题呢

what：利用命名方式，模拟css 作用域。

/* profile.css */
.profile-error { color: orange; }
.profile-success { color: blue; }
/* signup.css */
.signup-error { color: red; }
.signup-success { color: green; }

利用模块前缀，可以避免模块的css被其他css文件修改

二

.whitepaper-link {
  font-weight: bold;
  font-size:12px;
}

.main-nav .whitepaper-link {
  font-size:16px;
}

.main-footer .whitepaper-link {
  font-size:9px;
}

如上种，css 依赖html 的结构。如果html 的结构发生变化，css 就不发生作用。依赖html 的结构，阻止了css 的复用。如何避免 nesting selectors 呢？

.whitepaper-link {
  font-weight: bold;
  font-size:12px;
}

.whitepaper-link-large {
  font-size:16px;
}

.whitepaper-link-small {
  font-size:9px;
}

在css后面，根据具体使用，添加状态，这样就可以复用css

补充：上述的class，whitepaper-link ; whitepaper-link-large;whitepaper-link-small；从名字看之间有非常强的继承关系，但是代码没有反应出来。利用function css ，如less、stylus ，能通过extend 关键字，将这种关系体现在代码里面，这样就更易于维护和使用

转自：http://flippinawesome.org/2013/08/26/functional-css-fcss/?