设计师应该如何学习编码？ Git、HTML/CSS、工程原理（第 2 部分）

已发表: 2022-03-10

快速总结 ↬在第 1 部分中，Paul 解释了终端的基础知识，分享了一些帮助您入门的生产力技巧，以及如何选择代码编辑器。在这一部分中，他将继续讨论版本控制 (Git)、HTML 和 CSS、语义代码等主题，并简要介绍一些关键工程原则。

从字面上看，大部头都写在版本控制上。不过，我将首先分享一个简短的解释和其他介绍性内容，以激发您进一步学习的兴趣。

版本控制（不要与版本历史混淆）基本上是人们在自己的环境中就单个项目进行协作的一种方式，具有单一的主要事实来源（通常称为“主”分支）。

我今天要讲的内容是您下载项目、进行更改然后将其发送给 master 所需要知道的最低要求。

有许多类型的版本控制软件和许多用于管理和托管源代码的工具（您可能听说过 GitLab 或 Bitbucket）。 Git 和 GitHub 是比较常见的组合之一，我的示例将参考 GitHub，但这些原则将适用于大多数其他源代码管理器。

旁白：

有关更全面和技术性的介绍，请参阅 Tobias Gunther 的文章。
如果您更喜欢动手实践的方法，GitHub 有一个出色的分步指南。

收集数据，强大的方式

你知道 CSS 可以用来收集统计数据吗？事实上，甚至还有一种仅使用 CSS 的方法来使用 Google Analytics 跟踪 UI 交互。阅读相关文章 →

跳跃后更多！继续往下看↓

你的第一个贡献

在执行这些步骤之前，您需要进行一些设置：

一个 GitHub 帐户，
在您的计算机上安装 Node 和 NPM，
对疼痛的高容忍度或向他人寻求帮助的低门槛。

第 1 步：分叉（在您的 GitHub 帐户上获取代码副本）

在 GitHub 上，您将分叉（fork = 在您的帐户中创建代码的副本；在下图中，蓝色、橙色、红色和绿色的线显示分叉）有问题的存储库 (repo)。

通过从 master 创建分支，多人可以为项目的不同领域做出贡献，然后将他们的工作合并在一起。（大预览）

您可以通过导航到 GitHub 中的存储库并单击当前位于存储库右上角的“分叉”按钮来执行此操作。这将是“起源”——你在 GitHub 帐户上的分叉。

例如，导航到 https://github.com/yourGitHubUsername/liferay.design 应该会显示您的 Liferay.Design 存储库的分支。

第 2 步：克隆（将代码下载到您的计算机）

在您的终端中，导航到您要存储代码的位置。就个人而言，我的/user文件夹中有一个/github文件夹——它使我更容易以这种方式组织它。如果您想这样做，请按照以下步骤操作 - 在终端窗口中输入这些命令后，按↵键执行：

 cd ~/ ## you'll usually start in your root directory, but just in case you don't this will take you there mkdir github ## this creates a "github" folder — on OSX it will now be located at users/your-username/github cd github ## this command navigates you inside the github folder

现在您位于/github文件夹中，您将克隆（将代码副本下载到您的计算机上）repo。

 clone https://github.com/yourGitHubUsername/liferay.design

输入此命令后，您将在终端中看到一堆活动——如下所示：

 Cloning into 'liferay.design'... remote: Enumerating objects: 380, done. remote: Total 380 (delta 0), reused 0 (delta 0), pack-reused 380 Receiving objects: 100% (380/380), 789.24 KiB | 2.78 MiB/s, done. Resolving deltas: 100% (189/189), done.

第 3 步：安装（让它在您的机器上运行）

导航到/project文件夹。在这种情况下，我们将输入cd liferay.design 。大多数项目将在/root文件夹中包含一个README.md文件，这通常是安装和运行项目的起点。出于我们的目的，要安装，请输入npm install 。安装完成后，输入npm run dev 。

恭喜！您现在可以在本地计算机上使用该站点 - 通常项目会告诉您它在哪里运行。在这种情况下，打开浏览器并转到localhost:7777 。

第 4 步：提交（进行一些更改并保存）

提交是您所做的更改的集合；我听说它被描述为在游戏中保存你的进度。关于如何构建提交有很多意见：我的观点是当你完成一件事时你应该创建一个提交，如果你要删除提交，它不会完全破坏项目（在合理范围内）。

如果您不打算改变想法来进行回购，那么“问题”选项卡是一个不错的去处。在这里您可以看到项目中需要完成的工作。

如果你确实有一些改变的想法，那就去做吧。保存文件后，以下是创建提交所需的步骤：

 git status ## this will print out a list of files that you've made changes in git add path/to/folder/or/file.ext ## this will add the file or folder to the commit git commit -m 'Summarize the changes you've made' ## this command creates a commit and a commit message

提示：我见过的关于提交消息的最佳建议来自 Chris Breams 的“如何编写 Git 提交消息”。 格式正确的 Git 提交主题行应始终能够完成以下句子：“如果应用，此提交将 [您的主题行在此处]。” 有关提交的更多信息，请查看 Clarice Bouwer 的“Why I Create Atomic Commits In Git”。

第 5 步：推送（将您的更改发送到您的来源）

在计算机上进行一些更改后，在将它们合并到主分支（添加到项目中）之前，需要将它们从本地移动到远程存储库。为此，请在命令行中输入git push origin 。

第 6 步：拉取请求（请求将您的更改合并到上游）

现在您的更改已经从您的手指到您的计算机，到您的远程存储库 - 现在是时候要求通过拉取请求 (PR) 将它们合并到项目中。

最简单的方法是访问 GitHub 中的 repo 页面。文件窗口上方会出现一条小消息，上面写着“此分支是 X 提前提交 repo-name:branch”，然后是“拉取请求”或“比较”选项。

单击此处的“拉取请求”选项将带您进入可以比较更改的页面，然后显示“创建拉取请求”的按钮将带您进入“打开拉取请求”页面，您将在其中添加标题并包含评论。简短但在评论中足够详细，将有助于项目维护人员了解您提出的更改。

有像 Node GH（GitHub 最近也发布了他们的 CLI 工具的测试版）这样的 CLI 工具，允许您在终端中发起和管理拉取请求。此时您可能更喜欢使用 Web 界面，这很棒！我也是。

奖励步骤：远程（链接所有回购）

此时，我们有三个存储库引用：

upstream ：您正在跟踪的主要 repo，通常是您分叉的 repo；
origin ：您克隆的遥控器的默认名称；
local ：当前在您计算机上的代码。

到目前为止，您有 #2 和 #3 — 但 #1 很重要，因为它是主要来源。使这三件事保持一致将有助于保持提交历史的整洁。这有助于项目维护人员在您发送拉取请求 (PR) 时消除（或至少最小化）合并冲突，并帮助您获取最新代码并使本地和原始存储库保持最新。

设置上游遥控器

要跟踪上游远程，请在您的终端中输入以下内容：

 git remote add upstream https://github.com/liferay-design/liferay.design

现在，检查一下你有哪些可用的遥控器——在你的终端中输入git remote -v ，你应该会看到如下内容：

`origin`和`upstream`是遥控器最常见的标签——'origin' 是你的 fork，'upstream' 是源。（大预览）

 origin https://github.com/yourGitHubUsername/liferay.design (fetch) origin https://github.com/yourGitHubUsername/liferay.design (push) upstream https://github.com/liferay-design/liferay.design (fetch) upstream https://github.com/liferay-design/liferay.design (push)

这将允许您快速获取上游内容的最新版本——如果您已经很长时间没有在 repo 中工作并且没有想要保留的任何本地更改，这是我使用的一个方便的命令：

 git pull upstream master && git reset --hard upstream/master

GitHub 帮助是一个很好的资源，可以解决这个问题以及您可能遇到的许多其他问题。

HTML 和 CSS：从语义开始

在网络上，学习 HTML 和 CSS 的资源源源不断。出于本文的目的，我将根据以下内容分享我的建议~~我犯的错误~~我是如何开始学习编写 HTML 和 CSS 的。

什么是 HTML 和 CSS？

在我们进一步讨论之前，让我们定义 HTML 和 CSS。

HTML 代表超文本标记语言。

超文本：

“超文本是显示在计算机显示器或其他电子设备上的文本，其中包含对读者可以立即访问的其他文本的引用（超链接）。”

——维基百科上的“超文本”

标记语言：

“……一种以在语法上与文本可区分的方式注释文档的系统。”

——维基百科上的“标记语言”

如果您也不知道其中很多词的含义 — 简而言之，HTML 是网络上文档之间的引用（链接）和用于为这些文档提供结构的标签的组合。

几乎所有基本元素都有一个 HTML5 标签——否则你总是可以使用`div` ！（大预览）

对于 HTML 和 CSS 的全面介绍，我强烈推荐 HTML 和 CSS 的第一步，两者都在Mozilla 开发人员网络 (MDN)网络文档上。连同诸如 CSS Tricks、24 Ways 和无数其他网站提供的优秀文章，基本上包含了您在 HTML/CSS 方面需要参考的所有内容。

HTML文档有两个主要部分： <head>和<body> 。 - <head>包含浏览器不显示的内容——元数据和导入样式表和脚本的链接。 - <body>包含将由浏览器呈现的实际内容。为了呈现内容，浏览器读取 HTML，根据使用的标签类型提供样式的基础层，添加网站本身提供的额外样式层（样式包含在/从<head>中引用，或者是内联的），这就是我们最终看到的。（注意：通常还有额外的 JavaScript 层，但这超出了本文的范围。）

CSS代表 Cascading Style Sheets — 它用于通过更轻松地为文档提供自定义外观来扩展 HTML。样式表是一个文档，它通过基于标签、类、ID 和其他选择器设置规则来告诉 HTML 元素应该是什么样子（以及它们应该如何定位）。级联是指在规则冲突不可避免的情况下确定工作表中哪些规则优先的方法。

“'级联'意味着样式可以从一个样式表落入（或级联）到另一个样式表，从而可以在一个 HTML 文档上使用多个样式表。”

— 级联 — 最大设计

CSS 通常名声不好——在有大量样式表的网站中，它很快就会变得笨拙，特别是如果没有使用文档的、一致的方法（稍后会详细介绍）——但如果你以有组织的方式使用它并遵循所有最佳实践，CSS 可以成为你最好的朋友。尤其是现在大多数现代浏览器都提供了布局功能，CSS 几乎不像以前那样需要破解和战斗了。

Rachel Andrew 写了一个很棒的指南，How To Learn CSS——在你开始之前最好知道的事情之一是：

“你不需要记住每个 CSS 属性和值。”

— 雷切尔·安德鲁

相反，学习基础知识更为重要——选择器、继承、盒子模型，最重要的是，如何调试 CSS 代码（提示：您将需要浏览器开发工具）。

不要担心记住background属性的语法，也不要担心忘记如何准确对齐 Flexbox 中的内容（Flexbox 的 CSS 技巧指南可能是我访问次数最多的前 10 个页面之一！ ); 在 CSS 属性和值方面，Google 和 Stack Overflow 是您的朋友。

例如，一些代码编辑器甚至具有内置的自动完成功能，因此您甚至无需在网络上搜索即可找出边框的所有可能属性。

Firefox 70 中我最喜欢的新功能之一是非活动 CSS 规则指示器。它将节省您尝试找出未应用样式的原因的时间。

语义

让我们从语义代码开始。语义是指单词的含义，语义代码是指任何给定语言中的标记都有意义的想法。

语义很重要的原因有很多。如果我可以总结一下，我会说如果你学习和使用语义代码，它会让你的生活变得更轻松，因为你会免费获得很多东西——谁不喜欢免费的东西？

有关语义代码的更完整介绍，请参阅 Paul Boag 关于该主题的简短博客文章。

语义为您带来许多好处：

默认样式
例如，使用标题标签<h1>作为文档的标题将使它从文档的其余内容中脱颖而出，就像标题一样。
无障碍内容
默认情况下，您的代码将可访问，这意味着它可以与屏幕阅读器一起使用，并且更易于使用键盘进行导航。
搜索引擎优化的好处
语义标记对于机器来说更容易阅读，这使得搜索引擎更容易访问。
性能优势
干净的 HTML 是高性能网站的基础。干净的 HTML 也可能导致更干净的 CSS，这意味着整体代码更少，使您的网站或应用程序更快。

注意：为了更深入地了解语义和 HTML，Heydon Pickering 写了“结构语义：HTML5 分割元素的重要性”，我强烈推荐阅读。

工程原理和范式：基础

抽象

关于抽象的概念，我们可以探索大量的应用程序、切线和层次——对于本文来说太多了，本文旨在向您简要介绍概念，以便您在继续学习时了解它们。

抽象是具有广泛应用的基础工程范式——就本文而言，抽象是将形式与功能分离。我们将在三个方面应用它：令牌、组件和不要重复自己的原则。

代币

如果您使用现代设计工具很长时间，您可能已经遇到过令牌的想法。甚至 Photoshop 和 Illustrator 现在也有这种在集中式库中共享样式的想法——您使用令牌而不是将值硬编码到设计中。如果您熟悉 CSS 或 SASS 变量的概念，那么您已经熟悉令牌。

使用标记的抽象层是为颜色分配名称——例如， $blue-00可以映射到十六进制值（或 HSL 值，或任何你想要的值）——比如说#0B5FFF 。现在，不用在样式表中使用十六进制值，而是使用标记值——这样，如果您确定blue-00实际上是#0B36CE ，那么您只需在一个地方更改它。这是一个很好的概念。

如果您采用相同的抽象范式并更进一步，您可以进行令牌感知- 并将变量分配给函数值。如果您有一个强大的系统并希望在系统中拥有不同的主题，这将特别有用。这方面的一个功能性示例是分配一个变量，如$primary-color并将其映射到$blue-00 - 所以现在您可以创建标记，而不是引用蓝色，而是引用一个功能变量。如果您想使用相同的标记，但使用不同的样式（主题），那么您只需将$primary-color映射到新颜色，您的标记根本不需要更改！魔法！

成分

在过去的 3-4 年中，组件和组件化的想法对设计师来说变得更加相关和容易理解。符号的概念（由 Macromedia/Adobe Fireworks 开创，后来由 Sketch 扩展，然后由 Figma 和 Framer 提升到一个新的水平），现在在大多数设计工具（Adobe XD、InVision Studio、Webflow 和许多其他）。组件化，甚至比标记更能将事物的形式与功能分开——这有助于改进形式和功能。

Nicole Sullivan 的媒体对象组件是早期最著名的例子之一。乍一看，您可能没有意识到整个页面本质上是由以不同方式呈现的单个组件组成的。通过这种方式，我们可以重用相同的标记（表单），通过传入选项或参数和样式对其进行轻微修改——并让它提供各种值（函数）。

不要重复自己

DRY （不要重复自己）是我最喜欢的原则之一——创造可以反复重用的东西是你在编码时可以获得的小胜利之一。

虽然您通常不能（并且可以说不应该）努力在每次 100% 的时间里应用 DRY 原则——至少意识到这一点是有益的，这样在您工作时，您可以考虑如何可以使您正在处理的任何事情更可重用。

关于三法则的注释： DRY 原则的一个推论是三法则——本质上，一旦你重复使用（复制/粘贴）某些东西 3 次，你应该将它重写为可重复使用的组件。与海盗守则一样，它更像是一个指导方针，而不是一个硬性规定，并且可能因组件和项目而异。

CSS 和样式方法：原子与 BEM

有很多不同的方式来组织和编写 CSS 代码——Atomic 和 BEM 只是您可能遇到的众多方式中的两种。您不必“挑选”一个，也不必完全遵循它们。我合作过的大多数团队通常都有自己独特的组合，基于项目或技术。熟悉它们会很有帮助，这样随着时间的推移，您可以了解根据情况采取哪种方法。

所有这些方法都超越了“单纯”的 CSS 和样式，并且通常会影响您使用的工具、组织文件的方式以及潜在的标记。

原子 CSS

不要与 Atomic Web Design 混淆——atomic（也许更恰当地称为“功能性”）CSS，是一种本质上倾向于使用小型、单一用途的类来定义视觉功能的方法。一些著名的图书馆：

史蒂夫卡尔森的原子CSS；
亚当莫尔斯的超光速粒子；
亚当·沃森的 Tailwind CSS。

我喜欢这种方法的地方在于，它允许您快速设置样式和主题 - 最大的缺点之一是您的标记可能会变得非常混乱，非常快。

查看 John Polacek 关于 CSS-tricks 的文章以获得对 Atomic CSS 的完整介绍。

边界元法

BEM 哲学是许多现代 JavaScript 框架（如 Angular、React 和 Vue）的重要先驱。

“BEM（块、元素、修饰符）是一种基于组件的 Web 开发方法。”

— BEM：快速入门

基本上，所有可以重用的东西都是一个块。块由元素、不能在块之外使用的东西以及可能的其他块组成。修饰符是描述某事物的状态或它的外观或行为方式的事物。

就个人而言，我喜欢 BEM 的理论和哲学。我不喜欢的是事物的命名方式。太多的下划线、连字符，并且会让人感觉不必要的重复（ .menu 、 .menu__item等）。

推荐阅读： Inna Belaya 为初学者编写的 BEM

谢谢你，下一个（.js）

在你充分掌握了这些主题之后，别担心，还有很多东西要学。一些建议：

函数式和面向对象的编程
我们只是简单地谈到了它，但是除了 CSS 之外还有很多东西需要学习。
高级语言和框架
Typescript、Ruby、React、Vue 是您掌握 HTML 和 CSS 后接下来要解决的问题。
查询语言和使用数据
学习 GraphQL、MySQL、REST API 将使您的编码能力更上一层楼。

结论：编码的设计师！= 软件工程师

希望本文向您展示了学习编码并不像您之前想象的那么困难。这可能需要很多时间，但互联网上可用的资源数量惊人，而且并没有减少——恰恰相反！

我要强调的重要一点是，“编码”与“软件工程”不同——能够从 Stack Overflow 分叉一个 repo 并复制/粘贴代码可以让你走得很远，而大多数情况下，如果并非所有人，我认识的软件工程师都这样做了——你必须以智慧和谦逊的态度使用你新发现的技能。对于您现在可以通过一些工程能力访问的所有内容，还有更多您不知道的内容。虽然您可能认为某个功能或样式很容易实现，因为——“嘿，我在 devtools 中得到了它！” 或“我让它在 Codepen 中工作。” — 有许多您可能不知道的工程流程、依赖项和方法。

这就是说——不要忘记我们仍然是设计师。我们的主要职能是通过了解客户或用户问题并将它们与我们对设计模式、方法和流程的知识进行综合来增加业务价值。是的，成为“编写代码的设计师”可能非常有用，并且会扩展您添加此价值的能力——但我们仍然需要让工程师做出工程决策。

有什么不对吗？

这篇文章中的某些内容很有可能是晦涩的、迟钝的和/或过时的，我希望有机会让它变得更好！请在下方留言、私信我或在 Twitter 上@提及我，以便我改进。