喜欢 JavaScript，但讨厌 CSS？

一位读者写信说，他使用 JS 和 React 玩得很开心，但当涉及到样式时，他就不知所措了。

我喜欢 JavaScript，但讨厌 CSS。我实在没耐心把东西弄得好看。

写代码很有趣。解决问题也很有趣。当你终于让电脑按照你的意愿做事时，那种幸福的感觉真是太棒了。

但话说回来：糟糕，CSS。应用虽然运行正常，但外观却很糟糕，而且没人会认真对待它，因为它看起来不像 Apple(TM)。

你并不孤单

首先，我想说的是：如果你喜欢前端开发的一切，除了 CSS，那么你并不孤单。我认识一些真正专业的 UI 开发者，他们的工作要么设计得很差劲，要么虽然能做到，但他们却总是忍气吞声，想尽快结束。

几年前我就处于这种境地。CSS 就像一个神奇的黑匣子，我往里面输入代码，它至少有 60% 的时间会输出比我刚开始写的时候更糟糕的结果。我用 Google 和 StackOverflow 解决了大部分 CSS 问题，并且疯狂地希望有人以前遇到过我遇到过的问题（通常情况下，他们确实遇到过）。

但后来我走出了那个黑暗的境地，我可以说 CSS（以及将样式应用到页面的过程）是一项可以学习的技能。甚至设计也是一项可以学习的技能。而且，需要说明的是，它们是不同的技能。

造型不是设计

采用现有的视觉设计并编写 CSS 来转换一大块以匹配视觉设计的过程div称为样式化。

在一张空白的画布上构思出一个美观的网站的过程称为设计。

你可能在其中一个方面表现良好（甚至非常好），但同时在另一个方面却表现得很差。

要成为前端开发人员，您需要一些样式（CSS）技能，但不一定需要设计技能。

你能避免使用 CSS 吗？

我希望我能告诉你，你可以忘记所有 CSS，并 100% 的时间停留在 JS 领域。

但说实话，我做不到。如果你想做前端开发，你最终还是得亲自动手，学习一些 CSS。

不过，我的经验告诉你，一旦你对 CSS 有了一点了解，它就会变得好很多。它甚至会很有趣！当我能够把一个页面布局得恰到好处，并且知道需要调整哪些参数才能让它看起来符合我的要求时，我感到很满足。

该怎么办

尽管您无法完全避免使用 CSS，但有一些方法可以使样式变得不那么糟糕。

框架

CSS 框架可以帮助您快速启动项目，甚至弥补设计技能的不足。它们通常以 npm/yarn 的可安装库形式提供，或通过 CDN 获取。每种框架都有各自的视觉风格，因此在选择时需要权衡它们的外观。CSS 框架可以帮助您构建美观的应用程序，而无需过多地纠结于样式。

以下是一些流行的选择（我重点关注那些与 React 配合良好的选择）：

Bootstrap - 非常流行（阅读：SO 上有很多问题和答案），而且外观也不错。最新版本（v4）看起来更现代，但旧版本现在看起来有点过时了。你可以用自己的 CSS 自定义它，或者使用免费和付费主题来更改外观。如果你使用 React，可以看看react-bootstrap，它提供了许多预制组件，例如模态对话框、弹窗、表单等。

语义 UI - 另一个带有 React 组件的流行 CSS 框架，它比 Bootstrap 拥有更多的可用组件，并且（我认为）外观更现代。

Blueprint - 我认为 Blueprint 看起来很棒，在我看来，比 Bootstrap 或 Semantic UI 更好。但我自己没用过。Blueprint 的一个突出特点是它是用 TypeScript 编写的（并且支持 TypeScript）。它不需要TypeScript，但如果你使用 TS，它可能值得一看。

市面上有大量的 CSS 框架可供选择。以下是一些支持 React 的框架的列表。

虽然框架可能有助于您避免接触太多 CSS，但接下来的两件事可以让您更轻松地直接使用 CSS。

弹性盒子

弹性盒布局是一种使用 CSS 进行内容布局的现代方法，比float旧版（或者你 5 分钟前还在黑暗中摸索）更容易上手。它拥有良好的浏览器支持，并且让一些传统上用 CSS 很难实现的功能变得非常简单，比如垂直居中。

看看这个：

看看那个红色小方块居中位置多好！带有灰色边框的外框只需要以下三行 CSS 代码即可实现：

display: flex; /* turn flexbox on */
justify-content: center; /* center horizontally */ 
align-items: center; /* center vertically */

如果你右键点击它并检查元素，你会发现它不止这三行……但它们并不负责将红色框居中。这些额外的内容赋予了它灰色边框，使其成为正方形，margin: 0 auto并使其在这篇博文中水平居中（），底部边距则让它与下方的文本有一些空间。

如果你有兴趣了解更多， CSS Tricks 有一篇很棒的Flexbox 完整指南。我建议你去看看！Flexbox 真的帮助我掌握了 CSS，现在它是我解决大多数布局问题的首选工具。

CSS网格

网格是一种更现代的布局方式，比弹性盒子更强大。它可以处理二维空间（行和列），而弹性盒子更擅长处理单向或双向空间。浏览器支持相当不错。根据 CSS Tricks 的说法：

截至 2017 年 3 月，大多数浏览器都已原生支持 CSS 网格布局，且不带前缀：Chrome（包括 Android 版）、Firefox、Safari（包括 iOS 版）和 Opera。另一方面，Internet Explorer 10 和 11 也支持网格布局，但其实现方式比较老旧，语法也比较过时。现在，是时候使用网格布局进行构建了！

在我写这篇文章的时候，我只是粗略地尝试了一下 CSS 网格布局。它比弹性盒子更强大，也更复杂一些，而且我发现弹性盒子在大多数情况下都能很好地满足我的需求。不过，它在我的学习清单上！

您可以阅读 CSS Tricks 的CSS Grid 完整指南来了解更多信息。