ACSS 「原子化CSS 」

原子组件库是一种极简，高效容易管理的组件库。

是目前唯一可以做到 CSS 代码随着项目推进越来越少的代码库。

类似张老师的 quicklayout.css。但是命名这边有做进一步的约束：

只取首字母 .db{ display:block; };
有数字直接连接 .mb10{ margin-bottom:unit(10); };
百分号用p（percent）表示 .w100p{ width:100%; };
小数点用d（dot）表示 .lh1d2{ line-height:1.2};

使用方式

原生 HTML 中的使用

<div class="pl16 pr16 pt16 pb16 tac c_000">
	hello world!
</div>

CSS Module 中的使用

<div className={`pl16 pr16 pt16 pb16 tac c_000`}>
	hello world!
</div>

style component 中的使用

<div pl16 pr16 pt16 pb16 tac c_000>
	hello world!
</div>

表示，padding:16p 16px 16px 16px; text-align:center; color:#000;

推荐阅读

「CSS思维」组件化VS原子化
如何管理 CSS “内裤”
quickLayout.css-快速构建结构兼容的web页面 @张老师；
「英」在组件化浪潮中重新思考CSS @johnpolacek 虽然是英文，但是网页做得像PPT一样，通俗易懂，强推；
ACSS 官网 @雅虎这个思维最早应该是雅虎推出来的，最近他们有在推 React ACSS
关于HTML语义和前端架构 @大漠；
「译」CSS通用类和“关注点分离” @adamwathan；
「英」Styling React @SURVIVEJS；
「英」CSS最佳实践探讨 - Atomic CSS @smashingmagazine；

目录其它 CSS 最佳实践