CSS开发人员是干什么的？企业为什么需要这样一个职位？

Posted 2021-04-09 前端之巅

作者 | Silvestar Bistrović

译者 | 核子可乐

编辑 | 张之栋、Yonie

CSS 开发人员到底是干什么的？企业为什么需要这样一个职位？本文将主要对 CSS 工作所涵盖的内容进行介绍，以回答这两个具有深度的问题。

CSS 开发人员属于 Web 专家，他们的主要职责就是通过浏览器向访问者展示精美的页面成果。实际上，每一个网站都在使用 CSS，但现代 Web 开发堆栈对于 CSS 的重视程度却不高，或者说不太公平。遗憾的是，这种误解损害了 CSS 的重要意义，甚至导致其受到严重忽视。

由非 CSS 开发人员处理 CSS 工作，往往会在代码当中留下大量错误与 bug，这同时也会给员工造成巨大的挫败感。在本文中，我将带大家共同了解 CSS 工作所涵盖的内容，以确保大家能够认识到为什么各个站点都需要可靠且专业的 CSS 开发人员。

CSS 开发人员到底是干什么的？

让我们先从最基本的问题说起。CSS 为什么如此重要，CSS 开发人员又到底是干什么的？

CSS 是一种特殊的语言，它无法独立存在——换言之，必须要与 html 配合起来才能发挥作用。因此，CSS 开发人员首先要做的，就是编写 HTML 代码。

保证 HTML 代码的整洁性

编写出简单明了、干净且组织有序的 HTML 代码，绝对是一项非常重要的工作。毕竟，HTML 文档直接决定着我们向最终用户呈现出怎样的设计效果。

如果大家正在为生产用例编写 HTML 文档，那么首先应当确保在文档的开头列出所有必需及可选标记，从而充分运用网站中的现有功能。这里我要强调的，是设置正确的文档类型、语言、元标记、网站图标、加载技术以及 SEO（搜索引擎优化）。

这一切，都将使你的网站更高效也更易于访问，同时为你的受众、搜索引擎以及其它服务与工具提供全部必要的支持。HTML 文档的正文部分同样不宜臃肿，我们应该明确何时使用语义 HTML 标签、如何添加所需要的 HTML 属性，以及如何避免深度嵌套或者分裂——所有这些，都应该在项目之初就充分加以考量。没有哪位专业开发人员会在项目中途才开始思索最佳实践，而且即使是看似基础的开发场景（例如 HTML）同样存在着大量出错的空间。

整体设计，决定着我们如何对各种 HTML 组件进行组织。CSS 开发人员与设计师密切合作，而不同设计师使用的工具也有所区别。熟悉 Sketch、Photoshop、InVision 或者 Figma，并能够实现“切片”设计，都是 CSS 开发人员的必备技能。大家应当始终牢记如何构建组件，从而在设计过程中根据需求快速开发能够提高效率的小工具。另外，请使用良好的命名约定（例如 BEM 或者 OOCSS），这能够防止我们编写出过度臃肿或者难以维护的 CSS 代码。

javascript 无处不在

某些组件应该采用交互式设计，例如 modal 或者 tooltip。这通常要求 CSS 开发人员掌握 JavaScript，但并不需要深刻理解 JavaScript——换言之，你需要学习的主要是 JavaScript 的事件与 DOM 处理机制。DOM 处理往往比较困难，因为大家肯定不愿意耗尽用户的资源并使网站运行变得迟钝无比；在某些极端情况下，网站甚至会崩溃并不再做出任何响应。

JavaScript 的世界正在快速发展，似乎每一天都会有新的框架及工具出现。由于 JavaScript 具有如此旺盛的人气，要想时刻紧跟最新最佳实践的步伐并为最终用户提供理想的访问体验，那么请务必关注这款语言的一切动态。

CSS

CSS 也是如此。虽然很多人觉得 CSS 的发展速度无法与 JavaScript 同日而语，但 CSS 变量、CSS 网格以及 Flexbox 等新功能仍然值得各位高度关注。

接下来是浏览器支持，时至今日这也是个必须留意的大问题。在现代浏览器中，你的网站也许一看就是花了大价钱设计的，但在传统浏览器里效果却往往没那么好。IE 11 虽然号称支持 Flexbox，但其实际效果仍值得商榷。了解如何避免这些问题，也是 CSS 开发人员日常工作中的一部分。

最后，幸好有技术社区的大力支持，Flexbug 以及 Gridbugs 等网站都能帮助我们节省不少调试的时间。

CSS 工具、技术与原则

有时候，我们也可以依靠任务运行器或者 Grunt、Gulp 以及 webpack 等捆绑器工具建立起可靠的代码。大家可以利用 linters、minifiers、babel 或者 PostCSS 通过转换实现代码增强。

接下来，我们还需要考虑各种字体、排版、图像、图标、图标字体、动画、过渡以及其它抽象因素，这些同样是 CSS 开发人员每天都需要面对的任务。每一项功能都有着其特殊性、局限性、问题以及解决方案。你掌握的功能与技术越多，在项目当中设置并实现组件也就变得越轻松。

CSS 当中存在着众多属性与值，我们不可能熟悉一切。幸运的是，我们可以借助工具的力量，特别是代码编辑器与开发工具。但是，在面对 z-index 问题时，即使是工具也无助于解决问题。这时候，失败也是是大家最好的学习方式。

我得强调，经历失败是从事 CSS 开发当中的必要过程，原因包括以下几点：

如果你从未尝试解决 z-index 问题，那么你永远不会理解层叠上下文的意义。如果你从未尝试覆盖 Bootstrap 类，你也永远无法理解特异性是怎么回事。如果你从未尝试解决浮动问题，那么盒子模型也将成为你永远的短板。

有时候，解决办法非常简单，但提出问题却很困难。与其它语言相比，我们无法在 CSS 中询问为什么循环不起作用。你需要完整的上下文才能解决 CSS 中的问题，而这也正是很多人的知识空白：级联（层叠）。

级联以 CSS 中最好的功能之一，它应该成为我们解决问题的好伙伴，而非问题本身。有些开发人员发明了 CSS-in-JS 等自定义方法来解决这个问题。如果将 RSS 打包在像 React 这样的封装环境当中，我们将无法在其它环境直接使用。这很明显有违平台的可扩展性要求。如果遇到了级联问题，请积极对待、认真学习，最终把它转化成你自己的竞争优势。

在筹备这篇文章时，Max Böck 恰好发表了一篇关于 CSS 思维模式的精彩文章，其中提到 CSS 开发人员应当以盒子模型为基础进行思考，测试需要修改的内容、尽可能避免使用固定数字、同时尽可能在不覆盖默认值及上下文的前提下编写代码。

企业为什么需要这样一个职位？

大多数前端甚至是全栈开发人员，都可以编写 CSS 代码，但并不是每个人都有能力修改 CSS bug，或者在尽量避免遍历 HTML 代码或依赖 JavaScript 的情况下实现设计效果。专业的 CSS 开发人员更关注代码中的最终细节，喜欢创建布局与组件——包括那些极为复杂的布局与组件——而且非常清楚要如何解决每一个问题或 bug。

CSS 编码标准

在编写代码之前，我们最好先制定一套明确的代码编写规则。CSS 开发人员应该尊重编码标准——这一点对于项目的可维护性与可扩展性至关重要。

首先，整理出一份适用于项目整体的命名约定。尽早建立命名约定，可以帮助开发人员编写出更好、更有条理的代码。另外，其他项目参与者也可以通过单独阅读 HTML 代码了解组件结构，以及各组件与元素之间的关系。

决定如何处理 CSS 中的缩进、选择器类型、缩写属性、以及单位。例如，如果编码标准建议使用 rem 单位，则尽量不要使用像素单位。每个人都有自己独特的写作 / 编码风格，但作为专业人士，大家必须能够采用——以及更重要的——并理解每一项概念。

CSS 设计实现

在将设计转换为代码之前，大家应该花时间了解各个页面、布局以及组件。如果可能，请剖析每个页面，创建页面与组件清单，并努力从中找到共通模式。

如果大家注意到某一组件存在于多个页面当中，则应该观察其周边环境并尝试将其视为独立组件。如果存在一系列类似的组件——例如卡或者列表，则可统一使用相同组件的变体。这样一来，你就可以复用现有 HTML 代码，并稍加修改以实现各种略有差别的设计效果。

尝试在其它领域中找寻共通模式同样非常重要，包括排版与间距。有时候，你可以在整个项目当中使用辅助类，从而摆脱对单一页面的逐个调整。

组织你的 CSS 代码

CSS 开发人员应当组织自己编写出的代码，并建立起能够为他人所理解的结构。在使用 CSS 处理器等工具时，开发人员还应当记录生成编译代码的过程。

如果有必要，CSS 开发人员也可以创建样式指南。样式指南可以在创建新页面或者判断如何调整现有页面时作为参考。我的建议是为整个团队提供全局样式指南，这时每位成员就能更轻松在面对特定视觉上下文做出决策。样式指南中可以涵盖调色板、排版规则、编码标准甚至是静态页面等。其中的潜在内容多种多样，完全取决于你的预算以及想象力。

生产中的 CSS 代码

编写 CSS 代码，意味着你需要解决不同浏览器之间存在的问题、bug、动画、过渡、响应以及显示样式。即使是最全面的开发人员，也很难轻松解决所有这些问题。我甚至可以相当笃定地直言，跨浏览器兼容是最令 CSS 开发人员头痛、而且很多人压根不会解决的核心挑战。在另一方面，专业的 CSS 开发人员应当了解（或者至少应该有所耳闻）如何在代码编写过程中考虑 bug、浏览器以及运行环境的问题。

使用现代方法能够很好地缓解上述问题，但是，我们也应当重视对于旧有浏览器以及用户特定设置（例如关闭大部分特效）的支持。

CSS 开发人员还需要编写 HTML 与 JavaScript 代码。这意味着他们需要承担起交付资产的责任。CSS 开发人员应当负责加载字体、提取关键 CSS、使用延迟与异步 JavaScript 加载，以及提供响应式图像等等。

这些技术都不容易实现，目前也没有太好的解决办法。

CSS 开发人员能为我们做什么

说了这么多，相信大家已经理解到 CSS 开发人员的重要作用。下面，我们再把他们的主要贡献梳理一遍：

• 确保每一位项目成员都遵守编码标准。
• 实现设计。
• 组织代码。
• 编写代码。
• 修复 bug。
• 学习新技术。

• 改进代码。

总结

长期以来，很多企业甚至个人都对 CSS 开发人员这一角色的重要性、甚至是存在意义抱有强烈的怀疑态度。通过这篇文章，希望大家能够树立起正确的判断：CSS 开发人员非常重要，而且不可或缺。

在之前的一篇文章中，我们发现当前有不少技术领导者认为 CSS 开发人员不需要掌握关于现代 JavaScript 框架的专业知识。这个问题的本质，实际上在于“纯 CSS”已经足以支撑起一类职业岗位，而且其重要性至少等同于“纯 JavaScript”开发人员。

毕竟，我们都希望把专业的工作交给专业的人来做。只有这样，我们的要求才能得以满足，我们预期中的完美效果才能真正转化为现实。

英文原文: https://www.toptal.com/css/why-you-need-a-css-developer

 活动推荐

ArchSummit 全球架构师峰会北京站 2019 不仅涵盖了“大前端趋势”、“反应式架构”、“质量保障体系建设”等火热专题，更有“实时计算的平台化实践”、“提升效率的 AIOps”等热门专题。更多技术亮点请【扫码】或点击【阅读原文】了解详细信息。7 折倒计时 4 天，限时直降 2640 元！了解详情请联系票务经理灰灰：15600537884 ，微信同号。