acss-vanilla
Atomic css 原生版本。
Atomic 是一种极简，高效的 CSS 代码库。 是目前唯一可以做到随着项目推进 CSS 代码越来越少的代码库。 类似张老师的 quicklayout.css。
如何使用?
npm i @_y/acss-vanilla
<head>
<link rel="stylesheet" href="css/acss.min.css">
</head>
<body>
<div class="tac c_000">
hello world!
</div>
</body>表示： text-align:center; color:#000;
命名规则
- 只取首字母 .db{ display:block; };
- 有数字直接连接 .mb10{ margin-bottom:10px; };
- 百分号用p（percent）表示 .w100p{ width:100%; };
- 小数点用d（dot）表示 .lh1d2{ line-height:1.2};
- 想要自定义，用
_分割单词，pa_auto;
API
API 主要分为 结构，样式，和自定义三个部分。
具体细则可以看未压缩CSS版本注释。
css/acss.css
API 结构
结构主要包括 display，position，float，flex 和其它。
可以看到这里并不包含间距部分。因为不同的项目对于 margin 和 padding 的规则不一样，所以需要按照自己的项目按照
有数字直接连接 .mb10{ margin-bottom:10px; };
这个规则自行拓展。如果觉得构建比较麻烦，建议采用 acss-less 和 acss-sass 内置的 mixin 进行生成。比如在 sass 中可以这样使用。
@include acss-p((2, 4, 8, 12, 16, 20, 24, 32));会生成以上数字对应的4个方向代码。
API 样式
样式主要包括 字体，颜色。
在代码注释中可以看到 acss.min.css 只包含了黑白两个颜色。
如果想要自定义按照以下规则推展。
.c_xl{ color: #111; } /* 文字比深更深 */
.c_l { color: #222; } /* 文字加深 */
.c_m { color: #333; } /* 文字主色 */
.c_s { color: #666; } /* 文字减比弱更弱 */.c_primary { color: blue; } /* 主色 */
.c_secondary { color: blue; } /* 次级颜色 */
.c_success { color: green; } /* 成功 */
.c_danger { color: red; } /* 失败 */
.c_warning { color: yellow; } /* 警告 */
API 自定义样式
| 类名 | 作用 |
|---|---|
.auto |
带宽度的 block 元素水平居中对齐 |
.clearfix |
清除浮动 |
.ell |
单行文字超出容器显示点点点 |
.ell2row |
两行文字超出容器显示点点点, 需要结合行高使用 |
.i |
icon 图标基础方法 |
.trans |
transition 动画 |
.pa_middle |
基于 position:absolute 上下居中 （兼容性） |
.pa_center |
基于 position:absolute 左右居中 （兼容性） |
.pa_auto |
基于 position:absolute 上下左右居中 （兼容性） |
DEMO
<iframe src="./demo.html" frameborder="1" height="400" width="100%"></iframe>相关阅读
- 「CSS思维」组件化VS原子化
- 如何管理 CSS “内裤”
- quickLayout.css-快速构建结构兼容的web页面 @张老师；
- 「英」在组件化浪潮中重新思考CSS @johnpolacek 虽然是英文，但是网页做得像PPT一样，通俗易懂，强推；
- ACSS 官网 @雅虎 这个思维最早应该是雅虎推出来的，最近他们有在推 React ACSS
- 关于HTML语义和前端架构 @大漠；
- 「译」CSS通用类和“关注点分离” @adamwathan；
- 「英」Styling React @SURVIVEJS；
- 「英」CSS最佳实践探讨 - Atomic CSS @smashingmagazine；