[译] 热爱 JavaScript，可是讨厌 CSS ？

• 原文地址：Love JavaScript, but hate CSS?
• 原文做者：Dave Ceddia
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：allenlongbaobao
• 校对者：Xekin-FE、L9m

一个读者留言说他本身写起 JS 和 React 来以为颇有趣，可是当要处理样式的时候，他就很沮丧。

我热爱 JavaScript 可是我讨厌 CSS，我没有耐心去改变这一现状。

编程是有趣的，解决问题也是有趣的。当你经历千辛万苦让你的程序正确运行的时候，这种感受，简直难以想象。

然而，哦，糟糕，是 CSS。你的 App 运行得很好，就是样式有点糟糕，那么没有人会把它当回事，由于它不像 Apple(TM) 看上去那么高大上。

你不是一我的

首先，我要明确一个事：若是你热爱前端中的其余全部事，除了 CSS，那么你并非另类。我在现实 工做 中认识一些专业级别的 UI 开发者，他们要么在样式处理方面很糟糕，要么 能解决样式问题 可是讨厌这个过程而且千方百计尽快把这一环节熬过去。

几年前我也曾经历过这样的困境，CSS 就像是一个有魔力的黑盒，每当我往里面输入一些代码，至少三分之二的状况下，它会输出一些比我开始编码前还要糟糕的东西。我经过 Google 和 StackOverflow 来解决大部分的 CSS 难题，而且发疯似地祈祷有人遇到跟我如出一辙的难题（从某种意义上来说，他们的确有过）。

当我从那个不堪回首的阴影下走出来后，我能够负责任地说：CSS（以及给页面应用样式这一过程）是一项可习得的技能。甚至 设计 也是一项可习得的技能。严格来说，它们是不一样的技能。

样式应用不等同与设计

拿到现成的视觉设计稿，而后经过写 CSS 代码把一大堆 div 转化成和设计稿相匹配，这个过程就是所谓的 样式应用（ styling ）

拿过来一块空白画布，在上面呈现出一个美观的网页，这个过程是所谓的 设计（ design ）

可能出现的状况是：你作到了熟练掌握（甚至是精通）这两项中的其中一项，与此同时，另外一项则是一窍不通。

做为一个前端，你须要掌握必定的样式应用技巧（CSS），但不必定须要掌握设计技巧

我能选择逃避 CSS 吗？

我也但愿我能大声地告诉你：忘掉 CSS 吧，只要 100% 专一于 JS 就能够了。

可是真相是：我不能。只要你还想走前端这条路，就不可避免地跟 CSS 打交道，学习一些 CSS。

经验告诉我，一旦你对 CSS 了解多了一点，它看上去就没那么难，甚至还有点有趣。当我发现我能正确地应用样式到一个页面，而且知道修改哪一个参数让它达到我想要的效果，这种感受，也是很使人满意的。

我该怎么作？

既然不能逃避，那么就学一些让 CSS 不怎么难的技巧吧。

框架

CSS 框架能让你快速开发项目，它能很好地弥补设计技巧的不足。一般，它们均可以经过 npm/yarn 来安装，或者经过 CDN 来部署。每种框架都有本身的特点样式，因此你在作选择的时候就要有所权衡。CSS 框架可以帮助你搭建一个美观的应用，其中避免了大量样式布局的困扰（至少没那么多）。

如下就是一些流行的框架（我选了一些和 React 兼容的）：

• Bootstrap —— 很是流行（注：在 SO 上有大量的问答），并且外观很正式。最新版本（V4）看上去更加现代化，老版本显得有些过期了。你能够自定义样式，也可使用免费主题和 付费主题 来改变它的外观。若是你正在使用 React，能够经过 react-bootstrap 来获取大量的预制组件好比现代化控件、弹框、表单等等。

• Semantic UI —— 另外一个兼容 React 组件的流行 CSS 框架，它的可用组件比 Bootstrap 更多，外观上（我认为）更加的现代化。

• Blueprint —— Blueprint 外观上比 Bootstrap 和 Semantic UI 更棒，至少我这么以为。可是我本身没有使用过它。Blueprint 脱颖而出的一点是它是用 TypeScript 写的，并且支持 TypeScript 开发。它并不 依赖 TypeScript，可是若是你在用 TS，那么它值得一试。

除了以上三种，还有不少好用的 CSS 框架。下面是一些 列表 ，它们都支持 React。

若是说框架是让你少碰一些 CSS，那么下面两种方法就更加直接地帮助你轻松应对 CSS。

弹性布局（Flexbox）

弹性布局是一种使用 CSS 来呈现内容的现代化布局方式。相对于以前的 float 浮动布局（或者五分钟前的瞎蒙乱撞），它简单不少。它拥有 很好的浏览器兼容性 而且十分简单地就能解决 CSS 的一些史诗级难题，好比 垂直居中 。

看这里：

想象一下如何优雅地让红色方块居中！只须要在外部的灰色块中添加三行 CSS 语句就能作到：

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

若是你在浏览器中右击外部灰色块，而后查看元素，你会发现它里面远远不止三行…… 可是多出来的那些并不负责居中红方块。增长的代码给了它一个灰色边框，让它成为一个矩形块，在文章中水平居中 （ margin: a auto ），底部的 margin 给了下面的文字一些空间。

若是你对弹性布局感兴趣，在 CSS Tricks 有极好的 弹性布局完整指南 ，强力推荐。弹性布局切实帮助我更好地运用 CSS，它也是我如今正在研究解决布局问题的工具。

CSS 网格布局

网格布局是一种更加现代化的布局方式，它比弹性布局更增强大。前者能解决二维（行和列）上的布局，后者更擅长解决单一的行或者列上的布局。它在浏览器兼容上 表现良好 。CSS Tricks 上这样说道：

从 2017 年 3 月起，绝大多数的浏览器在应用网格布局时已无需添加任何前缀，好比：Chrome （包括 Android）、Firefox、Safari（包括 iOS）以及 Opera。IE 10 和 11 也支持它，可是它基于一种过期的语法来实现的。网格布局的时代来临了！

在我写这篇文章的时候，我仅仅只在排版上尝试过网格布局。它比弹性布局更强大，也更复杂。我发现绝大部分状况弹性布局已经能很好地知足个人需求。网格布局是我下一步要学习的目标。

有兴趣了解更多地话，能够阅读 CSS Tricks 中的 网格布局完整指南

更具操做性的方法

解决 CSS 问题有大量的有用策略。尽量避免随机乱猜或者直接从 StackOverflow 上复制粘贴来完成任务。

尝试一种更加靠谱的方式吧。

• 定位元素（弹性、网格，大不了在相对定位的父元素中绝对定位子元素）
• 设置元素的 margin 和 padding 的值
• 设置边框
• 设置一种背景颜色
• 而后 完善细节 —— 增长阴影、设置 :hover/:active/:focus 下的调整样式等等。

总而言之，软件工程中的经典法则好比 DRY (Don’t Repeat Yourself) 以及 Law of Demeter 均可以应用到样式布局中来。举个例子，思考一下如何结合头像布局用户信息：

咱们发现每一个元素都距离边缘 20 像素，那么一种实现方法就是两个元素都设置 margin 值为 20px。

可是这样作有缺点。首先，重复问题：若是说 margin 值须要改变，那么咱们须要在两处修改。

其次，相对于内部元素本身决定与边缘的距离，这难道不该该是外部盒子的职责吗？

一个更好的解决方式是外部盒子设置其 padding 值为 20px，这样一来，内部元素就不用操心本身的位置了。这样也方便添加新的元素到盒子中 —— 你不用显式声明每一个元素的位置

这仅仅是一个小例子，用来明确一点：思考问题加上有逻辑的方法可以让布局变得简单得多。

实践步骤

1. 找到三个布局样式，复制下来。这些能够是你在使用的站点的小组件（单个推文、一个相册卡等等），也能够是现实内容好比信用卡、书籍封面等等。
2. 阅读 弹性布局完整手册.
3. 使用弹性布局去实现你在步骤一中挑选的布局。

• 欢迎在推特上关注我 @dceddia

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。