一个思路，如何尝试创建自己的CSS框架？

在2019年，我创建了一个CSS框架并将其命名为Rotala.css[1]。经过一些重构和修改，我终于在2020年发布了“玩具”框架。但它仍在原型设计中，因为我认为我的解决方案还不优雅。

创新互联长期为上千多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为丰泽企业提供专业的网站设计、成都网站建设，丰泽网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

原文|https://pitayan.com/posts/css-framework-attempt

作者|Yanze Dai

目录

• 一开始
• 重新尝试
• 构建源文件夹
• 创造不同
• 核心功能
• 总结

一开始

我构建此框架的原因很简单：我自己想要一个CSS框架。

我知道从头开始构建它会花费很多时间。因此，我希望站在其他强大的工具上来创建这样的框架，以加快开发速度。

最初，我开始使用 SASS 进行原型设计。它是一个工具，可让你组合许多独特的语法，以便你可以像编程一样体验CSS的设计。

 
 
 
 

  
  
  
  
@mixin button-icon { 
  
  
  
  
  margin: 0 2px; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
.button { 
  
  
  
  
  padding: 2px; 
  
  
  
  
 
  
  
  
  
  @include button-icon; 
  
  
  
  
} 
 
 
 
 

坦白地说，我从其他著名的框架(如Bootstrap和Bulma和Spectre和Miligram)中学到了很多好的技术。我从他们那里借来了一些好的设计，尤其是从 Spectre.css 那里借来的(模仿别人来重新发明轮子没有什么可耻的)。

重新尝试

CSS从来不是我的专长，所以我并没有期待我最初的原型设计能有什么好东西。我第一次做的东西都是脆弱的和“copy-cat”。框架中没有“我创造的”。

即使只是一次没有经验的尝试，我又怎么能承担如此糟糕的结果呢?

毫无疑问，我从头开始。这次，我要做一个很棒的。棒到让我微笑。

一个偶然的机会，我看到一个视频，说的是一个不同的CSS框架Tailwind.css，它让一切都变得更美好。也许是时候去试试了。

https://tailwindui.com/

Tailwind.css允许你用他们的“partical(粒子、碎片)”风格类建立自己的框架。我很喜欢这样的解决方案，因为它是HTML模板的原始用法。

 
 
 
 

  
  
  
  
button 
 
 
 
 

Tailwind.css中的所有内容都进行了细分，因此将这些类写入元素就像将构建块放在一起一样。

然而，我的Rotala.css会输出样式表而不是模板。所以，我必须想办法让它在构建时吐出一些文件。

研究证明我的担心是多余的，Tailwind.css中的所有样式都可以像SASS一样通过适当的配置编译成一个小的css文件。

 
 
 
 

  
  
  
  
/* Base */ 
  
  
  
  
@import "tailwindcss/base"; 
  
  
  
  
@import "./base.pcss"; 
  
  
  
  
 
  
  
  
  
/* Components */ 
  
  
  
  
@import "tailwindcss/components"; 
  
  
  
  
@import "./components.pcss"; 
 
 
 
 

使用 postcss-cli 使编译变得简单

 
 
 
 

  
  
  
  
$ postcss docs/main.pcss -o docs/assets/css/rotala.css 
  
  
  
  
... 
 
 
 
 

从build命令可以看到，我完全放弃了SASS并迁移到Postcss。SASS并没有什么不好，但我只是希望我的框架只使用一种技术，以避免某些复杂性。

构建源文件夹

随着一遍又一遍地重新启动所有内容，我终于找到了一种模式，可以使我的代码库保持良好的状态。

源文件夹结构如下所示：

 
 
 
 

  
  
  
  
rotala/ 
  
  
  
  
  docs/ 
  
  
  
  
  style/ 
  
  
  
  
  CHANGELOG.md 
  
  
  
  
  README.md 
  
  
  
  
  package.json 
  
  
  
  
  postcss.config.js 
 
 
 
 

docs/ 文件夹用于保存可以帮助演示输出的静态文件。这也是Github页面的替代设置，可以轻松地帮助发布静态页面而无需额外的路由参数。

 
 
 
 

  
  
  
  
docs/ 
  
  
  
  
  assets/ 
  
  
  
  
  base/ 
  
  
  
  
  components/ 
  
  
  
  
  index.html 
  
  
  
  
  main.pcss 
 
 
 
 

style/ 包含所有源样式。最初，我制作了大约20个组件，因为我认为它们对于构建现代网站的基本部分非常必要。这些样式很大程度上基于Spectre.css和Bulma(我是这些框架的粉丝)。

 
 
 
 

  
  
  
  
style/ 
  
  
  
  
  base/ 
  
  
  
  
  components/ 
  
  
  
  
    Accordion/ 
  
  
  
  
    Typography/ 
  
  
  
  
    Badge/ 
  
  
  
  
    Breadcrumb/ 
  
  
  
  
    Tooltip/ 
  
  
  
  
    Button/ 
  
  
  
  
    Checkbox/ 
  
  
  
  
    Divider/ 
  
  
  
  
    Drawer/ 
  
  
  
  
    Table Group/ 
  
  
  
  
    Form Group/ 
  
  
  
  
    Input/ 
  
  
  
  
    Tab/ 
  
  
  
  
    Avatar/ 
  
  
  
  
    Link/ 
  
  
  
  
    Menu/ 
  
  
  
  
    Modal/ 
  
  
  
  
    Notification/ 
  
  
  
  
    Pagination/ 
  
  
  
  
    Popover/ 
  
  
  
  
    Radio/ 
  
  
  
  
    Select/ 
  
  
  
  
  base.pcss 
  
  
  
  
  components.pcss 
  
  
  
  
  main.pcss 
  
  
  
  
  prefix.pcss 
 
 
 
 

创造不同

当你读到这一行时，你可能会问：既然你抄袭了很多其他框架的设计，那它和其他框架有什么不同?

我的脑子里也有同样的问题，我的意图是创建自己的CSS框架。

重塑别人的作品看起来不像是一种“为自己创造”的精神。这意味着这个小框架将永远是我的玩具，对其他开发人员没有价值。

其实，我也希望别人能从我建造的东西中受益。但我已经厌倦了从头再创造一切，有没有一种简单的方法，通过添加一些画龙点睛的手法，让这个死气沉沉的项目起死回生?

很难做到“与众不同”，特别是当你没有很好的灵感时。

如果我退后一步，考虑一下Tailwind.css的优缺点，我是否可以基于Tailwind.css的传统和它的“缺点”建立一个新的功能?我想答案应该是YES。

   
 
 
 

    
  
  
  
 
    
  
  
  
   
    
  
  
  
   
    
  
  
  
    Erin Lindford 
    
  
  
  
    Customer Support