CSS开发工具介绍
CSS已经走了很长一段路，但是直到现在，围绕它的工具才有了。
如果您觉得编写CSS就像在tar坑中与怪物战斗，那么您并不孤单。虽然CSS是支持Web的最基本技术之一，但它本身并不是适当的编程语言或框架。结果，一旦您的项目开始变得越来越突出，那么混乱也就出现了。选择器规则似乎无处不在，很难找到其中的内容。当您在页面上包含字体，外部CSS，JS和其他资源时，捆绑包的最终大小似乎变得一发不可收拾，并且您想知道快速，用户友好的前端的理想在哪里丢失了。
但是不必那样。如今，围绕CSS的工具已经发展到一个水平，不仅可以驯服工作流程，还可以使工作流程变得令人愉悦。在本文中，我将讨论五种这样的CSS工具，这些工具在我的工作中具有巨大的价值。我有意识地避免使用诸如CSS生成器，菜单生成器之类的“玩具”工具，因为它们产生的问题多于解决的问题。
CSS火车即将来临！我们走吧！
1PostCSS
如果您喜欢JavaScript，那么您会喜欢我们现在可以通过JavaScript添加和控制CSS的想法。而这正是PostCSS提供的功能。
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在您的工作中的潜力是巨大的，不应忽视。
2Purge CSS
您是否喜欢基于现代前端框架的工作流，但对它们带来太多负担感到沮丧？如果是，至少在考虑CSS的情况下，PurgeCSS是您的朋友。
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 ！
3Tailwind
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之类的流行框架过于矫and过正，并尝试做超出其应有的作用？
您是否发现自己混合框架是因为您想要世界上最好的？
您是否希望对设计有更多控制权，却发现香草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是一种崭新的，令人振奋的样式设计方式，将吸引那些渴望更大程度简化和控制的人。
4Sass
尽管Sass已经存在了很长时间，但我将其包含在此处是因为开发人员仍然不知道它的用处。从风格上讲，超棒样式表（或称SASS）是CSS的超集，其开发目的是在CSS扩展到几行之后，驯服蠕动进入项目的疯狂行为。
上海社会科学院
想象一下：为项目编写CSS已经走了很长一段路。您正在使用几种颜色，已经为各种div，字体样式等找到了合理的边距。除了现在您意识到它并不能很好地结合在一起。也许您想为所有部分，卡片和按钮尝试更大的页边距。好吧，现在呢？甚至必须通过巨大的CSS文件进行搜索替换的想法也足以让人头疼。我们都已经做到了，而且我们都知道它容易出错。Sass通过引入变量来解决此问题：
Sass变量
编写HTML时，我们会将元素嵌套在其他元素中。但是在编写CSS时，我们必须编写平坦的规则层次结构，这使得很难将CSS从精神上“适合”到HTML上。使用Sass，您可以模仿样式文件中的页面结构：
无礼的筑巢
所有这些甚至还没有开始触及Sass提供的东西：模块化设计，包括文件，mixins，继承。。。这个清单不胜枚举。当然，您需要学习Sass编译器工作流程并将其包含在您的工作中，但是我认为，花几个小时才能使您一次又一次地赚钱！
5 CSS Linter
由于网页设计师（和UI开发人员（尽管我不知道这两个术语有何不同））使用简单的文本编辑器（或者像现在这样，通常是直接从Chrome开发者工具中获取代码），因此他们很少能听到或受益于棉短绒。另一方面，使用诸如VS Code，Sublime Text或其他IDE的优秀文本编辑器的程序员对此工具非常了解，因为这是他们的第二天性。无论如何，关键是，如果您是那些被杂乱的CSS淹没的CSS开发人员之一，则可以从linter中受益。
棉短绒
简而言之，lint是一个程序，用于检查您的代码是否存在错误和不一致。它借助一组规则来做到这一点，以找出错误和不一致之处。优良的短毛绒与IDE和代码编辑器集成在一起，可以配置为在每次保存源文件时运行。在编写CSS文件时，它们还可以帮助您进行颜色预览，错误和自动补全：
vscode CSS
但是，这是最好的部分-如果您遵循特定的CSS样式和格式，则可以对短毛绒进行调整，使其满意。这样可以确保项目中的CSS遵循相同的样式指南（还可以将linter配置为在每次保存/提交源代码时自动格式化文件）。因此，无论您是团队工作还是独自工作，短绒棉绒总是对项目工作流程的有益补充。
结论
我敢肯定，到现在为止，您已经确信现代CSS开发与过去的“放任不管”方法相去甚远。🙂
就是说，即使听起来像是破唱片，我也会再次承认一些东西：本文中介绍的某些工具 不容易设置，尤其是如果您对npm生态系统的态度不佳时，尤其如此。但是，在您感到厌恶并转过脸来之前，请告诉我：初次学习 CSS容易吗？学习以div为中心，掌握的情绪波动等是否容易floats？类似地，我在这里描述的工具具有一定的学习曲线，但是非常值得。