"设计师是否需要学习JavaScript？"是一个流行的问题，但“学JavaScript”具体意味着什么？作为一名网页设计师，你为什么作为网页设计师会问这个问题？你想要更多控制，更好地与开发者沟通，还是认为如果不跟上新技术，你可能会失去工作？

网页开发者是否应该学学设计理论，或者更好说去参加Figma大师班课程或Illustrator培训课程？

我们所有人，不论是开发者还是设计师，都应该学习和实践更好的沟通技巧和文档编写工作。

作为开发者，总有新技术可以学。

作为设计师，你该学哪些技术？

• HTML（基础知识）：很重要，也不是很难
• CSS /SCSS：很有用，经常被低估
• JavaScript /TypeScript/React 等：需要不断学习，对吧？
• WordPress、WebFlow、Shopify、Shopware、Drupal 等：等等.

我觉得没有人能完全掌握JavaScript，即使有人做到了，下个月或者明年的某个时候就会有新的东西冒出来。

同样，你可以花几年时间学习电商或内容管理平台，比如 WordPress。

需要了解的一些概念：

• 可访问性（a11y）：每个人都应该能够使用它
• 渐进增强：即使是在非常老旧的浏览器中
• 响应式网页设计（RWD）：不论屏幕多大或多小
• 网页性能（webperf）：别让用户浪费时间和金钱
• 可持续的网页开发（sustyweb）：别浪费（化石）能源
• 测试驱动开发（TDD）：确保你的操作是正确的
• 原子设计：从可以复用的小元素开始
• ...

我建议不管是设计师还是开发者，都可以先从网页开发的基础开始：HTML和CSS。

HTML 快速入门

在您的内容中添加标记（标签）来定义结构、强调文字，并加入超链接和图片。

定义它的结构，<strong>突出关键词</strong>，并在链接前添加超链接，<a href="</a>，并插入图片。

    footer .curly-style {
      display: curly; /* "curly" (未知的，将被忽略) */
      background: blue; /* 这一行将正常工作 */
    }

    footer.footer--alternative {
      background: red;
      /* 这不会工作，因为你忘了关闭上面的大括号！ */
    }

你不需要准备回答那些关于正确命名的理论面试题，最好是在浏览器的开发者工具里，或者在codepen里做做实验，感受哪些有效，哪些无效。

即使你只使用诸如 Webflow 或 Elementor 这样的“无代码”工具，或者你在 Figma 中设计布局但从不写任何代码，了解这些概念和面临的挑战也是有帮助的。

了解CSS和浏览器的局限性也非常重要。确实，限制依然存在！而且还有一些客户或CEO仍然使用老旧的小iPhone访问网站。

一些有用的资源来学习和查询：

• Mozilla 开发者网络 (MDN)
• CanIUse
• CSS-Tricks
• web.dev
• Smashing 杂志
• Stack Overflow

有很多关于网页开发的优秀（免费）教程是由例如Sara Soueidan、Lea Verou、Rachel Andrew和Temani Afif等设计师、讲师和作者撰写的，以及像frontendmasters.com这样的网站提供的（收费）在线课程。

怎么每个人都跟你讲的不一样呢？

Web开发是复杂的，所以解决问题通常有多种方法。这很好，但也可能导致误解和无意义的争论。

前端开发：UX vs. JavaScript？

我个人的观点是，我倾向于前端开发中的经典、易用性和视觉性，有时也被称为UX工程或创意网页开发，也就是。相比之下，另一些人往往来自算法编程、后端开发和计算机科学领域，他们往往忽视设计和可用性，而专注于业务逻辑的实现。因此在日常工作中更依赖于JavaScript，而较少依赖CSS。但这只是我的观点。最终，我们应该共同努力，整合我们的专长。

超越基础知识

除了基础知识之外，还有一些流行工具可以填补现有技术的空白，让设计师和开发者的日子更加轻松。SCSS 和 less 就是在 CSS 上增加了一些功能。Sass 曾经是有别于 SCSS 的另一种写法，现在已经很少有人用了。提到 Sass 时，人们通常指的是 SCSS。如果有疑问，最好直接问清楚。

同样地，"JavaScript" 不仅仅只是 "JavaScript"。正式来说，它甚至已经不再被称为 "JavaScript"。你有没有听人说他们用 ECMAScript 编程过？也许他们会说自己使用 "使用 ES6 语法的 JS" 或者 "更喜欢用 TypeScript"。另一种值得学习的编程语言？

TypeScript 对 JavaScript 就像 SCSS 对 CSS 一样，更复杂和更强大，但远看还是差不多。

也有JSX，这种语法看起来很像HTML，但实际上它实际上是JavaScript，还有Markdown (MD)，这是一种简单且轻量的HTML替代方案，常用于编写文档和发布博客文章。这是Markdown：

    ## 我们可以用HTML或Markdown做什么

    我们可以定义结构和布局，突出显示文字，还可以添加超链接和图片。

全屏 退出全屏

不太为人所知，但前景看好：HTMX 看起来像是 JSX 和 Vue.js 语法的结合，而 MDX 则结合了 JSX 和 Markdown 等特性。举个简单的例子：

    import {Chart} from './snowfall.js'
    export const year = 2023

    # 去年的雪量

    在 {year}，**雪量** 高于平均水平。
    来源：

    <Chart year={year} color="#fcb32c" />

点击全屏 点击退出全屏

搞糊涂了吗？我们甚至连常见的单页应用（SPA）概念，比如状态管理或缓存技术（不过别担心，我们确实不会涉及这些，我保证）都没有提到！

存在许多特定领域的语言，尽管它们之间有很多共通之处，所以当你已经熟悉了一些之后，学习新的语言会变得更容易。每种语言都会使用少量特定的字符来界定标签和属性，比如前面提到的颜色代码#fcb32c，许多值都是一样的。

JavaScript / TypeScript / React / Angular: 这要视情况而定...

你不需要作为设计师精通 JavaScript。然而，了解一些基本知识可以让你读懂基本的 JavaScript 代码，足够好到可以修改图片文件名或默认值而不会破坏代码的功能。

大多数让JavaScript在20世纪90年代流行的经典应用场景，现在都可以用CSS来完成了，比如鼠标悬停在一个元素上时改变图片或文字的颜色。这些老教程还是挺有用的，能让你体会到发生了什么。

JavaScript 在 1999 年（虽然仍然有效，但还是别那么做。）

    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="example.gif" 
      onMouseOver="this.src='example-over.gif'" 
      onMouseOut="this.src='example.gif'">  <!-- 鼠标悬停时，图片会变为 example-over.gif，移开后恢复为 example.gif -->

全屏 退出全屏

那读起来很短但只能修改一个元素。如果以后需要更改图片文件名，必须将相同代码复制到其他元素，并找到所有需要修改的地方。你也可能会混淆什么时候该用哪种引号（单引号‘’或双引号“”）。

2024 年的 JavaScript：

    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="example.png" class="hoverable">
    <script>
    let hoverableImages = document.getElementsByClassName('hoverable'); 
    for (let i=0; i <  hoverableImages.length; i++) { 
      hoverableImages[i].addEventListener('mouseover',(event) => {
        event.target.src='example-over.gif';
      });
      hoverableImages[i].addEventListener('mouseout',(event) => {
        event.target.src='example-out.gif';
      });
    }
    </script>

全屏模式，退出全屏

这是一个人为的例子，但是这仍然是把简单的事情复杂化的简单方法。在ReactJS中，你可以创建多个组件，并且学习额外的语法JSX来编写复杂的代码，只是为了达到至少在理论上可以用纯CSS轻松实现的效果。

简单的复杂类型

实践中，我会选择使用背景图片（但这会影响可访问性）或者另一个图片元素。需要把鼠标悬停效果移到新的容器元素中。

    <div class="hoverableContainer">
      <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="example.png">
      <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="example-over.png" class="initially-hidden">
    </div>
    <style>
    .initially-hidden {
      display: none;
    }
    .hoverableContainer:hover img:first-child {
      display: none;
    }
    .hoverableContainer:hover img.initially-hidden {
      display: block;
    }
    </style>
当鼠标悬停在hoverableContainer上时，第一个图片将被隐藏，而原本隐藏的图片将会显示出来。

进入全屏模式 退出全屏模式

不过，即使如此，我们只需要一次应用未来的变化，而且我们的 CSS 语法比相应的 JavaScript 更简洁，因此希望不会轻易出错。

描述命名

如你所见，即使这样一个看似简单的例子，一旦你尝试遵循当前的编码规范和建议，它会变得相当复杂。但也许你还能看到另一个方面：如果我作为开发者努力选择描述性的变量名，你或许仍然可以通过阅读我的代码猜测发生了什么，即使你自己写不出这样的东西。

有一种流行的命名方法论，比如BEM（块、元素、修饰符），但在实际操作中，我们往往不能严格遵循一种命名规范。

没人告诉我的命名规则：

代码注释和提交信息一直存在争议。虽然他们擅长编码，但在沟通上却可能力不从心。因此，他们尝试使用描述性命名和代码注释，但往往只是在重复显而易见的事实，就像在真实的停止标志旁边再立一个牌子“这是停止标志”。

设计师也可能容易出现类似的误解。作为开发者，我打开一个 Figma 布局文件，点击一个元素查看详细信息，可能会看到“Ag H1 Brand Default”。Figma 附加的“Ag”（实际上很有帮助的）文字示例这并不是设计师的问题，但我多年来一直试图理解那些字母的含义！ 😂

"啊？！"

这是一张很有意思的图片。

源：Adobe 字体工具在视觉搜索失败时

如果这些例子用类似的文字标注会更好，例如：“主字体一般用于 H1、H3 和 H4（但不用于 H2）”。这样的标注即使显得有些多余，也会非常有帮助。

约束和一致

"明确胜过隐晦"是软件开发中的一个有用的指导原则。定义你的规则：如果有字体大小为12和14，这是否意味着只能在这两个值中选择？字体大小可以是任何其他整数，比如13、15，甚至可以是像12.5这样的小数值？单位用什么表示？磅？像素（px）？百分比（%）？

要明确一点

回到理论和实践，我们重新开始，我们不需要了解所有的事，也不必遵循任何范式或理论，除非它们合理。但是，科学家们通过质疑假设得来了知识。我们仍然可以跟随直觉和内心，但能够加入一些理性的方法来让我们的工作更出色，避免因误解浪费时间和精力。

设计师应该学 JavaScript 还是 CSS 呢？

总结了我的牢骚和抱怨，我想倡导一种实用的方法将理论与实践相结合。虽然参加了一些大学课程，但没有完成学位。相反，我在千禧年初与人共同创立了一家网页设计和开发的初创公司，之后通过参加各种聚会和讲座，弥补了我之前错过的内容。

对于设计师和开发者来说，需要注意的是:

下面是一些基本概念，学习一下:

• HTML
• CSS
• 无障碍性（WCAG）
• 文件类型和文件传输（图片、zip 压缩包、(S)FTP）
• JavaScript（或其他编程语言，如 Python）
• 版本控制（git、GitHub）
• 搜索引擎优化（SEO）和市场营销
• 沟通、协作、项目管理
• AI（它能做什么以及它不能做什么）
• 经济学（如何经营业务和向客户收费）
• 生态学、社会学和文化——因为我们不只是技术宅，而是要参与到社会的各个方面！

作为一名网站设计师，你可以忽略node、npm、docker以及如何维护网服。

开发+设计：让我们弥合差距吧！

设计师和开发人员应该尽早并且经常合作！这不仅有利于我们的客户，还能帮助我们打造既美观又实用，适合每个人使用的网站。

感兴趣吗？联系我（https://www.ingo-steinke.com/），让我们合作吧！