适用于Web开发人员和设计人员的5大CSS工具

本文概述

• PostCSS
• PurgeCSS
• Tailwind
• Saas
• CSS Linters

CSS已经走了很长一段路, 但是围绕它的工具直到现在都还没有。

如果你觉得编写CSS就像在tar坑中与怪物战斗, 那么你并不孤单。 CSS是支持Web的最基本的技术之一, 但它本身并不是适当的编程语言或框架。结果, 一旦你的项目开始变得越来越突出, 那么混乱也就越来越多了-选择器规则似乎无处不在, 很难找到什么地方。当你在页面上包含字体, 外部CSS, JS和其他资源时, 捆绑包的最终大小似乎变得一发不可收拾, 并且你想知道快速, 用户友好的前端的理想在哪里丢失了。

但是不必那样。今天, 围绕CSS的工具已经发展到一个水平, 不仅可以驯服工作流, 还可以使工作流变得令人愉悦。在本文中, 我将讨论五个在我的工作中具有巨大价值的CSS工具。我有意识地避免使用CSS生成器, 菜单生成器等”玩具”工具, 因为它们产生的问题超出了解决的范围。

CSS火车即将来临！我们走吧！ ????

PostCSS

如果你喜欢JavaScript, 就会喜欢我们现在可以通过JavaScript添加和控制CSS的想法。而这正是PostCSS提供的功能。

但是, 不仅仅是CSS上的基于JavaScript的语法糖。 PostCSS将几个功能强大的软件包/功能包装在一起, 从而在处理CSS时使工作流程更加轻松愉快。例如：

• 供应商前缀会根据你使用的属性自动添加。
• 检测哪些CSS功能可以在当前浏览器上使用的功能。
• 使用即将发布但尚未发布但功能非常强大的CSS语法更新。
• 尽可能灵活的响应式网格。

如果不包括网格示例, 我想我不会对PostCSS公正。所以我们开始。像这样简单的事情：

div {
  lost-column: 1/3 
}

被转换为成熟的CSS系统, 几乎所有边缘情况都得到了照顾：

div {
  width: calc(99.9% * 1/3 -  
  (30px - 30px * 1/3)); 
}
div:nth-child(1n) {
  float: left; 
  margin-right: 30px; 
  clear: none; 
}
div:last-child {
  margin-right: 0; 
}
div:nth-child(3n) {
  margin-right: 0; 
  float: right; 
}
div:nth-child(3n + 1) {
  clear: both; 
}

由于它是由JS驱动的, 因此PostCSS的设置并不十分容易, 尤其是如果你是设计师并且与模块, 捆绑器和npm世界没有太多关系。就是说, PostCSS在你的工作中具有巨大的潜力, 不应忽视。

PurgeCSS

你是否喜欢基于现代前端框架的工作流, 但对它们带来太多负担而感到沮丧？如果是, 至少在考虑CSS的情况下, PurgeCSS是你的朋友。

对于那些可能不知道有什么大不了的人：这里有一个简短的总结。当你使用诸如React, Angular, Vue等前端框架构建单页应用程序时, 你将经历所谓的”构建过程”。本质上, 你将所有CSS, JS, SASS等代码编写在单独的文件中(按照你认为最直观的方式进行组织), 但是一旦完成, 便告诉捆绑程序”构建”该东西。这样做是读取你编写的所有源代码, 对其应用各种过滤器(最小化, 混淆/丑化等), 并将输出吐出到单个文件中, 通常所有JavaScript都为” app.js”, 并且所有CSS的” app.css”。这些文件以及一个瘦的” index.html”是运行应用程序前端所需的全部。缺点是, 由于所有内容都包含在这些最终文件中, 因此它们的大小通常会超出快速响应时间所允许的范围；例如, 看到超过500 KB的” app.js”并不少见！

PurgeCSS被添加为构建工作流的一部分, 并防止未使用的CSS捆绑到最终输出中。典型的用例是Bootstrap：这是一个中等大小的库, 其中包含针对不同组件的多个UI类。例如, 如果你的应用程序使用了Bootstrap类的10％, 则其余90％是最终CSS文件中唯一的膨胀。但是由于有了PurgeCSS, 可以识别出这些未使用的CSS文件并阻止其在构建过程中使用, 从而最终的CSS文件要小得多(将大小减小5-6倍是很正常的)。

因此, 继续使用PurgeCSS清除不必要的CSS！ ????

Tailwind

Tailwind是一个CSS框架, 但它与实际情况大相径庭, 以至于我认为应该在CSS工具中加入它。如果你讨厌内联CSS(不是？), 那么Tailwind很可能会在你第一次遇到它时使你退缩。让我们先来看看如何使用Tailwind CSS编写典型的表单：

<div class="w-full max-w-xs">
  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
        Username
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
    </div>
    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
        Password
      </label>
      <input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
      <p class="text-red-500 text-xs italic">Please choose a password.</p>
    </div>
    <div class="flex items-center justify-between">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Sign In
      </button>
      <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
        Forgot Password?
      </a>
    </div>
  </form>
  <p class="text-center text-gray-500 text-xs">
    ©2019 Acme Corp. All rights reserved.
  </p>
</div>

“这是个玩笑吗？！那些烦人的小班级有哪些？经过仔细检查, 为什么我直接在HTML中设置边距, 填充和颜色？这是2019年还是什么？”

这些想法是可以预期的。我知道, 因为我有同感, 立即关闭了Tailwind的盖子。直到后来, 我才看到一个播客, 在那儿, 来宾重做了Tailwind上一个时髦, 大小合适的网站, 我开始关注它。

在继续之前, 请考虑以下问题：

• 你是否厌倦了记住标准框架类及其功能, 以便可以根据自己的喜好来定制设计？一个很好的例子是更改Bootstrap导航栏的外观和行为。
• 你是否认为诸如Bootstrap之类的流行框架过于矫揉造作, 并尝试做超出其应有的作用？
• 你是否发现自己混合框架是因为你想要世界上最好的？
• 你是否希望对设计有更多的控制权, 却发现原始CSS体验不胜枚举？

如果对上述任何一个的回答为”是”, 则你非常需要Tailwind。现在让我们看一下Tailwind是什么以及它的作用。

Tailwind是所谓的实用程序优先CSS, 与我们在日常工作流程中所做的不同：语义CSS。语义CSS和实用程序CSS之间的区别在于, 前者试图通过显示在页面上的可视部分的名称来对样式元素进行分组。因此, 如果你在页面上有导航菜单, 卡片, 轮播等, 那么处理这些内容的语义方法就是将CSS样式规则归类为.nav, .card, .carousel等类, 其子部分相应地标记(例如, .card-body, .card-footer等)。到目前为止, 这是使用CSS的最常用方法, 我们所有人都通过Bootstrap, Foundation, Bulma, UI Kit等框架熟悉它。

另一方面, 正是根据其功能来编写CSS名称类的”实用”风格：控制顶部和底部边距的类将命名为.margin-y-medium, 并且可以在HTML中的任何位置应用在需要此边距的地方加价。尽管这确实引入了一些类名蠕变(只是快速浏览一下我之前共享的代码或屏幕截图-如此多的类！), 但是CSS的意图非常清晰：你无需跳转在文档, CSS和HTML之间来回切换, 以找出正确的名称和正确的效果。

这是一种非常自由的工作方式, 但也有一个要点：你需要充分掌握CSS基础(包括Flexbox等现代概念)。这是因为Tailwind不为页面上的任何组件提供现成的样式, 而是由你根据给定的构建基块来构建样式。另一个问题是设置问题：Tailwind允许你将多个CSS类组合在一起称为组件, 但这是通过JavaScript完成的, 并且需要模块加载器和打包程序(例如Webpack)。

总而言之, Tailwind是一种极化的, 引人注目的新颖的样式设计方式, 它将吸引那些渴望更大程度的简化和控制的人。

Saas

尽管Sass已经存在了很长时间, 但我将其包含在此处是因为开发人员仍然不知道它的用处。风格上很棒的样式表(或称SASS)是CSS的超集, 其开发目的是在CSS增长到几行之后, 遏制项目蔓延的疯狂现象。

想象一下：为项目编写CSS已经走了很长一段路。你使用的是几种颜色, 已经为各种div, 字体样式等找到了合理的边距。除了现在你意识到它并不能很好地结合在一起。也许你想为所有部分, 卡片和按钮尝试更大的页边距。好吧, 现在呢？甚至必须通过巨大的CSS文件进行搜索替换的想法也足以让人头疼。我们已经做到了, 而且我们都知道它容易出错。 Sass通过引入变量来解决此问题：

编写HTML时, 我们会将元素嵌套在其他元素中。但是在编写CSS时, 我们必须编写平坦的规则层次结构, 这使得很难将CSS从精神上”适合”到HTML上。使用Sass, 你可以模仿样式文件中的页面结构：

所有这些甚至还没有开始触及Sass提供的东西：模块化设计, 包含文件, mixins, 继承。 。 。这个清单不胜枚举。当然, 你需要学习Sass编译器工作流程并将其包含在你的工作流程中, 但我认为, 花几个小时才能使你一次又一次地赚钱！

CSS Linters

由于网页设计师(和UI开发人员(尽管我不知道这两个术语有何不同))使用简单的文本编辑器(或者像现在这样, 通常是直接从Chrome开发工具中获取代码), 所以他们很少能听到或受益于短毛绒。另一方面, 使用诸如VS Code, Sublime Text或其他IDE之类的优秀文本编辑器的程序员对此工具非常了解, 因为这是他们的第二天性。无论如何, 关键是, 如果你是那些被杂乱的CSS淹没的CSS开发人员之一, 那么你可以从短绒猫中受益。

简而言之, lint是一个程序, 用于检查你的代码是否存在错误和不一致。它借助一套规则来做到这一点, 以弄清什么地方是错误的, 哪些地方是不一致的。优良的Linter与IDE和代码编辑器集成在一起, 可以配置为每次保存源文件时运行。在编写CSS文件时, 它们还可以帮助你进行颜色预览, 错误和自动补全：

但是, 这是最好的部分-如果你遵循特定的CSS样式和格式, 则可以对短绒棉进行调整, 以使你满意。这样可以确保项目中的CSS遵循相同的样式指南(还可以将linter配置为在每次保存/提交源代码时自动格式化文件)。因此, 无论你是团队工作还是独自工作, 皮棉绒总是对项目工作流程的有益补充。

总结

我敢肯定, 到目前为止, 你已经确信, 现代CSS的开发与过去的放任不管的方法相去甚远。 ????

就是说, 即使听起来像是破唱片, 我也会再次承认一些东西：本文中介绍的一些工具不容易设置, 尤其是如果你对npm生态系统的态度不友好时。但是, 在你感到厌恶并转过脸来之前, 请告诉我：初次学习CSS容易吗？学习以div为中心, 掌握浮动信息的情绪波动等是否容易？同样, 我在这里介绍的工具具有一定的学习曲线, 但值得一试。

老实说, 一旦你开始体验结果, 就会因不尽快这样做而踢自己。而且, 不要低估模块化, 精简和组织良好的CSS的重要性！