制作了一组简洁的 CSS 基础样式，为 demo 提供轻量的美化

[sunjourney]

如果你的 demo 不需要复杂的样式，觉得 bootstrap 、UI 组件库太重，只用到了原生的 DOM 结构演示 DEMO ，又嫌 CSS 裸奔太丑，可以尝试这组基础样式。支持 sass 、less 、stylus 、全局使用。

在线预览： https://styled-css-base.zheeeng.me/

全局使用:

js/ts:

import 'styled-css-base/presets/simple/index.css';

css:

@import "styled-css-base/presets/simple/index.css";

搭配预处理器：

scss:

.showcase {
    @import "styled-css-base/presets/simple/index";
}

less:

.showcase {
  @import "styled-css-base/presets/simple/index";
}

或:

.showcase {
  @import (less) "styled-css-base/presets/simple/index.css";
}

stylus:

.showcase {
    @import "styled-css-base/presets/simple/index";
}

项目地址： https://github.com/zheeeng/styled-css-base

[gausszhou]

好想法！

[wonderfulcxm]

可以一试，上次用的还是 simple.css

[ragnaroks]

楼主可以换一种思路，基于 tailwindcss 提供一个组件的样式代码（ https://tailblocks.cc/ ）

[zzzmh]

已收藏 太牛了

[sunjourney]

@ragnaroks #3 tailwind 和 windi 都是我之前用的方案，但是还是有点重，只是为我的一些功能库的 demo 提供看得过去的样式又不需要配置，用 webpack 、vite 、parcel 、snowpack 都得去寻找各自的插件，只要你支持 CSS 预处理器，用不用打包器都可以零配入手，当然不支持 CSS 预处理器也可以用，变成全局样式而已。

[Asimov01]

很棒！想法比较像我正在用的 water.css ，但是感觉更好看点，已 star 。

[luanjia]

赞，对后端极其友好