2019年，我创建了一个CSS框架，命名为Rotala.css。经过一些重构和修补，我终于在2020年发布了“玩具”框架。但它仍然是原型设计，因为我认为我的解决方案还不够优雅。我最初构建这个框架的原因很简单：我想要一个属于自己的CSS框架。我知道从头开始构建它需要很多时间。因此，我希望在其他强大的工具之上创建这样一个框架，以加快开发速度。最初，我开始使用SASS进行原型设计。它是一个可以让您组合许多独特语法的工具，这样您就可以像编程一样体验使用CSS进行设计。@mixinbutton-icon{margin:02px;}.button{padding:2px;@includebutton-icon;}坦率地说，我从Bootstrap和Bulma以及Spectre和MiligramTechnology等其他著名框架中学到了很多东西。我从他们那里借来了一些好的设计，尤其是从Spectre.css那里借来的（通过复制别人来重新发明轮子并不丢人）。重新体验CSS从来都不是我的强项，所以我对最初的原型设计没有任何期待。我第一次做的一切都是脆弱的和“模仿猫”。框架中没有“我创建”。哪怕只是一次没有经验的尝试，我又怎能承受如此糟糕的结果呢？毫无疑问，我是从头开始的。这一次，我要做一个伟大的。太棒了，足以让我微笑。一次偶然的机会，我看到了一个关于不同CSS框架Tailwind.css的视频，它使一切变得更好。也许是时候尝试一下了。Tailwind.css允许您使用其“部分”样式类构建自己的框架。我喜欢这样的解决方案，因为它是HTML模板的原始用途。buttonTailwind.css中的所有东西都被细分了，所以把这些类写到元素上就像简单一样将积木放在一起。但是，我的Rotala.css输出的是样式表而不是模板。所以，我必须想办法让它在构建时吐出一些文件。研究证明我的担心是多余的，Tailwind.css中的所有样式都可以像SASS一样通过适当的配置编译成一个小的css文件。/*基础*/@import"tailwindcss/base";@import"./base.pcss";/*组件*/@import"tailwindcss/components";@import"./components.pcss";使用postcss-cli使编译变得简单$postcssdocs/main.pcss-odocs/assets/css/rotala.css...正如您从构建命令中看到的那样，我完全放弃了SASS并迁移到了Postcss。SASS没有什么不好，但我只是希望我的框架只使用一种技术来避免一些复杂性。构建源文件夹通过一遍又一遍地重新启动所有内容，我终于找到了一个让我的代码库保持良好状态的模式。源文件夹结构如下：rotala/docs/style/CHANGELOG.mdREADME.mdpackage.jsonpostcss.config.jsdocs/文件夹用于保存有助于演示输出的静态文件。这也是Github页面的另一种设置，它可以轻松帮助发布静态页面而无需额外的路由参数。docs/assets/base/components/index.htmlmain.pcssstyle/包含所有源样式。最初，我制作了大约20个组件，因为我认为它们是构建现代网站的基本部分所必需的。这些样式在很大程度上基于Spectre.css和Bulma（我是这些框架的粉丝）。样式/基础/组件/手风琴/排版/徽章/面包屑/工具提示/按钮/复选框/分隔线/抽屉/表格组/表单组/输入/选项卡/头像/链接/菜单/模态/通知/分页/弹出框/收音机/Select/base.pcsscomponents.pcssmain.pcssprefix.pcssMakethedifference当你看到这行的时候，你可能会问：既然你抄袭了很多其他框架的设计，那么它和其他框架有什么不同呢？我脑子里有同样的问题，我打算创建自己的CSS框架。重新创造别人的作品似乎不像是“为自己创造”的精神。这意味着这个小框架将永远是我的玩具，对其他开发人员没有任何价值。事实上，我也希望其他人能从我构建的东西中受益。但是我厌倦了从头开始重新创建所有内容，是否有一种简单的方法可以通过添加一些收尾工作使这个死掉的项目起死回生？很难做到“与众不同”，尤其是当你没有很好的灵感时。如果我退一步思考Tailwind.css的优缺点，我是否可以基于Tailwind.css的遗留及其“缺点”构建新功能？我认为答案应该是肯定的。ErinLindford客户支持
