一款快速便捷的 CSS 实时编辑器，仅支持 HTML 和 CSS
千万别在生产环境中使用这段代码。最好完全不要用（？）。不过话说回来，这代码真不错！
你可以自定义样式标签😶 你还可以给样式标签添加 contentEditable 属性。这样，你就可以构建自己的原生实时 CSS 编辑器了！
如果您将此代码/元素粘贴到 body 标签的末尾，您将拥有一个快速的原生 CSS 编辑器。
<style
contenteditable="true"
style="z-index:1;
position:fixed;
top:0;
right:0;
width:300px;
background:#fff;
min-height:100vh;
display:block !important;
overflow: auto;
padding:14px;
border-left: solid 1px #cccccc">
body {min-height: 100vh;}
</style>
我个人很喜欢这段代码片段的一点是样式和 body 之间的元关系。当样式标签中的代码赋予 body 正确的大小以显示样式标签本身时，看看body {min-height: 100vh;}.
如果你喜欢，这里有一支笔：
欢迎使用高亮插件 ;)
文章来源：https://dev.to/felipperegazio/a-quick-and-cool-css-live-editor-with-html-css-only-53j3