关于前端:思路分享如何尝试创建自己的CSS框架

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

目录：

[toc]

一开始

我构建此框架的起因很简略：我本人想要一个 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，它让所有都变得更美妙。兴许是时候去试试了。

Tailwind.css容许你用他们的“partical（粒子、碎片）”格调类建设本人的框架。我很喜爱这样的解决方案，因为它是 HTML 模板的原始用法。

<button class="mx-4 p-2 text-gray-600 bg-gray-300">button</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。

<div class="md:flex bg-white rounded-lg p-6">
  <img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg" />
  <div class="text-center md:text-left">
    <h2 class="text-lg">Erin Lindford</h2>
    <div class="text-purple-500">Customer Support</div>
    <div class="text-gray-600">erinlindford@example.com</div>
    <div class="text-gray-600">(555) 765-4321</div>
  </div>
</div>

Tailwind.css 的长处：

• 无固持己见的格调
• 低级别实用 class
• 设计可定制
• 插件零碎
• 基于 Postcss 生态系统

Tailwind.css 的毛病：

• 模板可能过于“拥挤”
• 文件大小为“大”，须要在构建时清理。
• 实用程序的语义较少

即便 Tailwind.css 有一些毛病，我认为这些毛病也能够被长处远远地对消。所以在我的框架中，我须要想出解决这些毛病的打算。

不得不说第二个和第三个毛病曾经是 Tailwind.css 的“特色”的一部分了，我无奈解脱它。然而第一个“拥挤的模板”仿佛很容易均衡。多亏了 Tailwind.css 弱小的性能，我还能够通过以下形式编写款式：

.container {
  @apply bg-white rounded-lg p-6;

  @screen md {@apply flex;}
}

我置信 blow 这个用法看起来好多了，不是吗?

如果我心愿略微扭转一下 .container，我也能够应用“模板款式”间接装璜它。

<div class="container font-bold mx-2">
  ...
</div>

我分明和明确，我不是第一个这样想的人，但至多这能够成为我的框架在其余框架中怀才不遇的一个很好的特点。

外围性能

因为我心愿为我的框架做出差别，所以我提出了这样的外围个性来实现：无设计和可扩大。

首先，Tailwind.css 是“无设计的”，它为咱们的开发人员提供了款式的齐全控制权。我将遵循这一点，并确保我所有的组件都只是蕴含非常简单的款式的骨架。如果需要的话，组件会有字体 text-size color background-color padding margins 等等。

.button {
  @apply appearance-none;
  @apply select-none;
  @apply align-middle;
  @apply font-medium;
  @apply text-center;
  @apply text-base;
  @apply no-underline;
  @apply leading-normal;
  @apply whitespace-no-wrap;
  @apply inline-block;
  @apply cursor-pointer;
  @apply rounded-sm;
  @apply py-1 px-3;
}

这样一来，所有的组件只有增加新的款式笼罩，就能够批改成想要的形态。它遵循了咱们应该如何解决 CSS 款式的原始实际。

假如咱们正在设计“骨架按钮”的款式。

从这样：

到这样：

<button class="button text-gray-700 bg-gray-300 hover:bg-gray-500 transition-colors duration-150">
  Background Gray
</button>

简略来说：Class + Utilities = 你的时尚组件。

模板中看起来太拥挤了，因而，应用它的更好办法可能是 扩大 以后 类。

.button {
  @apply text-gray-700;
  @apply bg-gray-300;
  @apply transition-colors
  @apply duration-150;

  &:hover {@apply bg-gray-500;}
}

总结

剩下的工作将是实现我心愿在框架中领有的所有其余组件。创立每个组件所需的工夫比以前要少，因为我定义了如何将“骨架”组件用作外围性能。

当初，所有必要的组件都能够用来构建网站。依然存在很多弊病，但我认为从零开始创立本人不善于的货色对我来说是一个成就。

无论如何，我将持续开发框架，我心愿你也对我在这里的小工作感兴趣。